3.3. Masked Text Box

A very handy advanced control provided by Visual Basic 2005 is the MaskedTextBox control. A Masked Text Box only allows data to be entered if it matches a particular pattern. For example, you might provide a telephone mask, if the user enters 6175551212, the mask will render the input as [phone].

The mask can block invalid characters (such as the % sign) and can signal to the user what is expected (e.g., the parentheses indicate that an area code is required).

To see this at work, return to frmSuppliers and delete the txtPhone text box. Drag into its place a MaskedTextBox control, and name it mtbPhone. Click on its smart tag and click the Set Mask link, bringing up the Input Mask dialog that allows you to pick one of the existing masks for your control, as shown in Figure 3-11.

Figure 3-11. Input Mask dialog

While it is possible to create a custom mask, in this case, the Phone number mask is just what you want. The mask itself is shown at the bottom of the dialog, and you have a chance to "try" the mask before accepting it. Click OK to accept the mask.

3.3.1. Hooking the Masked Control to the Data

What you want, however, is a MaskedTextBox that is bound to your data. There are many ways to accomplish this, but the easiest is to drag one from the Suppliers table.

Delete the MaskedTextBox on your form and its associated label, and open the Data Source View (Data Show Data Sources). Expand the Suppliers table and click on the drop down next to phone. Click on Customize. This opens the Options Dialog, as shown in Figure 3-12.

Figure 3-12. Options dialog for customizing data controls

In the left window, pick Windows Forms Designer and under that Data UI Customization. The Associated Controls window will show the default list of controls associated with the Data type String. Check MaskedTextBox.

You may click Set Default if you want this control to be available in the list for other controls that manage strings. In either case, click OK. Return to the Phone field and drop down the list of controls and choose Masked Text Box. You can now drag the MaskedTextBox onto your form, align its label, and then click on its smart tag to choose the mask you want.

You will have to change your code slightly to enable and disable the MaskedTextBox and to set up its event handler. In the Load method handler for the form, add a variable to hold the MaskedTextBox immediately following the definition of the txtbox variable in the existing code, like this:

 Dim txtbox As TextBox = Nothing Dim masked As MaskedTextBox = Nothing 

In the For Each loop of the same method, add an if statement for MaskedTextBox, just as you have for TextBox, as shown in Example 3-13.

Example 3-13. Testing for a MaskedTextBox

 For Each ctrl In Me.Controls    If TypeOf ctrl Is MaskedTextBox Then       masked = CType(ctrl, MaskedTextBox)       masked.Enabled = False       AddHandler masked.TextChanged, AddressOf TextBoxChanged    ElseIf TypeOf ctrl Is TextBox Then       txtbox = CType(ctrl, TextBox)       txtbox.Enabled = False       AddHandler txtbox.ModifiedChanged, AddressOf TextBoxChanged    ElseIf TypeOf ctrl Is DataGridView Then       dgv = CType(ctrl, DataGridView)       dgv.Enabled = False       AddHandler dgv.CellValueChanged, AddressOf DataGridChanged    End If Next 

Notice that the event you will handle (TextChanged) is different from the event you handle for TextBox (ModifiedChanged), but you will share event handlers nonetheless.

Modify StopEditing to test for the MaskedTextBox type as well, as shown in Example 3-14.

Example 3-14. Testing for MaskedTextBox in the StopEditing event handler

 Private Sub StopEditing(  )     Dim ctrl As Control     For Each ctrl In Me.Controls         If TypeOf ctrl Is DataGridView _         Or TypeOf ctrl Is TextBox _         Or TypeOf ctrl Is MaskedTextBox Then             ctrl.Enabled = False         End If     Next     Me.Text = formName + " Read only" End Sub 

You're all set. When you run the program, the phone number is now in the mask. If you enter edit mode, you will not be able to enter illegitimate characters into the phone number and the mask will indicate the area code and the number of digits expected, as shown in Figure 3-13.

Figure 3-13. Input mask