Share via

Creating Custom WPF/Silverlight Controls customizable in Blend

  • Article

Target Audience: Developers writing custom controls

When you create a new project and a place control like a Button on the scene, Blend allows you to customize the control by editing its Style and Template. Wouldn’t it be nice if you could write you own controls such that these commands are available for them as well?

First let’s talk about how you get a Custom Control with a default style. Visual Studio 2008 has a project template built-in for WPF.

1. Invoke the Create New Project Dialog

2. Select the language of your choice (C# or VB) and then select Windows

3. You will see the option of a WPF Custom Control Library

4. Select it and hit Okay

 

I could not find similar project templates for Silverlight so I created them. You can get them at https://cid-eeb5461a76579756.skydrive.live.com/self.aspx/Public/SilverlightCustomControlTemplates.zip

To use the above templates:

1. Unzip the above file

2. It contains 2 folders C# and VB, each containing SilverlightCustomControl.zip

3. Copy the zip files to

…\Visual Studio 2008\Templates\ProjectTemplates\Visual C# and

…\Visual Studio 2008\Templates\ProjectTemplates\Visual Basic respectively in your documents folder

4. In VS, invoke the Create New Project Dialog

5. Select the language of your choice (C# or VB)

6. You will see the option of a SilverlightCustomControl in My Templates

7. Select it and hit Okay

 

To use these controls in Blend:

 

1. Build the project you created above

2. Create a WPF/Silverlight Application (based on the custom control you want to use)

3. Add a reference to the binary of the project you built

4. Bring up the Asset dialog and select the Custom Controls Tab

5. Drag CustomControl1 on to the scene

5. To Edit Template, right click the element and select Edit Control Parts (Template) -> Edit a Copy

6. To Edit Style, invoke Main Menu -> Object -> Edit Style -> Edit A Copy

The control you get with the project template I provided is very simple with a rectangle and a TextBlock but this could be your custom control J !