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

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

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

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

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

사전 요구 사항

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

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

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

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

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

    속성이벤트 탭에 양식에서 선택한 항목에 대해 응답할 수 있는 모든 이벤트가 표시됩니다. 이 경우 나열된 모든 이벤트는 NumericUpDown 컨트롤과 관련됩니다.

  2. 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 이벤트 처리기가 표시됩니다.

  3. 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);
        }
    }
    

중요

이 페이지의 오른쪽 위에 있는 프로그래밍 언어 컨트롤을 사용하여 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에서 이 이벤트를 발생시킵니다. 이 코드는 현재 답변을 선택합니다. 퀴즈를 푸는 사람이 다른 답변을 입력하기 시작하면 현재 답변이 지워지고 새 답변으로 바뀝니다.

  1. Windows Forms 디자이너에서 더하기 문제의 NumericUpDown 컨트롤을 다시 선택합니다.

  2. 속성 대화 상자의 이벤트 페이지에서 Click 이벤트를 찾은 다음 드롭다운 메뉴에서 answer_Enter 선택합니다. 이 이벤트 처리기는 방금 추가한 이벤트 처리기입니다.

  3. Windows Forms 디자이너에서 빼기 문제의 NumericUpDown 컨트롤을 선택합니다.

  4. 속성 대화 상자의 이벤트 페이지에서 Enter 이벤트를 찾은 후 드롭다운 메뉴에서 answer_Enter를 선택합니다. 이 이벤트 처리기는 방금 추가한 이벤트 처리기입니다. Click 이벤트에 대해 이 단계를 반복합니다.

  5. 곱하기 및 나누기 NumericUpDown 컨트롤에 대해 이전 두 단계를 반복합니다.

앱을 실행합니다.

  1. 프로그램을 저장하고 실행합니다.

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

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

퀴즈 사용자 지정

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

레이블 색 변경

  • 퀴즈에서 남은 시간이 5초뿐이라면 timeLabel 컨트롤의 BackColor 속성을 사용하여 이 레이블을 빨간색으로 바꿉니다.

    timeLabel.BackColor = Color.Red;
    
  • 퀴즈가 끝나면 색을 초기화합니다.

정답 소리 재생

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

다음 단계

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

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

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