ENHANCING EXISTING CONTROLS 393

Designer, the DesignMode property is True. When the developer executes the project that contains the control, the DesignMode property is False.

Consider a simple TextBox control at design time. Its Text property is TextBox1. If you set its MultiLine property to True, and the ScrollBar property to Vertical, a vertical scroll bar will be attached to the control automatically. Obviously, some statements are executed while the project is in design mode. Then you start the application, enter some text in the TextBox control, and end it. When the project is back in design mode, the control’s Text property is reset to TextBox1. The control has stored its settings before the project switched from design-time to runtime mode and restored them when the project returned to design mode again.

These dual runtime modes of a Windows control are something you’ll have to get used to. When you design custom controls, you must also switch between the roles of Windows control developer (the programmer who designs the control) and application developer (the programmer who uses the control).

In summary, a custom control is an application with a visible user interface as well as an invisible programming interface. The visible interface is what the developer sees when he places an instance of the control on the form, which is also what the user sees on the form when the project is placed in runtime mode. The developer can manipulate the control through the properties exposed by the control (at design time) and through its methods (at runtime). The properties and methods constitute the control’s invisible interface (or the developer interface, as opposed to the user interface). You, the control developer, will develop the visible user interface on a UserControl object, which is almost identical to the Form object. It’s like designing a standard application. As far as the control’s invisible interface goes, it’s like designing a class. Of course, the code of the control may also affect its appearance.

Enhancing Existing Controls

The simplest type of custom Windows control you can build is one that enhances the functionality of an existing control. The .NET Windows controls are quite functional, and you’ll be hard-pressed to come up with ideas to make them better. However, it’s very likely that you may have to add some functionality that’s specific to an application. The TextBox control, for example, is a text editor on its own, and you have seen how easy it is to build a text editor using the properties and methods exposed by this control. Many programmers add code to their projects to customize the appearance and the functionality of this control. Let’s say you’re building data-entry forms composed of many TextBox controls. To help the user identify the current control on the form, it would be nice to change its color while it has the focus. If the current control is colored differently than all others, users will quickly locate the control that has the focus.

Another feature you can add to the TextBox control is to format its contents as soon as it loses focus. Let’s consider a TextBox control that must accept dollar amounts. After the user enters a numeric value, the control could automatically format the numeric value as a dollar amount, and perhaps change the text’s color to red for negative amounts. You can also format the number as the user enters it, but I wouldn’t advise you to do that. Some programmers like to format numeric values as the users enter digits, but this usually confuses, rather than helps, users. Let the users enter data on a control, and then format the control after they move the focus to another control. As you will see, it’s not only possible, it’s actually quite easy to build a control that incorporates all the functionality of a TextBox and some additional features that you provide through the appropriate code. You

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

394 Chapter 9 BUILDING CUSTOM WINDOWS CONTROLS

already know how to add features like the ones described here to a TextBox from within the application’s code. But what if you want to enhance multiple TextBox controls on the same form, or reuse your code in multiple applications?

The best approach is to create a new Windows control with all the desired functionality and then reuse it in multiple projects. To use the proper terminology, you can create a new custom Windows control that inherits from the TextBox control. The derived (or subclassed) control includes all the functionality of the control being inherited, plus any new features you care to add to it. This is exactly what we’re going to do in the following section.

Building the FocusedTextBox Control

Let’s call our new custom control FocusedTextBox. Start a new VB project and, on the New Project dialog box, select the template Windows Control Library. Name the project FocusedTextBox. The Solution Explorer for this project contains a single item, the UserControl1 item (in addition to the standard project components such as References and AssemblyInfo). UserControl1 (Figure 9.1) is the control’s surface—in a way, it’s the control’s form. This is where you’ll design the visible interface of the new control.

Figure 9.1

A custom control in design mode

Start by renaming the UserControl1 object to FocusedTextBox. Renaming the object isn’t enough; you must also rename the class that implements the control. Open the object’s code window (click the View Code button at the top of the Solution Explorer while the UserControl1 object is selected) and change the line

