Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 10 Jul 2011
Rate this:
Please Sign up or sign in to vote.
Organizing custom control properties inside Visual Studio and Expression Blend.

If you are a 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:

Categorization of Properties in Visual Studio Categorization of Properties in Blend

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.

Add new Custom Control

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):

Blend Properties Panel shows those Properties inside the Miscellaneous Group Blend Properties Panel shows those Properties inside the Miscellaneous Group

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):

Categorized Properties into Employee Control Group Categorized Properties into Employee Control Group

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:

Categorized Properties into Multiple Group Categorized Properties into Multiple Group

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralBest Tut for Categorize of Properties Pinmemberkanthesha17-Aug-11 23:19 
QuestionMy vote of 5 PinmemberRamalinga Koushik10-Jul-11 18:46 
AnswerRe: My vote of 5 PinmvpKunal_Chowdhury11-Jul-11 5:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 10 Jul 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid