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

In the previous page, you received a brief introduction to user controls and what they are. Parts of what you just read may still seem unclear, but let's tunnel through and try to create and use a user control. Hopefully, by the time you create and see the user control in action, many of confusing pieces will hopefully fall into place.

Setting Up - Right Tools
Currently, Microsoft has a free, fully-functional 60-day preview of Blend 2 available. One of its improved features is the ability to allow you to easily create user controls! You can have Blend 2 installed side-by-side Blend 1, and at around 25 MBs, it is a quick and painless download/install. Please download and install the product before proceeding further. For any code you will write, you can just use Visual C# Express!

Visual Studio 2008 / Express

Visual Studio 2008 was released at the time of this tutorial going live, and any information found in this tutorial will work fine in Visual Studio 2008 or the 2008 version of Visual C# Express.

Getting Started
With Blend 2 installed, launch it. The following steps will outline how to create a user control:

1. Once Blend has been launched, create a New Project and select WPF Application as the Project Type:

[ Create a new project called UserControlSample ]

Note - Visual Studio/Express 2005 Users

If you are using Visual Studio 2005 or Visual C# 2005 Express, change the Target type from .NET Framework v3.5 to .NET Framework v3.0

Give your project the name UserControlSample (or something more clever if you want!), ensure that the Language is set to Visual C#, and click OK to create your new project and to close this Create New Project window.

2. Once your project has been created, you will see an empty design surface. Let's change that by drawing a rectangle. Click on the Rectangle tool from your Toolbox on the left and draw a rectangle in your design surface:

[ Draw a rectangle by using the Rectangle tool from your Toolbox ]

3. The Rectangle you created may look fairly plain, but I don't want to spend too much time focusing on minor details such as customizing how your Rectangle looks. Make the necessary modifications that you want, but feel free to keep things simple as I did with my rounded corners and green fill:

[ your (slightly) more refined rectangle ]

4. Once you have customized your rectangle, right click on it. One of the commands you will see from the menu that appears is Make Control:

[ one of the new features in Blend 2 is the Make Control command ]

From the menu that appears, click on the Make Control command.

5. After you clicked on the Make Control command, the Make Control dialog will appear. In the Name field, enter the name InfoRectangle:

[ from the Make Control window, give your control the name InfoRectangle ]

Click OK once you are finished, and brace yourself for the changes ahead. (I'm being sarcastic...or am I?)

6. You will find you are no longer editing Window1.xaml like you were earlier, but instead,, you are now editing a file called InfoRectangle.xaml with your Artboard displaying only your earlier rectangle:

[ you will find your Artboard displaying only your rectangle in your newly created InfoRectangle.xaml file ]

Like you saw in the previous page, if you look in your Projects panel, you will see that InfoRectangle and InfoRectangle.cs have been created automatically for you:

[ a user control is nothing more than a XAML file and a corresponding code-behind file ]

I will review some of these changes later, but let's make our user control slightly more useful. In the next page, you will finish up some more work on the user control and learn how to use it in an application.

Onwards to the next page!

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