Custom controls

What for?

During everyday work I create a dozen of custom control.  Formally, every “User Control” is a custom control. I create a specific layout from standard controls and use it in a program. I don’t think about them as about “real custom control”, because they are useful only for me in my very particular application. In the most common cases I don’t reuse them at all out of application scope. But from time to time I discover that some of them are good for common usage.

Sometimes I find good examples of controls from other systems or chargeable control kit. If one man make something, other one could make it also. =) By the way it’s a great challenge.

When I get know a smart tag closer, I’d decided that some of controls can be extended. It’s just like using extension methods to create DSL, helping classes and so on to write faster and easier. The same story with controls.

So there are several reasons why a custom control appears:

  • Occasionally – as a result of everyday work;
  • Extracted same parts from occasional controls;
  • Planned as a new control from the very beginning;
  • As an extension of exists control.

Two types of custom control

I think you have already noticed that there are two possibilities:

  • Create as a “User Control” descendant;
  • Create as a “Component” descendant.

I use a Component only when I want to add some new functionality to exist control without any changes in appearance. In all other cases I use a User Control. I’m glad to hear examples of other usages of the Component class if you have.

Most of described below stuff are applicable to both types.

Control’s Toolbar Icon

I think many of us wish to change standard gear icon on custom control on something more readable and recognizable. Main part of work you’ll spend in graphical designer counting used colors =)

But let’s start from the easiest way.

When you create control and as a base class standard control – icon will be inherited from the base.

public partial class VTLabel : Label { … }

After deploying control to some VS toolbox’ tab you’ll see the Label icon.

If you create control without deriving from a standard control, but want to use some standard icon instead making your own. For this case you can use attribute that points what control’s icon to use.

[ToolboxBitmap(typeof (Label))]
public partial class VTLabel : Component { … }

Finally you can create and assign to custom control your own unique icon. This icon should meet some requirements:

  • 16 x 16 pixels. Otherwise VS scale icon and result may be ugly;
  • Only 16 colors;
  • Bmp format.

When everything in graphic editor is prepared, add an image to project. Click on an added image and open the Properties window. Find property “Build action” and change a value to “Embedded resource”.

If you wouldn’t like to write any code, just rename icon to the exact control name. If you want to group icons in project’s folder or use different names you have to use attributes.

[ToolboxBitmap(typeof (VTLink), "LinkLabel.bmp")]
public partial class VTLink : UserControl { … }


[ToolboxBitmap(typeof (VTLink), "Resources.LinkLabel.bmp")]
public partial class VTLink : UserControl { … }

In design time you anyway will see gear icon. If you want to check out how it looks in “real”, you should add a component manually.

How to add a control manually

Right click on empty space in toolbox, and select “Add new tab”. Give any name. Right click on new tab and select “Choose Items…”. You’ll see a following window:

Press “Browse…” button and find your dll. If you have already registered dll in GAC you can use filter and add components from a current window. Don’t forget that Toolbox will show only applicable to the current context item and you’ll see added items when something related to GUI is open in edit area.

Applicable attributes


Specifies should property appear in the Property window or not.

public int Max { get {…} set{…} }


If you plan that property will use mainly for binding, you could apply this attribute. As a result you’ll see your property in Data category into “(DataBindings)” section.

[Bindable(true), Browsable(true)]
public string MainText { get {…} set{…} }


Use this attribute for control’s property to place it in the Property window within certain category.

[Category("Appearance"), Browsable(true)]
public Image Icon { get {…} set{…} }


Provide additional information about property. This information will be displayed on the bottom of the Property window.

[Description("The icon that appears on hover"), Browsable(true)]
public Image Icon { get {…} set{…} }

Read also…

How to create a smart tag

How to install a custom control to Visual Studio toolbox.


Tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>