Sunday, February 06, 2011

Customizing Silverlight properties for Visual Designers

When building custom or user controls you probably end up with a large amount of properties on that control. When using the control in a visual designer like Blend or the Visual Studio designer these properties just show up. Adding a bit of structure in this can be done very easily by adding a couple of attributes to the properties.

The attributes to let the visual design know what to do can be found in the System.ComponentModel namespace. There’s a WPF version of this namespace also.
For the sake of simplicity I’ve created a UserControl and set the background color of the LayoutRoot grid to red to be able to spot it in the designer. I’ll add properties with attributes to that control and show you what happens in Visual Studio and Expression Blend.

Categorizing

By default all properties on UserControls are grouped together in the Miscellaneous section at the bottom of the properties Panels in Blend and or in the Others section in Visual Studio.
The first property I’ve named CategoryDemo1 and it’s of type string. It doesn’t have an attribute to go with it.
When adding the control to the MainPage the properties look like this:

image_thumb.png   image_thumb1.png

To add a property to an existing category add a Category Attribute to the property and give it the name of the category you would like to have you property added too.

For example, this adds the property Category2 to the Layout category:

[Category("Layout")]
public string CategoryDemo2 { get; set; }

Read more:  Timmy Kokke