User Controls and Dependency Properties - Page 1
       by kirupa  |  19 November 2007

When you think of controls, your mind probably draws up images of buttons, checkboxes, listboxes, and other standard UI elements. These elements enjoy an extraordinary level of support in WPF. You can modify how these elements look using styles, templates, and skins, you can use data binding to bind them to some data, you can make them move via animations, and more! These built-in controls make up much of the visual elements most people will use in their applications.

There will be numerous scenarios, though, where the built-in controls are simply not enough. Or, as it may be, the built-in controls are a bit too much with extra unnecessary functionality or visual complexity. In such cases, what you can do is create your own control. There are two similar but different types of controls you can create yourself - user controls and custom controls. This article deals with the former, and I will give you a brief introduction to user controls and how to use them in your applications.

Abbreviated Article on Blog

For a more informal coverage of this topic, you may want to see my series of blog posts addressing the basics of user controls.

Beyond just discussing user controls, this article will also introduce you to dependency properties. Dependency properties are, in the context of this article, what make your user controls more useful and better simulate a standard WPF control. There are more details of course, but you will see them along the way. Both user controls and dependency properties are important to know individually, but in most real-world scenarios, you will rarely use one without running into the other. Let's get started.

Sample User Control - InfoRectangle
One of the things you will create before reaching the end of the 11th page is your own user control. To give you a preview, the following image shows you a user control I created using Blend and Visual C# Express called InfoRectangle:

The InfoRectangle user control is pretty simple. It is a rectangle with curved edges, and inside that rectangle, there is a label where text is displayed. Just like any other control, I am able to use Blend to add and modify it from within my application as shown below:

Now that you have a brief, though fuzzy, idea of what you will be creating, let's dig deeper and learn more about what user controls are.

What are User Controls?
You can think of user controls as self-contained mini-applications (kind of like a widget) composed of a XAML and code-behind file. For example, our InfoRectangle user control is made up of both the InfoRectangle.xaml file where the interface is defined and the InfoRectangle.xaml.cs code-behind file where some procedural code defines the class that makes up our user control:

What sets user controls apart, though, is that you can reuse copies or instances of your user control throughout your document. Despite there being multiple instances of the user control, as shown in the earlier image, any modifications you make in either your user control's XAML or code-behind file will automatically be reflected in your user control instances.

If it helps, you will find that user controls resemble classes. Each instance of the user control you use is the equivalent of objects, and usually the user control's name signifies the type of the object.

User Controls == Flash's MovieClip?

If you are coming from a Flash background, the idea of user controls is identical to that of movie clips. While in AS2 some of the behind the scenes details were hidden from you, with AS3, user controls and movie clips seem almost identical.
 
They are both used to create custom reusable functionality, and they both have a separation of the visual content from the code content. In WPF, the visuals are stored in a XAML file, and for your code, you have either a VB or C# code-behind file. In Flash CS3, you also have a code-behind AS file, and the front-end visuals are stored within the SWF itself. Flex is similar to Flash CS3 except the front-end visuals are often defined in MXML files that you can see and edit.

Anyway, I think we spent enough time looking at what user controls are. In the next few pages, let's create our own user control and figure out how to use it in our applications before extending our user control with dependency properties.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10