Click here to Skip to main content
15,870,324 members
Articles / Programming Languages / C#
Article

Creating Custom Controls-Providing Design Time Support 2

Rate me:
Please Sign up or sign in to vote.
3.80/5 (14 votes)
2 Mar 20053 min read 74.5K   1.2K   65   8
This article explains how we can use Designers for providing Design time support.

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.

C#
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.

Sample screenshot

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.

C#
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.

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

Sample screenshot

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
India India
Working on .NET for last 6 years. Currently working for TCS.

Comments and Discussions

 
Questionanything similar for ASP.NET too? Pin
j4v117-Aug-10 23:26
j4v117-Aug-10 23:26 
AnswerPersisting changes to runtime Pin
Stefan Van Reeth15-Jan-09 11:02
Stefan Van Reeth15-Jan-09 11:02 
GeneralThanks a Lot Pin
niko7829-Sep-08 19:22
niko7829-Sep-08 19:22 
GeneralLost changes at runtime Pin
SamuTupe17-Jan-07 4:52
SamuTupe17-Jan-07 4:52 
GeneralRe: Lost changes at runtime Pin
SamuTupe18-Jan-07 11:51
SamuTupe18-Jan-07 11:51 
Generaladding stuff to designed control [modified] Pin
Seishin#18-Nov-06 13:00
Seishin#18-Nov-06 13:00 
QuestionHow to debug Pin
hemaral2-Oct-06 9:41
hemaral2-Oct-06 9:41 
AnswerRe: How to debug Pin
iron1062-Aug-07 5:24
iron1062-Aug-07 5:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.