Public Class UserControl1

to

Public Class FocusedTextBox

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

ENHANCING EXISTING CONTROLS 395

Then save the project by selecting the File Save All command. The UserControl object of a control that inherits from an existing control is empty. You need not place a TextBox control on it. Let’s inherit all the functionality of the TextBox control into our new control. Locate the following line in the control’s code window:

Inherits System.Windows.Forms.UserControl

and change it to

Inherits TextBox

This statement tells the compiler that we want our new control to inherit all the functionality of the TextBox. All custom controls inherit the System.Windows.Forms.UserControl object, and so does the TextBox control. In other words, you’re not going to discard any functionality by deleting the original Inherits statement. As soon as you specify that your custom control inherits the TextBox control, the UserControl object will disappear from the Designer. The Designer knows exactly what the new control must look like (it will look and behave exactly like a TextBox control), and you’re not allowed to change it. Let’s test our control and verify that it exposes all the TextBox functionality.

To test the control, you must add it to a form. A control can’t be executed in its own window. Add a new project to the solution (a Windows Application project) with the File Add Project New Project command. When the Add New Project dialog box appears, select the Windows Application template, specify the original project’s path in the Location box, and set the project’s name to TestProject. A new folder will be created under the FocusedTextBox folder—the TestProject folder—and the new project will be stored there. You could have added the test project to the custom control project’s folder, but it’s good to separate the custom control project’s files from the test project’s files.

To test the control you just “designed,” you need to place an instance of the custom control on the Form1 form of the test project. First, you must build the control and then add a reference to this control to the test project. Select the FocusedTextBox item in the Solution Explorer, and from the Build menu, select the Build FocusedTextBox command. This command will create a DLL file with the control’s executable code. This file will be created in the Bin folder under the project’s folder, and you will see later in this chapter how to reference the new custom control in other projects.

Then switch to the test project and select the Project Add Reference command. In the next dialog box, switch to the Projects tab, shown in Figure 9.2. Here you see the name of the other project in the solution (the custom control’s project). Select the name of the FocusedTextBox project on the main pane, click Select, and then click the OK button to close the dialog box.

Your new control is now referenced in the test project. Open the test project’s form in the Designer and expand the Toolbox. The last item on the Toolbox is the icon of your new control. It has already been integrated into the design environment, and you will see shortly how you can use it in any other Windows application. Place an instance of the FocusedTextBox control on the form and check it out. It looks, feels, and behaves just like a regular TextBox. In fact, it is a TextBox control by a different name. It exposes all the members of the regular TextBox control: you can move it around, resize it, change its Multiline and WordWrap properties, set its Text, and so on.

Note If the new control and the test project are part of the same project, you don’t have to add a reference to the con- trol—it will appear in the Toolbox anyway, and you’ll be able to use it with the test project as soon as you build it. You’ll have to add a reference to the control, however, to use it with any other project.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

396 Chapter 9 BUILDING CUSTOM WINDOWS CONTROLS

Figure 9.2

Referencing the custom control in the test project

As you can see, it’s quite trivial to create a new custom control by inheriting a .NET Windows control. Of course, what good is a control that’s identical to an existing one? Let’s add some extra functionality to our custom TextBox control. Switch to the control project and view the FocusedTextBox object’s code. In the code editor’s pane, expand the Objects list and select the item Base Class Events. This list contains the events of the TextBox control, since this is the base control for our custom control.

Then expand the Events drop-down list and select the Enter event. The following event handler declaration will appear:

