On the File menu, point to New, and then click Project to open the New Project dialog box.

From the list of Visual C# projects, select the Windows Forms Control Library project template, type ctlClockLib in 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 ctlClock component using ctlClockLib.ctlClock.

In Solution Explorer, right-click UserControl1.cs, and then click Rename. Change the file name to ctlClock.cs. Click the Yes button when you are asked if you want to rename all references to the code element "UserControl1".

Note:
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.

In Solution Explorer, right-click ctlClock.cs, and then click View Designer.

In the Toolbox, expand the Common Controls node, and then double-click Label.

A Label control named label1 is added to your control on the designer surface.

In the designer, click label1. In the Properties window, set the following properties.

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).

In the Component Designer, click timer1, and then set the Interval property to 1000 and the Enabled property to true.

The Interval property controls the frequency with which the Timer component ticks. Each time timer1 ticks, it runs the code in the timer1_Tick event. The interval represents the number of milliseconds between ticks.

In the Component Designer, double-click timer1 to go to the timer1_Tick event for ctlClock.

Modify the code so that it resembles the following code sample. Be sure to change the access modifier from private to protected.

[C#]

protected void timer1_Tick(object sender, System.EventArgs e)
{
    // Causes the label to display the current time.
    lblDisplay.Text = DateTime.Now.ToLongTimeString(); 
}

This code will cause the current time to be shown in lblDisplay. Because the interval of timer1 was set to 1000, this event will occur every thousand milliseconds, thus updating the current time every second.

Modify the method to be overridable with the virtual keyword. For more information, see the "Inheriting from a User Control" section below.

protected virtual void timer1_Tick(object sender, System.EventArgs e)

On the File menu, click Save All to save the project.

In Solution Explorer, right-click ctlClock.cs, and then click View Code.

The Code Editor for your control opens.

Locate the public partial class ctlClock statement. Beneath the opening brace ({), type the following code.

[C#]

private Color colFColor;
private Color colBColor;

These statements create the private variables that you will use to store the values for the properties you are about to create.

Type the following code beneath the variable declarations from step 2.

[C#]

// Declares the name and type of the property.
public Color ClockBackColor
{
    // Retrieves the value of the private variable colBColor.
    get
    {
        return colBColor;
    }
    // Stores the selected value in the private variable colBColor, and 
    // updates the background color of the label control lblDisplay.
    set
    {
        colBColor = value;
        lblDisplay.BackColor = colBColor;   
    }
}
// Provides a similar set of instructions for the foreground color.
public Color ClockForeColor
{
    get
    {
        return colFColor;
    }
    set
    {
        colFColor = value;
        lblDisplay.ForeColor = colFColor;
    }
}

The preceding code makes two custom properties, ClockForeColor and ClockBackColor, available to subsequent users of this control. The get and set statements 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.

Press F5 to build the project and run your control in the UserControl Test Container.

In the test container's property grid, locate the ClockBackColor property, and then select the property 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 ClockForeColor property is functioning as expected.

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 ctlClock as a base.

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.cs, and then click Add.

The Inheritance Picker dialog box appears.

Under Component Name, double-click ctlClock.

In Solution Explorer, browse through the current projects.

Note:
A file called ctlAlarmClock.cs has been added to the current project.