手順 5: NumericUpDown コントロールの Enter イベント ハンドラーの追加Step 5: Add Enter Event Handlers for the NumericUpDown Controls

このチュートリアルの第 5 部では、クイズ問題の解答の入力が少し楽になるように Enter イベント ハンドラーを追加します。In the fifth part of this tutorial, you'll add Enter event handlers to make entering answers for quiz problems a little easier. このコードは、クイズの受け手が選択して別の値の入力を開始するとすぐに、各 NumericUpDown コントロールの現在の値を選択し、クリアします。This code will select and clear the current value in each NumericUpDown control as soon as the quiz taker chooses it and starts to enter a different value.

注意

このトピックは、コーディングの基本概念に関するチュートリアル シリーズの一部です。This topic is part of a tutorial series about basic coding concepts. チュートリアルの概要については、「チュートリアル 2: 制限時間ありの計算クイズの作成」を参照してください。For an overview of the tutorial, see Tutorial 2: Create a Timed Math Quiz.

既定の動作を確認するにはTo verify the default behavior

  1. プログラムを実行し、クイズを開始します。Run your program, and start the quiz.

    加算問題の NumericUpDown コントロールで、カーソルが 0 (ゼロ) の横で点滅します。In the NumericUpDown control for the addition problem, the cursor flashes next to 0 (zero).

  2. 3」と入力すると、コントロールが 30 を示すことに注意してください。Enter 3, and note that the control shows 30.

  3. 5」と入力すると 350 と表示されますが、その後すぐに 100 に変わります。Enter 5, and note that 350 appears but changes to 100 after a second.

    この問題を修正する前に、状況をまとめておきましょう。Before you fix this problem, think about what's happening. 3」を入力したときに 0 が消えなかった理由、および 350100 にすぐに変化しなかった理由を検討します。Consider why the 0 didn't disappear when you entered 3 and why 350 changed to 100 but not immediately.

    この動作は不適切に見えますが、コードのロジックからすると当然です。This behavior may seem odd, but it makes sense given the logic of the code. [Start] ボタンをクリックすると、Enabled プロパティが False に設定され、ボタンは淡色表示になり使用できません。When you choose the Start button, its Enabled property is set to False, and the button appears dimmed and is unavailable. プログラムは、加算問題の NumericUpDown コントロールである、次に小さい TabIndex 値を持つコントロールに現在の選択 (フォーカス) を変更します。Your program changes the current selection (focus) to the control that has the next lowest TabIndex value, which is the NumericUpDown control for the addition problem. Tab キーを使用して NumericUpDown コントロールに移動すると、カーソルはそのコントロールの先頭に自動的に移動します。このため、入力した数値が右ではなく左から入力されます。When you use the Tab key to go to a NumericUpDown control, the cursor is automatically positioned at the start of the control, which is why the numbers that you enter appear from the left side and not the right side. 100 に設定されている、MaximumValue プロパティの値を超える数を指定すると、入力した数はそのプロパティの値に置き換えられます。When you specify a number that's higher than the value of the MaximumValue property, which is set to 100, the number that you enter is replaced with the value of that property.

