Creating Custom Controls-Providing Design Time Support 2

• Download source files - 24.3 Kb

Introduction

In the first article, we explained how we can use TypeConverters and UITypeEditors for providing design time support for custom controls and components. This article explains how we can use Designers for providing design time support.

We know that, a few Windows Forms controls display one or more hyperlinks at the bottom edge of the properties window and additional commands in the context menu. (Example: DataGrid - Format Link, TabControl - Add Tab, Remove Tab). Let’s see how we can create hyperlinks for our custom controls.

.NET Support

The .NET Framework provides interfaces, classes and attributes for providing design time support. IDesigner interface allows us to create designer classes that provide logic that can adjust the appearance or behavior of a type at design time. IDesigner interface has a read-only Verbs property which allows us to create custom menu commands and hyperlinks. This property returns DesignerVerbCollection containing the DesignerVerb objects for generating menu commands.

The ControlDesigner class (implements IDesigner interface) allows us to create custom designers which can be sited on the form. (Otherwise they will appear in the component tray only).

Implementing Custom Designer

The current example creates a custom designer for configuring the appearance of the PhoneNumber custom control. The PhoneNumber control is a custom user control which is used for collecting phone number information.

The first step in creating a custom designer is to create a class that inherits from System.Windows.Forms.Design.ControlDesigner class. (PhoneNumberControlDesigner)

To provide commands in the property window or in the context menu, we need to override the Verbs read-only property.

PhoneNumberControlDesigner class overrides this property to create a new DesignerVerb and adds it to the DesignerVerbCollection.

public override DesignerVerbCollection Verbs
{   
  get{               
       if(actions == null){                     
    actions = new DesignerVerbCollection();                      
    actions.Add(new DesignerVerb("Look and Feel", 
          new EventHandler(ChangeDisplay)));             
    return actions;               
    }          
     }
}

A DesignerVerb is a menu command linked to an event handler. We used two parameter constructors for creating a new DesignerVerb object. The first parameter is the text that is displayed on the property window or on the context menu. The second parameter is the event handler (name) that performs some action for this verb.

Now we need to implement some action for the verb (menu command) in our event handler. The changedisplay event handler creates a new Formater object (using which we can configure the PhoneNumber control) and shows it as model dialogue.

It also updates/changes the control’s design time appearance by setting the control’s background color and font properties as per user’s selection.

Formater formt = new Formater();
formt.ShowDialog();

Now we have finished creating our designer class. In the next step, we need to associate this class with our custom user control. Doing this is very easy. We just have to use the Designer attribute.

[Designer(typeof(PhoneNumberControlDesigner))]
public class 
PhoneNumControl : System.Windows.Forms.UserControl{
}

That’s all what we have to do. Now it’s the time for compiling and using our code. When we add the PhoneNumber control to any form, a new command “Look and Feel” will be displayed in the context menu. Also a hyperlink is added at the bottom of the Property Editor. Clicking on this hyperlink will display the Formater window using which we can change the format of the control. Formater window contains all the available formatting options and the preview for those options. User can choose among the available formatting options. The format (color, font) of the custom control will be modified accordingly.

Conclusion

These two articles cover how we can provide design support for our controls using TypeConverters, UITypeEditors and Designers.