자습서: 수학 퀴즈 WinForms 앱 사용자 지정

아티클
04/21/2023

4개 자습서로 구성된 이 시리즈에서는 수학 퀴즈를 빌드합니다. 퀴즈는 퀴즈를 푸는 사람이 지정된 시간 이내에 답변을 시도하는 4가지 난수 수학 문제를 포함합니다.

이 자습서에서는 기본값을 지우고 컨트롤의 모양을 사용자 지정하여 퀴즈를 향상하는 방법을 보여 줍니다.

이 첫 번째 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

기본 NumericUpDown 컨트롤 값을 지우는 이벤트 처리기를 추가합니다.
퀴즈를 사용자 지정합니다.

사전 요구 사항

이 자습서는 수학 퀴즈 WinForms 앱 만들기로 시작하는 이전 자습서를 기반으로 작성되었습니다. 이전 자습서를 완료하지 않은 경우 해당 자습서를 먼저 진행합니다.

NumericUpDown 컨트롤에 대한 이벤트 처리기 추가

퀴즈에는 퀴즈를 푸는 사람이 숫자를 입력하는 데 사용하는 NumericUpDown 컨트롤이 포함되어 있습니다. 답변을 입력할 때 먼저 기본값을 선택하거나 해당 값을 수동으로 삭제해야 합니다. Enter 이벤트 처리기를 추가하여 답변을 더 쉽게 입력할 수 있습니다. 이 코드는 퀴즈를 푸는 사람이 NumericUpDown 컨트롤을 선택하고 다른 값을 입력하는 즉시 각 NumericUpDown 컨트롤의 현재 값을 선택하고 지웁니다.

양식에서 첫 번째 NumericUpDown 컨트롤을 선택합니다. 속성 대화 상자의 도구 모음에서 이벤트 아이콘을 선택합니다.

$Screenshot that shows the toolbar of the Properties dialog box. An icon that contains a lightning bolt is called out.$

속성의 이벤트 탭에 양식에서 선택한 항목에 대해 응답할 수 있는 모든 이벤트가 표시됩니다. 이 경우 나열된 모든 이벤트는 NumericUpDown 컨트롤과 관련됩니다.
Enter 이벤트를 선택하고 answer_Enter를 입력한 후 Enter 키를 선택합니다.

$Screenshot that shows the Properties dialog box with the Enter event selected. The method box contains answer_Enter.$

코드 편집기가 나타나고 sum NumericUpDown 컨트롤에 대해 만든 Enter 이벤트 처리기가 표시됩니다.

answer_Enter 이벤트 처리기의 메서드에 다음 코드를 추가합니다.

private void answer_Enter(object sender, EventArgs e)
{
    // Select the whole answer in the NumericUpDown control.
    NumericUpDown answerBox = sender as NumericUpDown;

    if (answerBox != null)
    {
        int lengthOfAnswer = answerBox.Value.ToString().Length;
        answerBox.Select(0, lengthOfAnswer);
    }
}