NumericUpDown コントロールの Enter イベント ハンドラーを追加するにはTo add an Enter event handler for a NumericUpDown control

  1. フォームの最初の NumericUpDown コントロール ("sum") を選択し、次に、[プロパティ] ダイアログ ボックスでツール バーの [イベント] アイコンをクリックします。Choose the first NumericUpDown control (named "sum") on the form, and then, in the Properties dialog box, choose the Events icon on the toolbar.

    [プロパティ] ダイアログ ボックスの [イベント] タブには、フォーム上で選択した項目に対して応答 (処理) できるイベントがすべて表示されます。The Events tab in the Properties dialog box displays all of the events that you can respond to (handle) for the item that you choose on the form. NumericUpDown コントロールを選択したため、そのコントロールに関係のあるすべてのイベントが一覧に表示されます。Because you chose the NumericUpDown control, all of the events listed pertain to it.

  2. Enter イベントをクリックし、「answer_Enter」と入力して、Enter キーを押します。Choose the Enter event, enter answer_Enter, and then choose the Enter key.

    [プロパティ] ダイアログ ボックスProperties dialog box
    [プロパティ] ダイアログ ボックスProperties dialog box

    sum NumericUpDown コントロールの Enter イベント ハンドラーを追加し、そのハンドラーに answer_Enter という名前を付けます。You've just added an Enter event handler for the sum NumericUpDown control, and you've named the handler answer_Enter.

  3. answer_Enter イベント ハンドラーのメソッドに、次のコードを追加します。In the method for the answer_Enter event handler, add the following code.

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

    このコードは複雑に見えますが、順番に見ていけば理解できます。This code may look complex, but you can understand it if you look at it step by step. まず、メソッドの先頭の部分 (C# の場合は object sender、Visual Basic の場合は sender As System.Object) を見てください。First, look at the top of the method: object sender in C# or sender As System.Object in Visual Basic. このパラメーターは、sender と呼ばれる、イベントが発生しているオブジェクトを参照します。This parameter refers to the object whose event is firing, which is known as the sender. この場合、sender オブジェクトは NumericUpDown コントロールです。In this case, the sender object is the NumericUpDown control. したがって、メソッドの 1 行目で、sender が汎用オブジェクトではなく、具体的に NumericUpDown コントロールであると指定します。So, in the first line of the method, you specify that the sender isn't just any generic object but specifically a NumericUpDown control. (NumericUpDown コントロールはいずれもオブジェクトですが、オブジェクトがすべて NumericUpDown コントロールであるとは限りません)。NumericUpDown コントロールはこのメソッドで answerBox と名付けられます。これは、sum NumericUpDown コントロールだけではなく、フォームのすべての NumericUpDown コントロールに使用されるためです。(Every NumericUpDown control is an object, but not every object is a NumericUpDown control.) The NumericUpDown control is named answerBox in this method, because it will be used for all of the NumericUpDown controls on the form, not just the sum NumericUpDown control. このメソッドで answerBox 変数を宣言するため、そのスコープはこのメソッドにのみ適用されます。Because you declare the answerBox variable in this method, its scope applies only to this method. つまり、変数はこのメソッド内でのみ使用できます。In other words, the variable can be used only within this method.

    次の行では、answerBox がオブジェクトから NumericUpDown コントロールに正常に変換 (キャスト) されたかどうかを確認しています。The next line verifies whether answerBox was successfully converted (cast) from an object to a NumericUpDown control. 変換が成功しなかったときは、変数は null (C#) または Nothing (Visual Basic) の値になります。If the conversion was unsuccessful, the variable would have a value of null (C#) or Nothing (Visual Basic). 3 行目は NumericUpDown コントロールに表示される解答の長さを取得し、4 行目はこの長さに基づいてコントロールの現在の値を選択します。The third line gets the length of the answer that appears in the NumericUpDown control, and the fourth line selects the current value in the control based on this length. これで、クイズの受け手がコントロールを選択すると、Visual Studio がこのイベントを発生させ、現在の解答が選択されます。Now, when the quiz taker chooses the control, Visual Studio fires this event, which causes the current answer to be selected. クイズの受け手が別の解答の入力を開始するとすぐに、前の解答がクリアされて新しい解答に置き換えられます。As soon as the quiz taker starts to enter a different answer, the previous answer is cleared and replaced with the new answer.

  4. Windows フォーム デザイナーで、difference NumericUpDown コントロールを選択します。In Windows Forms Designer, choose the difference NumericUpDown control.

  5. [プロパティ] ダイアログ ボックスの [イベント] ページで、Enter イベントまでスクロールし、行の末尾にあるドロップダウン矢印をクリックし、追加した answer_Enter イベント ハンドラーを選択します。In the Events page of the Properties dialog box, scroll down to the Enter event, choose the drop-down arrow at the end of the row, and then choose the answer_Enter event handler that you just added.

  6. product および quotient の各 NumericUpDown コントロールに対して、前の手順を繰り返します。Repeat the previous step for the product and quotient NumericUpDown controls.

  7. プログラムを保存し、実行します。Save your program, and then run it.

    NumericUpDown コントロールを選択すると、既存の値が自動的に選択され、別の値を入力を開始するとクリアされます。When you choose a NumericUpDown control, the existing value is automatically selected and then cleared when you start to enter a different value.

続行または確認するにはTo continue or review