If you are an XAML designer and creating controls for Silverlight, Windows Phone 7, or WPF, you may come across a situation where custom properties for controls are not properly organized by the developers. If you are in such a situation, you may find this article useful.

In this article, we will learn how to organize the custom properties of your control so that designers can easily search for them in the appropriate location.

Background

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

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

What are the things we need to do so that our own properties will also be organized properly. Let us explore this.

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.

This will create a Custom Control inside your Silverlight project. Now in the control's class file, expose some user defined properties. We will create three dependency properties named EmployeeName, Department, and ProfilePhotoVisibility. The first two properties are of type string and the last one is a Visibility type.

Sharing the complete code here, in case you need it for reference:

using System.Windows;
using System.Windows.Controls;

namespace PropertyCategorizationDemo
{
    public class EmployeeControl : Control
    {
        #region Public Properties
        public Visibility ProfilePhotoVisibility
        {
            get { return (Visibility)GetValue(ProfilePhotoVisibilityProperty); }
            set { SetValue(ProfilePhotoVisibilityProperty, value); }
        }

        public string Department
        {
            get { return (string)GetValue(DepartmentProperty); }
            set { SetValue(DepartmentProperty, value); }
        }

        public string EmployeeName
        {
            get { return (string)GetValue(EmployeeNameProperty); }
            set { SetValue(EmployeeNameProperty, value); }
        }
        #endregion

        #region Dependency Properties
        public static readonly DependencyProperty ProfilePhotoVisibilityProperty =
            DependencyProperty.Register("ProfilePhotoVisibility",
                                         typeof(Visibility),
                                         typeof(EmployeeControl),
                                         new PropertyMetadata(Visibility.Visible));

        public static readonly DependencyProperty DepartmentProperty =
            DependencyProperty.Register("Department",
                                         typeof(string),
                                         typeof(EmployeeControl),
                                         new PropertyMetadata(string.Empty));

        public static readonly DependencyProperty EmployeeNameProperty =
            DependencyProperty.Register("EmployeeName",
                                         typeof(string),
                                         typeof(EmployeeControl),
                                         new PropertyMetadata(string.Empty));
        #endregion

        #region Constructor
        public EmployeeControl()
        {
            DefaultStyleKey = typeof(EmployeeControl);
        }
        #endregion
    }
}

Once done, build your project to make sure that there are no errors. If you notice errors, fix them before jumping into the next point.

Default Categorization

As discussed earlier, custom properties will have a default category. If you add a custom control in a page and open it inside Visual Studio, you will notice that the properties are categorized inside the "Other" group which has some additional properties too. Similarly, if you open the page inside Expression Blend, you will notice that they are grouped inside the "Miscellaneous" category. You will find additional properties here too.

Have a look at the screenshots below (Visual Studio and Expression Blend):

It is sometimes annoying to have to find out a property from the default group. The next section will help you create your own group and categorize them properly.

Categorizing Inside a Single Group

Let us categorize the properties inside a single group. To group them, you can use the "Category" attribute and mark them as custom properties. It takes the name of the category/group. Suppose 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 at the following code to get a clear understanding:

#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); }
}

[Category("Employee Control")]
public string EmployeeName
{
    get { return (string)GetValue(EmployeeNameProperty); }
    set { SetValue(EmployeeNameProperty, value); }
}
#endregion

This will place all the properties marked with the "Employee Control" category inside the group named "Employee Control", as shown in the screenshots below (Visual Studio and Expression Blend):

Categorizing Inside Multiple Groups

It's not a bigger job if you understand the mechanism properly. If you want to group some properties inside a category and others in a different one, just change the name while setting the Category attribute.

Here, we will have EmployeeName and Department inside the category named "Employee Control", the ProfilePhotoVisibility property will be part of a different category named "Appearance", which is an existing default category.

The below code snippet is a complete reference of the code:

#region Public Properties
[Category("Appearance")]
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); }
}

[Category("Employee Control")]
public string EmployeeName
{
    get { return (string)GetValue(EmployeeNameProperty); }
    set { SetValue(EmployeeNameProperty, value); }
}
#endregion

This will place EmployeeName and Department in the custom category named "Employee Control". The third property will be placed inside the existing category named "Appearance". Have a look below:

In case you want to set them in different custom categories, you will need to specify a new name for them. The IDE will do the rest for you.

Hope this article/tip was helpful. If you already knew this, you may give more suggestions for this. Don't forget to share this with others so that they can benefit from this. Thank you for reading this post. Happy coding!