RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Adding Smart Tags to Windows Forms Controls

Microsoft uses smart tags extensively in Office, Visual Studio, and other products; this article shows you how to use smart tags to add value to your controls too.

smart tag is a panel that displays next to a control and contains a list of commonly used properties. For example, in the Visual Studio (VS) editor, the Windows Forms DataGridView control uses a smart tag with the title "DataGridView Tasks" that displays a list of commonly used properties (see Figure 1). In .NET 2.0, developers can add smart tag features to their custom and user controls. This article walks you through a real world project that shows how to add your own smart tags to controls.

Figure 1: Smart Tag in Visual Studio: Here's a look at the DataGridView control's smart tag.
In this article, you'll see how to create a custom date control. I initially built this control because a client specifically wanted an easy way to enter dates—without using the mouse to select a date. In addition, the client wanted the ability to customize the date display format—either numerically or alphabetically—to represent the month. On the surface this task looks easy to solve; simply add a couple of TextBox controls to the form and configure them to display day, month, and year accordingly. However, the client had numerous forms requiring date entry; therefore, a better solution was to create a user control that aggregates all the TextBox controls into one single control. The first part of this article discusses creating the user control, while the second part shows you how to add smart tag support to it.

Developing the User Control
Using VS 2005, create a new Windows Application project named SmartTag. This application will host the user control that you'll see how to build in this article.

Figure 2: Design Mode: The figure shows the design surface of the user control with controls added to it.
Now, add a new Windows Control Library project to the existing solution. In Solution Explorer, right-click the SmartTag solution and select Add ( New Project…. Select the Windows Control Library template and name the project CustomDateControl. Click OK. The left portion of Figure 2 shows the default design surface of the user control (the default name is UserControl1.vb). Populate the design surface with three ComboBox controls as shown on the right side of Figure 2.

Set the properties of the three ComboBox controls with the values shown in Table 1.

Table 1. Use these values to set the properties of the three ComboBox controls.
Control Property Value
UserControl1 Size 230,32
cbbField1 AutoCompleteMode SuggestAppend
cbbField1 AutoCompleteSource ListItems
cbbField1 DropDownStyle DropDownList
cbbField2 AutoCompleteMode SuggestAppend
cbbField2 AutoCompleteSource ListItems
cbbField2 DropDownStyle DropDownList
cbbYear AutoCompleteMode SuggestAppend
cbbYear AutoCompleteSource ListItems
cbbYear DropDownStyle DropDownList

The first two ComboBox controls will display either the day or month (depending on the user's configuration) while the third ComboBox control will display the year. Users can click the ComboBox control to select a date or simply type the date using the keyboard.

Editor's Note: This article was first published in the July/August 2007 issue of CoDe Magazine, and is reprinted here by permission.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date