Walkthrough: Authoring a Composite Control with Visual Basic
Composite controls provide a means by which custom graphical interfaces can be created and reused. A composite control is essentially a component with a visual representation. As such, it might consist of one or more Windows Forms controls, components, or blocks of code that can extend functionality by validating user input, modifying display properties, or performing other tasks required by the author. Composite controls can be placed on Windows Forms in the same manner as other controls. In the first part of this walkthrough, you create a simple composite control called
ctlClock. In the second part of the walkthrough, you extend the functionality of
ctlClock through inheritance.
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Customizing Development Settings in Visual Studio.
When you create a new project, you specify its name to set the root namespace, assembly name, and project name, and ensure that the default component will be in the correct namespace.
On the File menu, point to New, and then click Project to open the New Project dialog box.
From the list of Visual Basic projects, select the Windows Control Library project template, type
ctlClockLibin the Name box, and then click OK.
The project name,
ctlClockLib, is also assigned to the root namespace by default. The root namespace is used to qualify the names of components in the assembly. For example, if two assemblies provide components named
ctlClock, you can specify your
In Solution Explorer, right-click UserControl1.vb, and then click Rename. Change the file name to
ctlClock.vb. Click the Yes button when you are asked if you want to rename all references to the code element "UserControl1".
By default, a composite control inherits from the UserControl class provided by the system. The UserControl class provides functionality required by all composite controls, and implements standard methods and properties.
On the File menu, click Save All to save the project.
A visual interface is an essential part of your composite control. This visual interface is implemented by the addition of one or more Windows controls to the designer surface. In the following demonstration, you will incorporate Windows controls into your composite control and write code to implement functionality.
In Solution Explorer, right-click ctlClock.vb, and then click View Designer.
In the Toolbox, expand the Common Controls node, and then double-click Label.
A Label control named
Label1is added to your control on the designer surface.
In the designer, click Label1. In the Properties window, set the following properties.
Property Change to Name
In the Toolbox, expand the Components node, and then double-click Timer.
Because a Timer is a component, it has no visual representation at run time. Therefore, it does not appear with the controls on the designer surface, but rather in the Component Designer (a tray at the bottom of the designer surface).
The Interval property controls the frequency with which the timer component ticks. Each time
Timer1ticks, it runs the code in the
Timer1_Tickevent. The interval represents the number of milliseconds between ticks.
In the Component Designer, double-click Timer1 to go to the
Modify the code so that it resembles the following code sample. Be sure to change the access modifier from
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles Timer1.Tick ' Causes the label to display the current time. lblDisplay.Text = Format(Now, "hh:mm:ss") End Sub
This code will cause the current time to be shown in
lblDisplay. Because the interval of
Timer1was set to
1000, this event will occur every thousand milliseconds, thus updating the current time every second.
Modify the method to be overridable. For more information, see the "Inheriting from a User Control" section below.
Protected Overridable Sub Timer1_Tick(ByVal sender As Object, ByVal _ e As System.EventArgs) Handles Timer1.Tick
On the File menu, click Save All to save the project.
Your clock control now encapsulates a Label control and a Timer component, each with its own set of inherent properties. While the individual properties of these controls will not be accessible to subsequent users of your control, you can create and expose custom properties by writing the appropriate blocks of code. In the following procedure, you will add properties to your control that enable the user to change the color of the background and text.
In Solution Explorer, right-click ctlClock.vb, and then click View Code.
The Code Editor for your control opens.
Public Class ctlClockstatement. Beneath it, type the following code.
Private colFColor as Color Private colBColor as Color
These statements create the private variables that you will use to store the values for the properties you are about to create.
Insert the following code beneath the variable declarations from step 2.
' Declares the name and type of the property. Property ClockBackColor() as Color ' Retrieves the value of the private variable colBColor. Get Return colBColor End Get ' Stores the selected value in the private variable colBColor, and ' updates the background color of the label control lblDisplay. Set(ByVal value as Color) colBColor = value lblDisplay.BackColor = colBColor End Set End Property ' Provides a similar set of instructions for the foreground color. Property ClockForeColor() as Color Get Return colFColor End Get Set(ByVal value as Color) colFColor = value lblDisplay.ForeColor = colFColor End Set End Property
The preceding code makes two custom properties,
ClockBackColor, available to subsequent users of this control by invoking the
Setstatements provide for storage and retrieval of the property value, as well as code to implement functionality appropriate to the property.
On the File menu, click Save All to save the project.
Controls are not stand-alone projects; they must be hosted in a container. Test your control's run-time behavior and exercise its properties with the UserControl Test Container. For more information, see How to: Test the Run-Time Behavior of a UserControl.
Press F5 to build the project and run your control in the UserControl Test Container.
In the test container's property grid, select the
ClockBackColorproperty, and then click the drop-down arrow to display the color palette.
Choose a color by clicking it.
The background color of your control changes to the color you selected.
Use a similar sequence of events to verify that the
ClockForeColorproperty is functioning as expected.
Click Close to close the UserControl Test Container.
In this section and the preceding sections, you have seen how components and Windows controls can be combined with code and packaging to provide custom functionality in the form of a composite control. You have learned to expose properties in your composite control, and how to test your control after it is complete. In the next section you will learn how to construct an inherited composite control using
ctlClockas a base.
In the previous sections, you learned how to combine Windows controls, components, and code into reusable composite controls. Your composite control can now be used as a base upon which other controls can be built. The process of deriving a class from a base class is called inheritance. In this section, you will create a composite control called
ctlAlarmClock. This control will be derived from its parent control,
ctlClock. You will learn to extend the functionality of
ctlClock by overriding parent methods and adding new methods and properties.
The first step in creating an inherited control is to derive it from its parent. This action creates a new control that has all of the properties, methods, and graphical characteristics of the parent control, but can also act as a base for the addition of new or modified functionality.
In Solution Explorer, right-click ctlClockLib, point to Add, and then click User Control.
The Add New Item dialog box opens.
Select the Inherited User Control template.
In the Name box, type
ctlAlarmClock.vb, and then click Add.
The Inheritance Picker dialog box appears.
Under Component Name, double-click ctlClock.
In Solution Explorer, browse through the current projects.
A file called ctlAlarmClock.vb has been added to the current project.
Properties are added to an inherited control in the same way they are added to a composite control. You will now use the property declaration syntax to add two properties to your control:
AlarmTime, which will store the value of the date and time the alarm is to go off, and
AlarmSet, which will indicate whether the alarm is set.
In Solution Explorer, right-click ctlAlarmClock, and then click View Code.
Locate the class declaration for the ctlAlarmClock control, which appears as
Public Class ctlAlarmClock. In the class declaration, insert the following code.
Private dteAlarmTime As Date Private blnAlarmSet As Boolean ' These properties will be declared as Public to allow future ' developers to access them. Public Property AlarmTime() As Date Get Return dteAlarmTime End Get Set(ByVal value as Date) dteAlarmTime = value End Set End Property Public Property AlarmSet() As Boolean Get Return blnAlarmSet End Get Set(ByVal value as Boolean) blnAlarmSet = value End Set End Property
Your inherited control has a visual interface that is identical to the control it inherits from. It possesses the same constituent controls as its parent control, but the properties of the constituent controls will not be available unless they were specifically exposed. You may add to the graphical interface of an inherited composite control in the same manner as you would add to any composite control. To continue adding to your alarm clock's visual interface, you will add a label control that will flash when the alarm is sounding.
In Solution Explorer, right-click ctlAlarmClock, and click View Designer.
The designer for
ctlAlarmClockopens in the main window.
lblDisplay(the display portion of the control), and view the Properties window.
While all the properties are displayed, they are dimmed. This indicates that these properties are native to
lblDisplayand cannot be modified or accessed in the Properties window. By default, controls contained in a composite control are
Private, and their properties are not accessible by any means.
If you want subsequent users of your composite control to have access to its internal controls, declare them as
Protected. This will allow you to set and modify properties of controls contained within your composite control by using the appropriate code.
Add a Label control to your composite control.
Using the mouse, drag the Label control immediately beneath the display box. In the Properties window, set the following properties.
Property Setting Name
Text Alarm! TextAlign
In the previous procedures, you added properties and a control that will enable alarm functionality in your composite control. In this procedure, you will add code to compare the current time to the alarm time and, if they are the same, to sound and flash an alarm. By overriding the
Timer1_Tick method of
ctlClock and adding additional code to it, you will extend the capability of
ctlAlarmClock while retaining all of the inherent functionality of
In Solution Explorer, right-click ctlAlarmClock.vb, and then click View Code.
Private blnAlarmSet As Booleanstatement. Immediately beneath it, add the following statement.
Dim blnColorTicker as Boolean
End Classstatement at the bottom of the page. Just before the
End Classstatement, add the following code.
Protected Overrides Sub Timer1_Tick(ByVal sender As Object, ByVal e _ As System.EventArgs) ' Calls the Timer1_Tick method of ctlClock. MyBase.Timer1_Tick(sender, e) ' Checks to see if the Alarm is set. If AlarmSet = False Then Exit Sub End If ' If the date, hour, and minute of the alarm time are the same as ' now, flash and beep an alarm. If AlarmTime.Date = Now.Date And AlarmTime.Hour = Now.Hour And _ AlarmTime.Minute = Now.Minute Then ' Sounds an audible beep. Beep() ' Sets lblAlarmVisible to True, and changes the background color based on the ' value of blnColorTicker. The background color of the label will ' flash once per tick of the clock. lblAlarm.Visible = True If blnColorTicker = False Then lblAlarm.BackColor = Color.PeachPuff blnColorTicker = True Else lblAlarm.BackColor = Color.Plum blnColorTicker = False End If Else ' Once the alarm has sounded for a minute, the label is made ' invisible again. lblAlarm.Visible = False End If End Sub
The addition of this code accomplishes several tasks. The
Overridesstatement directs the control to use this method in place of the method that was inherited from the base control. When this method is called, it calls the method it overrides by invoking the
MyBase.Timer1_Tickstatement, ensuring that all of the functionality incorporated in the original control is reproduced in this control. It then runs additional code to incorporate the alarm functionality. A flashing label control will appear when the alarm occurs, and an audible beep will be heard.
Because you are overriding an inherited event handler, you do not have to specify the event with the
Handleskeyword. The event is already hooked up. All you are overriding is the implementation of the handler.
Your alarm clock control is almost complete. The only thing that remains is to implement a way to turn it off. To do this, you will add code to the
In Solution Explorer, right-click ctlAlarmClock.vb, and then click View Designer.
In the designer, double-click lblAlarm. The Code Editor opens to the
Private Sub lblAlarm_Clickline.
Modify this method so that it resembles the following code.
Private Sub lblAlarm_Click(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles lblAlarm.Click ' Turns off the alarm. AlarmSet = False ' Hides the flashing label. lblAlarm.Visible = False End Sub
On the File menu, click Save All to save the project.
You can test your inherited control the same way you tested the base class control,
ctlClock: Press F5 to build the project and run your control in the UserControl Test Container. For more information, see How to: Test the Run-Time Behavior of a UserControl.
To put your control to use, you will need to host it on a form. As with a standard composite control, an inherited composite control cannot stand alone and must be hosted in a form or other container. Since
ctlAlarmClock has a greater depth of functionality, additional code is required to test it. In this procedure, you will write a simple program to test the functionality of
ctlAlarmClock. You will write code to set and display the
AlarmTime property of
ctlAlarmClock, and will test its inherent functions.
In Solution Explorer, right-click ctlClockLib, and then click Build.
On the File menu, point to Add, and then click New Project.
Add a new Windows Application project to the solution, and name it
The Test project is added to Solution Explorer.
In Solution Explorer, right-click the
Testproject node, and then click Add Reference to display the Add Reference dialog box.
Click the tab labeled Projects. The project ctlClockLib will be listed under Project Name. Double-click ctlClockLib to add the reference to the test project.
In Solution Explorer, right-click Test, and then click Build.
In the Toolbox, expand the ctlClockLib Components node.
Double-click ctlAlarmClock to add an instance of
ctlAlarmClockto your form.
Use the mouse to position the controls in a convenient place on the form.
Set the properties of these controls in the following manner.
Control Property Value
In the designer, double-click dtpTest.
The Code Editor opens to
Private Sub dtpTest_ValueChanged.
Modify the code so that it resembles the following.
Private Sub dtpTest_ValueChanged(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles dtpTest.ValueChanged ctlAlarmClock1.AlarmTime = dtpTest.Value ctlAlarmClock1.AlarmSet = True lblTest.Text = "Alarm Time is " & Format(ctlAlarmClock1.AlarmTime, _ "hh:mm") End Sub
In Solution Explorer, right-click Test, and then click Set as StartUp Project.
On the Debug menu, click Start Debugging.
The test program starts. Note that the current time is updated in the
ctlAlarmClockcontrol, and that the starting time is shown in the DateTimePicker control.
Click the DateTimePicker where the minutes of the hour are displayed.
Using the keyboard, set a value for minutes that is one minute greater than the current time shown by
The time for the alarm setting is shown in
lblTest. Wait for the displayed time to reach the alarm setting time. When the displayed time reaches the time to which the alarm is set, the beep will sound and
Turn off the alarm by clicking
lblAlarm. You may now reset the alarm.
This walkthrough has covered a number of key concepts. You have learned to create a composite control by combining controls and components into a composite control container. You have learned to add properties to your control, and to write code to implement custom functionality. In the last section, you learned to extend the functionality of a given composite control through inheritance, and to alter the functionality of host methods by overriding those methods.