''' <summary> 
''' Modify the behavior of the NumericUpDown control
''' to make it easier to enter numeric values for
''' the quiz.
''' </summary> 
Private Sub answer_Enter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles sum.Enter

    ' Select the whole answer in the NumericUpDown control.
    Dim answerBox = TryCast(sender, NumericUpDown)

    If answerBox IsNot Nothing Then
        Dim lengthOfAnswer = answerBox.Value.ToString().Length
        answerBox.Select(0, lengthOfAnswer)
    End If

End Sub

중요

이 페이지의 오른쪽 위에 있는 프로그래밍 언어 컨트롤을 사용하여 C# 코드 조각 또는 Visual Basic 코드 조각을 볼 수 있습니다.

Programming language control for Microsoft Learn

이 코드에서는 다음과 같습니다.

첫 번째 줄은 메서드를 선언합니다. 여기에는 sender라는 매개 변수가 포함됩니다. C#에서 매개 변수는 object sender입니다. Visual Basic에서는 sender As System.Object입니다. 이 매개 변수는 이벤트를 발생시킨 개체, 즉 이벤트 전송자를 참조합니다. 이 코드에서는 전송자 개체가 NumericUpDown 컨트롤입니다.
메서드 내의 첫 번째 줄은 전송자를 제네릭 개체에서 NumericUpDown 컨트롤로 캐스팅하거나 변환합니다. 또한 이 줄은 answerBox라는 이름을 NumericUpDown 컨트롤에 할당합니다. 양식의 모든 NumericUpDown 컨트롤은 더하기 문제의 컨트롤뿐만 아니라 이 메서드를 사용합니다.
다음 줄에서는 answerBox가 NumericUpDown 컨트롤로 성공적으로 캐스팅되었는지를 확인합니다.
if 문 내의 첫 번째 줄은 현재 NumericUpDown 컨트롤에 있는 답변의 길이를 결정합니다.
if 문 내의 두 번째 줄은 답변 길이를 사용하여 컨트롤의 현재 값을 선택합니다.

퀴즈를 푸는 사람이 컨트롤을 선택하면 Visual Studio에서 이 이벤트를 발생시킵니다. 이 코드는 현재 답변을 선택합니다. 퀴즈를 푸는 사람이 다른 답변을 입력하기 시작하면 현재 답변이 지워지고 새 답변으로 바뀝니다.

Windows Forms 디자이너에서 더하기 문제의 NumericUpDown 컨트롤을 다시 선택합니다.
속성 대화 상자의 이벤트 페이지에서 Click 이벤트를 찾은 다음 드롭다운 메뉴에서 answer_Enter 선택합니다. 이 이벤트 처리기는 방금 추가한 이벤트 처리기입니다.
Windows Forms 디자이너에서 빼기 문제의 NumericUpDown 컨트롤을 선택합니다.
속성 대화 상자의 이벤트 페이지에서 Enter 이벤트를 찾은 후 드롭다운 메뉴에서 answer_Enter를 선택합니다. 이 이벤트 처리기는 방금 추가한 이벤트 처리기입니다. Click 이벤트에 대해 이 단계를 반복합니다.
곱하기 및 나누기 NumericUpDown 컨트롤에 대해 이전 두 단계를 반복합니다.

앱을 실행합니다.

프로그램을 저장하고 실행합니다.
퀴즈를 시작하고 NumericUpDown 컨트롤을 선택합니다. 다른 값을 입력하기 시작하면 기존 값이 자동으로 선택된 후 지워집니다.

$Screenshot that shows the quiz app with four random math problems. The default answer to the first problem is selected.$

퀴즈 사용자 지정

자습서의 이 마지막 부분에서는 퀴즈를 사용자 지정하고 배운 내용을 확장하는 몇 가지 방법을 살펴보겠습니다.

레이블 색 변경

퀴즈에서 남은 시간이 5초뿐이라면 timeLabel 컨트롤의 BackColor 속성을 사용하여 이 레이블을 빨간색으로 바꿉니다.
- C#
- VB
```
timeLabel.BackColor = Color.Red;
```
```
timeLabel.BackColor = Color.Red
```
퀴즈가 끝나면 색을 초기화합니다.

정답 소리 재생

NumericUpDown 컨트롤에 정답이 입력되면 소리를 재생하여 퀴즈를 푸는 사람에게 힌트를 제공합니다. 이 기능을 구현하려면 각 컨트롤의 ValueChanged 이벤트에 대한 이벤트 처리기를 작성합니다. 퀴즈를 푸는 사람이 컨트롤의 값을 변경할 때마다 이 유형의 이벤트가 발생합니다.

다음 단계

축하합니다! 이 자습서 시리즈를 완료했습니다. Visual Studio IDE에서 다음과 같은 프로그래밍 및 디자인 작업을 완료했습니다.

Windows Forms를 사용하는 Visual Studio 프로젝트 만들기
레이블, 단추, NumericUpDown 컨트롤 추가
타이머 추가
컨트롤에 대한 이벤트 처리기 설정
이벤트를 처리하는 C# 또는 Visual Basic 코드 작성

계속해서 다른 자습서 시리즈를 통해 일치 게임을 빌드하는 방법을 학습하세요.

자습서 3: 일치 게임 만들기

다음을 통해 공유