The easiest way to explain the addition of smart tag functionality to a control or component is to walk through a simple example. I have deliberately kept the example as simple as possible in order to make it quick and easy to see what is required from the additional code you need to write.
Step 1 – Create a new UserControl class
Create a new project and add a new UserControl class to your project. In our example we will add the smart tag to a UserControl but in practice you could add it to any of your existing controls or components.
Drag a new instance of the control onto your Form and then select it. This will result in something even less exciting than this picture of the selected control on the Form.
I customized my control by changing the background color, asking for a border to be drawn and then painting a string in the client area. The full code for the example generated from these steps is available from a link at the end of the article, so there is no need to type in the code from each step.
Step 2 – Add the designer attribute
We need to provide a customized designer for the control in order to provide the information the design time environment needs for showing the smart tag. In order to associate a designer class with the control class we add the following attribute to the control class definition.
[Designer(typeof(UserControl1Designer))]
public class UserControl1 : UserControl
Step 3 – Implement the designer class
The default designer associated with a UserControl is called ControlDesigner and so our custom designer class derives from this. Extending the designer involves overriding just a single property of the base class called ActionLists. This is used to return to the caller a collection of lists that are used to populate the smart tag window.
The default implementation from the ControlDesigner returns an empty collection, hence the absence of the smart tag button when you select the control at design time. Our implementation creates an action list and adds it to the list collection. Here is the complete code for the class.
public class UserControl1Designer : ControlDesigner
{
public override
DesignerActionListCollection ActionLists
{
get
{
DesignerActionListCollection actionLists =
new DesignerActionListCollection();
actionLists.Add(
new UserControl1ActionList(this));
return actionLists;
}
}
}
Step 4 – Implement an action list
This is the class that performs the real work. All action lists must derive from the DesignerActionList base class. We provide a constructor that takes a reference to the designer instance and used it to cache a reference to the control instance.
public class UserControl1ActionList
: DesignerActionList
{
private UserControl1 _control;
public UserControl1ActionList(
UserControl1Designer owner)
: base(owner.Component)
{
_control = (UserControl1)owner.Component;
}
Our simple example is going to expose a BackColor entry on the smart tag window that alters the property with the same name on the UserControl1 instance. Whenever you provide a property action you need to implement the property on the action list class itself. Our implementation of the BackColor just calls onto the underlying UserControl1 instance that was cached in the constructor.
public Color BackColor
{
get { return _control.BackColor; }
set { _control.BackColor = value; }
}
Our last task is to override the GetSortedActionItems method. This is the method that returns a collection of items that are required to be displayed on the smart tag window. In our case we need to add just a single entry for the BackColor.
public override DesignerActionItemCollection
GetSortedActionItems()
{
DesignerActionItemCollection actions =
new DesignerActionItemCollection();
actions.Add(new DesignerActionPropertyItem(
"BackColor",
"BackColor",
"Appearance",
"Background color."));
return actions;
}
}
Step 5 – Compile and open in design mode
Once you have compiled the above code you should be able to select an instance of the UserControl1 control at design time and then access the defined smart tag. You can see it here in it’s full glory!
You can download the source code for this sample from here.
