For a long time I was wandering how easy and comfortable to work with smart tags. Actually I didn’t knew how it was called officially, but anyway I thought (and still think) that this feature is awesome! Some time ago I’ve started to develop my own components and also spend more time tuning user’s interface. I found that it’s very time consuming and boring to setup necessary properties from the Property view. Its okay to setup few controls in little program, but when you have over 30 complicated views with custom components – you quickly became in a sad mood. So I decide found out how to create for my controls those pretty little triangles on the top right corner at the most standard components.
I found articles, books; I performed several tests and finally made what I want. And you know, it’s really helps me with development! Time saving in action! )
Now I’d like to share how to make it from the very beginning.
For all described actions below I used VS2008, ReSharper5
What is smart tag?
Smart tags are menu-like user interface (UI) elements that supply commonly used design-time options. Most of the standard components and controls provided with the .NET Framework contain smart tag and designer verb enhancements.
You can find three main parts in a smart tag:
- Verbs – looks like link and perform some immediate action with control;
- Fields – there are may be many different editor types as on figure. String editor, image, binding, date.
- Text – just a simple text for information or for something not editable.
Performing changes in smart tag, you change underlying control at the same time.
Examples of usage and thoughts how to make it useful
When you created your own custom control, probably you’d like to deal with it in more comfortable way, than looking for necessary property in the Properties view. For example, I created custom header for my application and I want it to dock to top of a parent control. I used to switch to the Property view, find Dock property and set Top. Even when used hot keys. With implementing smart tag I can do it much faster, mouse pointer already within a new control and it’s easy to achieve smart tag’s triangle.
You can find smart tags for ComboBox, PictureBox, Panel and many more. But, unfortunately, for Button, Label and some other common item there are no smart tags. From my point of view it will be helpful to create smart tag that allows me to setup at least name and caption. What do you think?
Also, in my style of creating UI, there is wide usage of binding, and I want to bind, as an example, Action<T> to the Tag property or create new property for binding.
Create custom control
There are two ways how you can create custom control. The first one is to inherit new class from the Component class; another way is to setup heritage from the UserControl class. The easiest way is to create it using VS project’s context menu “Add”.
When I want to create new control as a composition of exists controls I prefer to make it by adding new UserControl. It is the most common way during development. But when you want to customize a little bit some standard controls – I’d advise you to use Component class. Ok, I’m going to uncover both variants. Let’s start from the first one.
Create new C# library solution and name it something like “SmartTagTutorial”. After this operation you will have solution and one project within. For the test reason it will be nice to create WinForms project also. After this manipulation you should have solution similar to the one on figure.
It is looks very familiar, isn’t it? ;)
The next step is to add a new user control. Invoke SmartTagTutorial’s context menu, “Add > User Control…”. Chose any name, you can leave it as it is. There may be the hardest part – decide to do with this custom control, what we’d like to get finally. Let’s make kind of custom header.
Now we have the new class that provides main functionality of UserControl class. Now you get a fun to create layout of your custom header. I got the one like on figure 3.
Here you can see main text, additional text, and a template for image. I think it will be enough. So let’s start from some easy step to more complex.
Full text and source code (without ads, pop-up and other stuff like this)