Step 5: Add Enter Event Handlers for the NumericUpDown Controls

You may have noticed something odd about typing numbers in the NumericUpDown control. To fix this, you add an Enter event handler.

To see the NumericUpDown control behavior

1. Run your program and start the game. The sum NumericUpDown control should have a flashing cursor in it next to 0 (zero).

2. Type 3, and 30 appears. Type 5, and 350 appears, but after a second, it changes to 100.

   Before you fix this problem, think about what's happening. Consider why the 0 didn't disappear when you typed 3. Consider why 350 changed to 100, and why there was a delay before it changed.

   Note

   Although it may seem like odd behavior, there is an explanation. When you click the Start button, the button's Enabled property is set to False, and the button appears dimmed and is unavailable. Your program looks for the control with the next lowest TabIndex value—the sum NumericUpDown control—and changes focus to that control. When you use the TAB key to go to a NumericUpDown control, it automatically positions the cursor at the start of the control, which is what causes the numbers that you type to be entered from the left and not the right. When you enter a number above the MaximumValue property, which is set to 100, it replaces the number entered with the maximum value.

To add an Enter event handler for the NumericUpDown control

1. To prevent this odd behavior and make your program easier to use, add an event handler for each NumericUpDown control Enter event. Use the Events page in the Properties dialog box to add an Enter event handler for the sum NumericUpDown control called answer_Enter.

   Properties dialog box

   

   The code should look like the following.

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

   Although it may look complex initially, it's easier to understand if you look at it step by step. First, look at the top of the method: object sender in C# or sender As System.Object in Visual Basic. This means that inside your method, any time you use sender, it refers to the NumericUpDown control whose Enter event is firing. So, in the first line of the method, you specify that it isn't just an object, but specifically a NumericUpDown control. (Every NumericUpDown control is an object, but not every object is a NumericUpDown control.) The next line verifies whether answerBox was successfully converted (cast) from an object to a NumericUpDown control. If unsuccessful, it would have a value of null (C#) or Nothing (Visual Basic). The third line finds the length of the answer that's currently displayed in the NumericUpDown control. The fourth line tells the NumericUpDown control to select the answer. Now when the user navigates into the control, it fires this event, which causes it to select the answer. As soon as the user starts typing, the previous answer is cleared and replaced with the new answer.

2. After this event handler is in place, go to Windows Forms Designer and select the difference NumericUpDown control. Go to the Events page in the Properties dialog box, scroll down to the Enter event, and select the event handler that you just added.

3. Then do the same for the product and quotient NumericUpDown controls.

4. Save and run your program. The odd behavior should no longer occur.

To continue or review

• To go to the next tutorial step, see Step 6: Add a Subtraction Problem.

• To return to the previous tutorial step, see Step 4: Add the CheckTheAnswer() Method.