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
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
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.
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.
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
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.
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
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
If it helps, you will find that user controls
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.
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,
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