チュートリアル: 数学クイズ WinForms アプリをカスタマイズする

2025-06-12

この 4 つのチュートリアルシリーズでは、数学クイズを作成します。クイズには、クイズの受験者が指定された時間内に答えようとする 4 つのランダムな数学問題が含まれています。

このチュートリアルでは、既定値をクリアし、コントロールの外観をカスタマイズして、クイズを強化する方法について説明します。

この最後のチュートリアルでは、次の方法を学習します。

イベントハンドラーを追加して、NumericUpDown コントロールの既定の値をクリアします。
クイズをカスタマイズします。

前提条件

このチュートリアルは、計算クイズ WinForms アプリを作成するから始まる、前のチュートリアルに基づいています。まだこれらのチュートリアルを完了していない場合は、最初にそれらを進めてください。

NumericUpDown コントロールのイベントハンドラーを追加する

クイズには、クイズの受験者が数値の入力に使用する NumericUpDown コントロールが含まれています。回答を入力するときは、最初に既定値を選択するか、その値を手動で削除する必要があります。 Enter イベントハンドラーを追加することで、回答を簡単に入力できます。このコードは、クイズの解答者が選択して別の値の入力を開始するとすぐに、各 NumericUpDown コントロールの現在の値を選択し、クリアします。

フォームの最初の NumericUpDown コントロールを選択します。 [プロパティ] ダイアログボックスで、ツールバーの [イベント] アイコンを選択します。

$[プロパティ] ダイアログボックスのツールバーを示すスクリーンショット。稲妻を含むアイコンが呼び出されます。$

[プロパティ] の [イベント] タブには、フォームで選択したアイテムに対して応答できるすべてのイベントが表示されます。この場合、一覧表示されているすべてのイベントは NumericUpDown コントロールに関連します。
Enter イベントを選択し、「answer_Enter」と入力して、最後に Enterを選択します。

$Enter イベントが選択された [プロパティ] ダイアログボックスを示すスクリーンショット。メソッドボックスには、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

このコードでは、次の操作を行います。

最初の行はメソッドを宣言します。 senderという名前のパラメーターが含まれています。 C# では、パラメーターは object senderです。 Visual Basic では、sender As System.Objectです。このパラメーターは、イベントが発生しているオブジェクト (送信者と呼ばれます) を参照します。この場合、sender オブジェクトは NumericUpDown コントロールです。
メソッド内の最初の行は、送信者をジェネリックオブジェクトから NumericUpDown コントロールにキャストまたは変換します。この行では、answerBox 名前も NumericUpDown コントロールに割り当てられます。フォーム上のすべての NumericUpDown コントロールは、追加問題のコントロールだけでなく、このメソッドを使用します。
次の行は、answerBox が NumericUpDown コントロールとして正常にキャストされたかどうかを確認します。
if ステートメント内の最初の行は、現在 NumericUpDown コントロールにある回答の長さを決定します。
if ステートメント内の 2 行目では、応答の長さを使用して、コントロール内の現在の値を選択します。

クイズの受け取り側がコントロールを選択すると、Visual Studio によってこのイベントが発生します。このコードは、現在の回答を選択します。クイズの受験者が別の回答を入力し始めるとすぐに、現在の回答がクリアされ、新しい回答に置き換えられます。

Windows フォームデザイナーで、足し算問題の NumericUpDown コントロールをもう一度選択します。
[プロパティ] ダイアログボックスの [イベント] ページで、[Click] イベントを見つけて、ドロップダウンメニューから [answer_Enter] を選択します。このイベントハンドラーは、先ほど追加したイベントハンドラーです。
Windows フォームデザイナーで、減算問題の NumericUpDown コントロールを選択します。
[プロパティ] ダイアログボックスの [イベント] ページで、Enter イベントを見つけて、ドロップダウンメニューから answer_Enter を選択します。このイベントハンドラーは、先ほど追加したイベントハンドラーです。 Click イベントに対してこの手順を繰り返します。
乗算コントロールと除算 NumericUpDown コントロールに対して、前の 2 つの手順を繰り返します。

アプリを実行する

プログラムを保存して実行します。
クイズを開始し、NumericUpDown コントロールを選択します。既存の値は自動的に選択され、別の値の入力を開始するとクリアされます。

$4 つのランダムな数学の問題があるクイズアプリを示すスクリーンショット。最初の問題に対する既定の回答が選択されています。$

クイズをカスタマイズする

このチュートリアルの最後の部分では、クイズをカスタマイズし、学習した内容を拡張するいくつかの方法について説明します。

ラベルの色を変更する

timeLabel コントロールの BackColor プロパティを使用して、クイズに 5 秒しか残っていないときにこのラベルを赤に変更します。
- C#
- VB
```
timeLabel.BackColor = Color.Red;
```
```
timeLabel.BackColor = Color.Red
```
クイズが終わったら色をリセットします。

正しい回答を得るためのサウンドを再生する

正解が NumericUpDown コントロールに入力されたときにサウンドを再生して、クイズの受け取り側にヒントを与えます。この機能を実装するには、各コントロールの ValueChanged イベントのイベントハンドラーを記述します。この種のイベントは、クイズの受け取り者がコントロールの値を変更するたびに発生します。

次の手順

おめでとうございます。この一連のチュートリアルを完了しました。 Visual Studio IDE で次のプログラミングタスクと設計タスクを完了しました。

Windows フォームを使用する Visual Studio プロジェクトを作成しました
ラベル、ボタン、NumericUpDown コントロールを追加しました
タイマーを追加しました
コントロールのイベントハンドラーを設定する
イベントを処理するために記述された C# または Visual Basic コード

一致するゲームを構築する方法に関する別のチュートリアルシリーズで学習を続けます。

チュートリアル 3: 一致するゲームを作成する

次の方法で共有

チュートリアル: 数学クイズ WinForms アプリをカスタマイズする

前提 条件

NumericUpDown コントロールのイベント ハンドラーを追加する