Private Sub FocusedTextBox_Enter(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles MyBase.Enter

End Sub

This event takes place every time our custom control gets the focus. To change the color of the current control, insert the following statement in the event handler:

Me.BackColor = Color.Cyan

(or use any other color you like; just make sure it mixes well with the ForegroundColor property). We must also program the Leave event, so that the control’s background color is reset to white when it loses the focus. Enter the following statement in the Leave event’s handler:

Private Sub FocusedTextBox_Leave(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles MyBase.Leave

Me.BackColor = Color.White

End Sub

Having a hard time picking the color that signifies that the control has the focus? Why not expose this value as a property, so that you (or other developers using your control) can set it individually in each project? Let’s add two properties, the EnterFocusColor and the LeaveFocusColor (their role is rather obvious). Since our control is meant for data-entry operations, we can add one more neat feature. Some fields on a form are usually mandatory and some others are optional. Let’s

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

ENHANCING EXISTING CONTROLS 397

add some visual indication when a mandatory field is left blank. First, we need to specify whether a field is mandatory or not with the Mandatory property. If a field is mandatory, then its background color will switch to the color indicated by yet another property, the MandatoryColor property.

Here’s a quick overview of the control’s custom properties:

EnterFocusColor When the control receives the focus, its background color is set to this value. If you don’t want the currently active control to change color, set its EnterFocusColor to white.

LeaveFocusColor When the control loses the focus, its background color is set to this value. If the control has its Mandatory property set to True and it’s blank, the MandatoryColor takes precedence.

Mandatory This property indicates whether the control corresponds to a required field, if Mandatory is True (Required), or an optional field, if Mandatory is False (Optional).

MandatoryColor This is the background color of the control if its Mandatory property is required. The MandatoryColor overwrites the LeaveFocusColor setting. In other words, if the user skips a mandatory field, the corresponding control is painted with the MandatoryColor and not with the LeaveFocusColor. Notice that required fields behave like optional fields after they have been assigned a value.

If you have read the previous chapter, you should be able to implement these properties easily. Listing 9.1 is the code that implements the four custom properties. The values of the properties are stored in the private variables declared at the beginning of the listing. Then the control’s properties are implemented as Property procedures.

Listing 9.1: The Property Procedures of the FocusedTextBox

Dim _mandatory As Boolean

Dim _enterFocusColor, _leaveFocusColor As Color

Dim _mandatoryColor As Color

Property Mandatory() As Boolean

Get

Mandatory = _mandatory

End Get

Set(ByVal Value As Boolean)

_mandatory = Value

End Set

End Property

Property EnterFocusColor() As Color

Get

EnterFocusColor = _enterFocusColor

End Get

Set(ByVal Value As Color)

_enterFocusColor = EnterFocusColor

End Set

End Property

Property LeaveFocusColor() As Color

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

398 Chapter 9 BUILDING CUSTOM WINDOWS CONTROLS

Get

LeaveFocusColor = _leaveFocusColor

End Get

Set(ByVal Value As Color)

_leaveFocusColor = LeaveFocusColor

End Set

End Property

Property MandatoryColor() As Color

Get

MandatoryColor = _mandatoryColor

End Get

Set(ByVal Value As Color)

_mandatoryColor = MandatoryColor

End Set

End Property

The last step is to use these properties in the control’s Enter and Leave events. When the control receives the focus, it changes its background color to EnterFocusColor to indicate that it’s the current control on the form. When it loses the focus, its background is restored back to the LeaveFocusColor, unless it’s a required field and the user has left it blank. In this case, its background color is set to MandatoryColor. Listing 9.2 shows the code in the two focus-related events of the UserControl object.

Listing 9.2: The Enter and Leave Events

Private Sub FocusedTextBox_Enter(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles MyBase.Enter

Me.BackColor = EnterFocusColor

End Sub

Private Sub FocusedTextBox_Leave(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles MyBase.Leave

If Trim(Me.Text).Length = 0 And _mandatory Then

Me.BackColor = _mandatoryColor

Else

Me.BackColor = _leaveFocusColor

End If

End Sub

Build the control again with the Build Build FocusedTextBox command, and switch to the test form. Place several instances of the custom control on the form, align them, and then select each one and set its properties in the Properties window. All four custom properties are clustered in the Misc section of the window (Figure 9.3); you’ll see shortly how you can change this default behavior. Set the custom properties of a few controls on the form and then press F5 to run the application. See how the FocusedTextBox controls behave as you move the focus from one to the other and how they handle the mandatory fields.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

ENHANCING EXISTING CONTROLS 399

Figure 9.3

The custom properties of the FocusedTextBox control in the Properties window

Notice also that the color properties are set through the usual Color tab, just as you would set the color properties of the existing controls. The Mandatory property can change value with a double-click. Or you can expand the list of possible settings (True/False) and select one of them with the mouse.

Pretty impressive, isn’t it? I’m also sure that many readers will incorporate this custom control in their projects—perhaps you may already be considering new features. Even if you have no use for an enhanced TextBox control, you’ll agree that building it was quite simple. Next time you need to enhance one of the .NET Windows controls, you know how to do it. Just build a new control that inherits from an existing control, add some custom members, and use it. Of course, you can’t change the base control’s interface. This means that you can’t draw the control’s surface—it will be drawn by the code of the TextBox control. But then again, all rules have exceptions. Some of the controls allow you to hook your own code into them and control the process of drawing the base control’s area. You’ll see how to customize the appearance of menu items and the ListBox control toward the end of this chapter.

Classifying the Control’s Properties

Let’s get back to our FocusedTextBox control—there are some loose ends to take care of. First, we must specify the category in the Properties window under which each custom property appears. By default, all the properties you add to a custom control are displayed in the Misc section of the Properties window. To specify that a control be displayed in a different section, use the Category attribute of the Property procedure. As you will see, properties have other attributes too, which you can set in your code as you design the control.

Properties can have attributes, which appear in front of the property name and are enclosed in a pair of angle brackets. The following attribute declaration in front of the property’s name determines the category of the Properties window in which the specific property will appear:

<Category(“Appearance”)>

If none of the existing categories suits a specific property, you can create a new category in the Properties window by specifying its name in the Category attribute. If you have a few properties that should appear in a section called “Conditional,” insert the following attribute in front of the declarations of the corresponding properties:

<Category(“Conditional”)>

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

400 Chapter 9 BUILDING CUSTOM WINDOWS CONTROLS

When this control is selected, the “Conditional” section will appear in the Properties window and all the properties with this attribute under it.

All attributes are members of the System.ComponentModel class, and you must import this class. The following statement must be the first statement in the control’s code window:

Imports System.ComponentModel

Another attribute is the Description attribute, which determines the property’s description that appears at the bottom of the Properties window for the selected property. To specify multiple attributes, separate them with commas, as shown here:

<Description(“Indicates whether the control can be left blank”), _ Category(“Appearance”)> _

Property Mandatory() As Boolean { the property procedure’s code }

The most important attribute is the DefaultValue attribute, which determines the property’s default (initial) value. The EnterFocusColor and LeaveFocusColor properties must have default values, so that when you place them on the form you won’t have to change these two settings for all the controls. The DefaultValue attribute must be followed by the default value in parentheses:

<Description(“Indicates whether the control can be left blank”), _ Category(“Appearance”), DefaultValue(False)> _

Property Mandatory() As Boolean { the property procedure’s code }

Some attributes apply to the Class that implements the custom controls. The DefaultProperty and DefaultEvent attributes determine the control’s default property and event. To specify that Mandatory is the default attribute of the FocusedTextBox control, replace its declaration with the following:

<DefaultProperty(“Mandatory”)> Public Class FocusedTextBox

Events are discussed later in the chapter, but you already know how to raise an event from within a class. Raising an event from within a control’s code is quite similar—although the control may raise events in response to external actions.

Open the FocusedTextBox project on the companion CD and examine its code. You can experiment with various formatting options for fields that are numeric. The following statement in the control’s Leave event will format the control’s contents as a dollar amount:

If IsNumeric(Me.Text) Then

Me.Text = FormatCurrency(Me.Text, 2, False, True, True)

If Val(Me.Text) < 0 Then

Me.Text = “(“ & Me.Text & “)”

End If

End If

Let’s move on to something more interesting. This time we’ll build a control that combines the functionality of several controls, which is a much more common scenario than basing a new custom control to an existing control. You will literally design its visible interface by dropping controls on it, just like designing the visible interface of a Windows form.

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com