How to Categorize Control Properties for XAML View inside Blend and Visual Studio?

If you are a XAML designer and creating controls for Silverlight, Windows Phone 7 or WPF, you may come in some situation that the custom properties for the controls are not properly organized by the developers. If you come into such situation forward this link to the developers and they may find it useful.

In this article, we will learn how to well organize the custom properties of your control so that, designers can easily search in appropriate location. Read to know more about it.

 
Background

Let us discuss more on what we want to implement here. While working in the XAML inside Visual Studio or Expression Blend you might noticed that the controls default properties are well organized in the property panel as shown below:

But when you expose some additional properties, they are not organized properly. They move into the default category called "Other" (in Visual Studio) and "Miscellaneous" (in Expression Blend).

Hence, what are the things we need to do so that our own properties will also organize properly. Let us explore it.

Create our own Custom Control

Let's create our own custom control. Inside your Silverlight project, add a new item. From the "Add New Item" dialog window, select "Silverlight Templated Control" as shown below and click "Add" to continue.

...
...

Categorizing inside a Single Group

Let us categorize them inside a single group. To grouping them, you can use the "Category" attribute and mark them to the custom properties. It takes the name of the category/group. Suppose, if you want to group the properties inside a category named "Employee Control", declare all the properties with the attribute [Category("Employee Control")]. Make sure to include the namespace "System.ComponentModel".
 
Have a look into the following code to have a clear understanding of the same:
 
#region Public Properties

[Category("Employee Control")]
public Visibility ProfilePhotoVisibility
{
    get { return (Visibility)GetValue(ProfilePhotoVisibilityProperty); }
    set { SetValue(ProfilePhotoVisibilityProperty, value); }
}
 
[Category("Employee Control")]
public string Department
{
    get { return (string)GetValue(DepartmentProperty); }
    set { SetValue(DepartmentProperty, value); }
}

Read more:  Kunal's Blog
QR:

Posted via email from Jasper-net