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

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

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

このチュートリアルでは、次の方法について学習します。

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

前提条件

このチュートリアルは、「数学クイズの WinForms アプリを作成する」から始まる、以前のチュートリアルに基づいています。 それらのチュートリアルをまだ完了していない場合は、最初にそちらを終わらせてください。

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

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

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

   

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

2. Enter イベントを選択し、「answer_Enter」と入力してから、Enter を選択します。

   

   コード エディターが表示され、 sum NumericUpDown コントロール用に作成した Enter イベント ハンドラーが表示されます。

3. answer_Enter イベント ハンドラーのメソッドに、次のコードを追加します。

   C#

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

   VB

   ''' <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 コード スニペットのいずれかを表示します。

このコードの場合:

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

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

1. Windows フォーム デザイナーで、加算問題の NumericUpDown コントロールをもう一度選択します。

2. [プロパティ] ダイアログ ボックスの [イベント] ページで、Click イベントを見つけてから、ドロップダウン メニューで answer_Enter を選択します。 このイベント ハンドラーは、先ほど追加したものです。

3. Windows フォーム デザイナーで、減算問題の NumericUpDown コントロールを選択します。

4. [プロパティ] ダイアログ ボックスの [イベント] ページで、Enter イベントを見つけてから、ドロップダウン メニューで answer_Enter を選択します。 このイベント ハンドラーは、先ほど追加したものです。 Click イベントについてもこの手順を繰り返します。

5. 乗算および除算の NumericUpDown コントロールに対して、前の 2 つの手順を繰り返します。

アプリを実行する

1. プログラムを保存し、実行します。

2. クイズを開始し、NumericUpDown コントロールを選択します。 既存の値が自動的に選択され、別の値を入力し始めるとクリアされます。

   

アプリのカスタマイズ

このチュートリアルの最後の部分では、クイズをカスタマイズする方法を説明して、学習した内容を掘り下げます。

ラベルの色を変更する

• クイズで 5 秒しか残っていない場合に、timeLabel コントロールの BackColor プロパティを使用して、このラベルを赤に変更します。

  C#

  timeLabel.BackColor = Color.Red;
  

  VB

  timeLabel.BackColor = Color.Red
  

• クイズが終了したら元の色に戻します。

正しい解答の場合にサウンドを再生する

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

次のステップ

お疲れさまでした。 このチュートリアル シリーズはこれで終了です。 次に示す Visual Studio IDE でのプログラミング タスクと設計タスクを完了しました。

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

絵合わせゲームの作成方法について、別のチュートリアル シリーズで学習を続けてください。

チュートリアル 3: 絵合わせゲームの作成