Click here to Skip to main content
Click here to Skip to main content

Native WPF 4 PropertyGrid

, 11 Jul 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Repackaging of Workflow Foundation's property grid for general use

Download - 2.91 KB

Download - 118.72 KB

screenshot2.PNG screenshot3.PNG


This is my second article about the PropertyGrid control, this time for WPF. I will base it on my previous article: "PropertyGridCE - Mobile version of PropertyGrid".

While working with Windows Workflow Foundation 4.0, I realized that the PropertyInspectorView control is indeed a fully-fledged WPF PropertyGrid control, including support for customization of attributes and custom editors. A PropertyInspectorView is associated with a parent WorkflowDesigner object and a sibling workflow View object, which is the real drag-and-drop canvas, as shown in this MSDN's screenshot:

Workflow Foundation Designer

Workflow Foundation example. Left: Activities Toolbox, Middle: Designer View, Right: Property Inspector.

Internal Architecture

The overall approach to make the PropertyInspector available for general-purpose use is the following:

  • Derive a new control from a Grid class. The grid will contain the real UI element.
  • Incorporate a Workflow Foundation's WorkflowDesigner object as a private class member.
  • For the designer object, add the corresponding PropertyInspectorView as a grid's child. Although it is exposed as a Grid, the real type is ProperyInspector.
  • Capture some methods of the PropertyInspector by using reflection, for further use.
  • Implement SelectedObject and SelectedObjects properties, as in regular PropertyGrid, and handle the change of selection at the PropertyInspector.
  • Add a GridSplitter and a TextBlock to mimic the HelpText functionality of the original PropertyGrid.

The following diagram depicts the internal architecture of the WpfPropertyGrid class, as explained in previous lines:


It is needed at least to invoke the public constructor and set the SelectedObject or SelectedObjects. The RefreshPropertyList method will be useful to refresh the control when the selected object has changed externally.

Set the HelpVisible property to show the property descriptions at the bottom, while the ToolbarVisible will show or hide the upper toolbar. Those properties have the same name as Winform´s PropertyGrid, in order to keep some degree of compatibility.

The same with the PropertySort property, which accepts a PropertySort enumeration type. It will allow to group the properties by categories or show them in a flatten fashion.

The FontAndColorData property can be used to restyle the control, since it internally sets the WorkflowDesigner.PropertyInspectorFontAndColorData property, but there is few information available in internet. Here is some interesting forum page about it at MSDN:

Basic Usage - Person Class

The supplied demo project will allow you to test all the WpfropertyGrid capabilities. There are three classes defined in DemoClasses.cs, with different features, like custom attributes and editors. Here is the declaration of the first and simplest one:

Person Class Diagram

Person Properties

    public class Person
        public enum Gender { Male, Female }

        #region private fields
        private string[] _Names = new string[3];

        // The following properties are wrapping an array of strings
        #region Public Properties
        [DisplayName("First Name")]
        public string FirstName
            set { _Names[0] = value; }
            get { return _Names[0]; }

        [DisplayName("Mid Name")]
        public string MidName
            set { _Names[1] = value; }
            get { return _Names[1]; }

        [DisplayName("Last Name")]
        public string LastName
            set { _Names[2] = value; }
            get { return _Names[2]; }

        // The following are auto-implemented properties (C# 3.0 and up)
        public Gender PersonGender { get; set; }

        [DisplayName("Birth Date")]
        public DateTime BirthDate { get; set; }

        public int Income { get; set; }

        // Other cases of hidden read-only property and formatted property
        [DisplayName("GUID"), ReadOnly(true), Browsable(true)]   
        public string GuidStr
            get { return Guid.ToString(); }

        [Browsable(false)]  // this property will not be displayed
        public System.Guid Guid
            private set;

        public Person()
            // default values
            for (int i = 0; i < 3; i++)
                _Names[i] = "";
            this.PersonGender = Gender.Male;
            this.Guid = System.Guid.NewGuid();

        public override string ToString()
            return string.Format("{0} {1} {2}", FirstName, 
                MidName, LastName).Trim().Replace("  ", " ");

Notice that the control will show just the properties, not the fields. As we are using C# 3.0 or 4.0, we can avoid declaring the underlying fields by using auto-implemented properties, whenever is convenient.

To show the properties of a Person object is quiet simple; just assign it to the control's SelectedObject property, as shown:

PropertyGrid1.SelectedObject = thePerson;
//'thePerson' is an object of class Person

Basic Attributes

In the Person class implementation, you will notice there are some properties that have attributes (those with square brackets); they won't have any effect on your class behaviour, but will do with the property grid. These attributes are similar to those implemented in the Winforms's PropertyGrid. Let's see them in detail.

  • Category: Lets you specify a category group for the affected property. A category appears by default at the property grid with a gray background, as you can see in the first screenshot. If the property doesn't have a Category attribute, it will belong to a blank category group, as with the GUID property in the previous screenshot. It is recommended to always specify a category for each property.
  • DisplayName: Will be useful when you want to display a property name different from the real one. Usually, it is used when you have to increment readability with white spaces, or abbreviate the name.
  • ReadOnly: When set to true, will prevent the property from being edited; it will be just shown in the property grid. In order to prevent the read-only properties to be hidden, it will necessary to mark them as Browsable=true, as with the GUIDStr property.
  • Browsable: When set to false, the property will not be shown. It is useful when you have a property that you don't want to show at all, like the GUID property in the first example.

All these attributes are declared in the System.ComponentModel namespace and automatically recognized by the property inspector.

Custom Properties - Vehicle Class

While the simplest implementation of WpfPropertyGrid exposes all the properties of a class (with the exception of those with the Browsable attribute set to false), the ICustomProperties interface will allow to conditionally expose some properties. There are some customizations needed to accomplish this, as in the following example:

Vehicle Class Diagram

Vehicle Properties

Vehicle Properties

    public class Vehicle : 
        ICustomTypeDescriptor, INotifyPropertyChanged
        public enum CarType { Sedan, StationWagon, Coupe, 
            Roadster, Van, Pickup, Truck } 
        public enum CarBrand { Acura, Audi, BMW, Citroen, 
            Ford, GMC, Honda, Lexus, Mercedes, Mitsubishi, 
            Nissan, Porshe, Suzuki, Toyota, VW, Volvo }

        #region Private fields
        private CarType _TypeOfCar;

        #region Public Properties
        public CarBrand Brand { get; set; }

        public CarType TypeOfCar
            get { return this._TypeOfCar; }
            set {
                this._TypeOfCar = value;

        public string Model { get; set; }

        public int Year { get; set; }

        [DisplayName("License Plate")]
        public string Plate { get; set; }

        // Will shown only for Pickup and Truck
        [DisplayName("Volume (ft³)")]
        public int Volume { get; set; }

        [DisplayName("Payload (kg)")]
        public int Payload { get; set; }

        [DisplayName("Crew cab?")]
        public bool CrewCab { get; set; }

        #region ICustomTypeDescriptor Members
        public AttributeCollection GetAttributes() ...
        public string GetClassName() ...
        public string GetComponentName() ...
        public TypeConverter GetConverter() ...
        public EventDescriptor GetDefaultEvent() ...
        public PropertyDescriptor GetDefaultProperty() ...
        public object GetEditor(Type editorBaseType)
        public EventDescriptorCollection 
            GetEvents(Attribute[] attributes) ...
        public EventDescriptorCollection GetEvents() ...
        public object 
            GetPropertyOwner(PropertyDescriptor pd) ...
        public PropertyDescriptorCollection 
            GetProperties(Attribute[] attributes) ...

        // Method implemented to expose Capacity properties 
        // conditionally, depending on TypeOfCar
        public PropertyDescriptorCollection GetProperties()
            var props = new PropertyDescriptorCollection(null);

            foreach (PropertyDescriptor prop in 
                TypeDescriptor.GetProperties(this, true))
                if (prop.Category=="Capacity" &&
                    (this.TypeOfCar != CarType.Pickup && 
                    this.TypeOfCar != CarType.Truck))

            return props;

        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String info)
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(info));

Notice that the most important method needed to implement the PropertyGrideCE.ICustomProperties interface is GetProperties(). This method shall return all the property names you want to expose as an array, depending on some conditions. In this example, if the car type is a PickUp or Truck, the Volume, Payload and CrewCab properties will be exposed.

Custom Editors - Place Class


Although the intent of this article is not to go deep with Editor customization, I will show a couple of examples of the two kind of editors: extended and dialog-based. More information can be found along with the Workflow Foundation 4 API, or maybe in my next article Smile | :)

Custom editors is the most powerful feature of this control. There are several tricks you can do with it. By default, the control will provide an editor for all the fundamental classes: int, float, double, etc., and also for strings and enumerations, the latter as a ComboBox. If you have a custom class' object as a property, it will show the string representation but just as readonly, because the grid control doesn't know how to edit it.

The Place class implementation shows both. Despite the kind of editor, it has to be derived from the PropertyValueEditor class, as we will see in detail later.

In order to specify a custom editor for a property, it is needed to add an EditorAttribute attribute to the property declaration, as done with CountryInfo and Picture properties.

Place Class Diagram

Place Properties

Place Properties

    public class Place
        public struct CountryInfo
            public static readonly CountryInfo[] Countries = {
                // African countries
                new CountryInfo(Continent.Africa , "AO", "ANGOLA" ),
                new CountryInfo(Continent.Africa, "CM", "CAMEROON" ),
                // American countries
                new CountryInfo(Continent.America, "MX", "MEXICO" ),
                new CountryInfo(Continent.America, "PE", "PERU" ),
                // Asian countries
                new CountryInfo(Continent.Asia, "JP", "JAPAN" ),
                new CountryInfo(Continent.Asia, "MN", "MONGOLIA" ),
                // European countries
                new CountryInfo(Continent.Europe, "DE", "GERMANY" ),
                new CountryInfo(Continent.Europe, "NL", "NETHERLANDS" ),
                // Oceanian countries
                new CountryInfo(Continent.Oceania, "AU", "AUSTRALIA" ),
                new CountryInfo(Continent.Oceania, "NZ", "NEW ZEALAND" )

            public Continent Contin { get; set; }
            public string Abrev { get; set; }
            public string Name { get; set; }

            public override string ToString()
                return string.Format("{0} ({1})", Name, Abrev);
            public CountryInfo(Continent _continent, 
                string _abrev, string _name) : this()
                this.Contin = _continent;
                this.Abrev = _abrev;
                this.Name = _name;

        #region Private fields
        private string[] _Address = new string[4];

        #region Public properties
        public string Street
            get { return _Address[0]; }
            set { _Address[0] = value; }
        public string City
            get { return _Address[1]; }
            set { _Address[1] = value; }
        public string Province
            get { return _Address[2]; }
            set { _Address[2] = value; }
        public string Postal
            get { return _Address[3]; }
            set { _Address[3] = value; }

        // Custom editor for the following 2 properties
        [Editor(typeof(CountryEditor), typeof(PropertyValueEditor))]
        public CountryInfo Country { get; set; }
        [Editor(typeof(PictureEditor), typeof(PropertyValueEditor))]
        public BitmapImage Picture { get; set; }
        public int Floors { get; set; }
        public int CurrentValue { get; set; }

        public Place()
            for (int i = 0; i < _Address.Length; i++)
                _Address[i] = string.Empty;
            this.Country = CountryInfo.Countries[0];

As mentioned, there are two examples of custom editor implementations in the Place class; the first one, CountryEditor, is an extended editor. It asks for a country with two ComboBoxes: one for Continent, and one for Country, as shown in the screenshot. To simplify demonstration, the required XAML DataTemplate is placed in the source code file, which is not so usual:

    class CountryEditor : ExtendedPropertyValueEditor
        public CountryEditor()
            // Template for normal view
            string template1 = @"...xaml template here...";

            // Template for extended view. Shown when dropdown button is pressed.
            string template2 = @"...xaml template here..."; 

            // Load templates
            using (var sr = new MemoryStream(Encoding.UTF8.GetBytes(template1)))
                this.InlineEditorTemplate = XamlReader.Load(sr) as DataTemplate;
            using (var sr = new MemoryStream(Encoding.UTF8.GetBytes(template2)))
                this.ExtendedEditorTemplate = XamlReader.Load(sr) as DataTemplate;

For an extended editor, it has to be derived from ExtendedPropertyValueEditor class. This will allow the property grid to drop down a customized control to input the property data.

The constructor should load both templates, the normal one and the extended one, from some xaml DataTemplate declarations. Usually those templates are placed in an xaml Resource file.

The second example of a custom editor is PictureEditor; it is different from a extended editor, because it shows a new dialog when the dropdown button is pressed, so it will require to implement that window separately. Also it is derived from a different base class: DialogPropertyValueEditor. The sample class is shown partially for abbreviation purposes:

    class PictureEditor : DialogPropertyValueEditor
        // Window to show the current image and optionally pick a different one
        public class ImagePickerWindow : Window
            // regular window implementation here

        public PictureEditor()
            string template = @"...xmal template here...";

            using (var sr = new MemoryStream(Encoding.UTF8.GetBytes(template)))
                this.InlineEditorTemplate = XamlReader.Load(sr) as DataTemplate;

        // Open the dialog to pick image, when the dropdown button is pressed 
        public override void ShowDialog(PropertyValue propertyValue, IInputElement commandSource)
            ImagePickerWindow window = new ImagePickerWindow(propertyValue.Value as BitmapImage);
            if (window.ShowDialog().Equals(true))
                var ownerActivityConverter = new ModelPropertyEntryToOwnerActivityConverter();
                ModelItem activityItem = ownerActivityConverter.Convert(propertyValue.ParentProperty, 
                    typeof(ModelItem), false, null) as ModelItem;
                using (ModelEditingScope editingScope = activityItem.BeginEdit())
                    propertyValue.Value = window.TheImage; 
                    editingScope.Complete(); // commit the changes

Multiple selection

While single selection can be done by setting the SelectedObject property to any value, multiple selection is achieved by setting the SelectedObjects property.

When multiple objects are selected, the Type Label in the top of the control will show the word "<multiple>" to the rigth of the type. If all the selected objects are of the same type, the type name is shown (see screenshot below). If not, it is shown the type "Object".

All the properties that have the same type and name for all the selected objects are shown, even if the selected objects are not of the same type. In the Demo application, try with Person and Place, which share the FirstName and LastName properties.


Help text

The textbox in the bottom of the control is called the HelpText. It will shown a property description set with the DescriptionAttribute attribute (see screenshot above).

When there are multiple selected objects, the description will be shown only if all the selected objects are of the same type.

The HelpText box can be shown or hidden by setting the HelpVisible property in the PropertyGrid.

How to use it

The WpfPropertyGrid can be embedded directly into your application. It doesn't need to be compiled in a separated DLL. To include it in some XAML declaration, you have to specify the correct namespace (a local System.Windows.Control) and add the corresponding tag to your WPF window or dialog:

<Window Title="WpfPropertyGrid Demo" x:class="WpfPropertyGrid_Demo.MainWindow"
    Width="360" Resizemode="NoResize" Height="340">
    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

        <wpg:WpfPropertyGrid x:Name="PropertyGrid1" Width="200" Height="260" />


Dependency Properties

As the control properties are Dependency Properties, they can be bound to other elements in the container dialog or window like in the demo application (simplified):

<Window x:Class="WpfPropertyGrid_Demo.MainWindow"
   Title="WpfPropertyGrid Demo" mc:Ignorable="d" ResizeMode="CanResizeWithGrip" 
   Width="360" Height="360" MinWidth="360" MinHeight="400">

   <wpg:WpfPropertyGrid x:Name="PropertyGrid1" 
      Margin="20,20,118,21" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
      HelpVisible="{Binding ElementName=ShowDescrip, Path=IsChecked}" 
      ToolbarVisible="{Binding ElementName=ShowToolbar, Path=IsChecked}"
      PropertySort="{Binding ElementName=ComboSort, Path=SelectedItem}" />

The demo application has been built with Visual Studio 2010. As the WPF property inspector is a new feature in .net 4.0, this implementation won't be available for applications written for .net 3.0 or 3.5, even when they implement Workflow Foundation.

To use this control, you just need to add the WpfPropertyGrid.cs file into your project. Some references will be needed in your solution:

  • System.Activities
  • System.Activities.Core.Presentation
  • System.Activities.Presentation


  • June 14, 2010: First edition.
  • August 31, 2010: Second edition. Simplified implementation (thanks to Drammy and brannonking)
  • September 13, 2010: Major improvements: multiple selection, help textbox, extended demo.
  • July 12, 2011: Forth edition. Dependency properties, show/hide toolbar and categories. 


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


About the Author

Jaime Olivares
Architect Freelance (
Peru Peru

Computer Electronics professional, Software Architect and senior Windows C++ and C# developer with experience in many other programming languages, platforms and application areas including communications, simulation systems, PACS/DICOM (radiology), GIS, 3D graphics and HTML5-based web applications.
Currently intensively working with Visual C# 2013 and TFS.
Follow on   LinkedIn

Comments and Discussions

QuestionHas anybody done tabs on the propertygrid ? PinmemberMember 1144469510-Mar-15 9:03 
GeneralMy vote of 4 Pinmemberlilongss26-Nov-14 19:41 
Questionusing in WF rehosted designer PinmemberVahram Iritsyan28-Mar-14 5:38 
QuestionSearch trough ExpandableObjectConverter properties PinmemberChris Richner3-Oct-13 0:43 
QuestionINotifyPropertyChanged not working properly in WPF 4.0 Pinmemberkirubhakaranr13-Sep-13 20:49 
GeneralQuite interesting PinmvpEspen Harlinn19-Jul-13 14:22 
GeneralMy vote of 5 PinmemberHoward_CMI18-Jul-13 18:58 
GeneralMy vote of 5 Pinmemberaicro26-Apr-13 17:52 
QuestionExpandableObject - is it possible? Pinmembermiecio19988-Apr-13 23:22 
AnswerRe: ExpandableObject - is it possible? PinmemberTE84114-Apr-13 21:42 
GeneralMy vote of 5 PinmemberLiQuick12-Mar-13 4:11 
GeneralMy vote of 5 PinmemberMaheshlnt7-Mar-13 5:41 
QuestionLocate bound object from custom editor PinmemberTE8415-Feb-13 1:59 
AnswerRe: Locate bound object from custom editor PinmemberTE84126-Feb-13 3:41 
QuestionHow to implement in MVVM Pinmemberwesley ratulowski22-Jan-13 11:43 
AnswerRe: How to implement in MVVM [modified] Pinmemberpr0gg3r23-Jan-13 2:23 
QuestionTwo different styles of dropdowns Pinmembercollective38255-Dec-12 10:22 
AnswerRe: Two different styles of dropdowns Pinmembercollective38256-Dec-12 11:44 
QuestionWhat if a property changes externally? PinmemberClutchplate2-Nov-12 16:07 
AnswerRe: What if a property changes externally? PinmemberJaime Olivares2-Nov-12 16:40 
GeneralRe: What if a property changes externally? PinmemberClutchplate2-Nov-12 20:26 
GeneralRe: What if a property changes externally? PinmemberClutchplate5-Nov-12 16:45 
GeneralRe: What if a property changes externally? PinmemberBearOnABicycle29-Nov-12 7:47 
Questionhirarchical information PinmemberHelmutBerg13-Sep-12 6:34 
AnswerRe: hirarchical information PinmemberHelmutBerg14-Sep-12 4:53 
QuestionGlobalization PinmemberHelmutBerg13-Sep-12 4:09 
AnswerRe: Globalization PinmemberJaime Olivares2-Nov-12 16:48 
QuestionCustom property editor & assembly references problem Pinmemberthenorekcz6-Sep-12 6:43 
AnswerRe: Custom property editor & assembly references problem PinmemberJaime Olivares2-Nov-12 16:54 
QuestionValidation? Pinmembergeometer30-Aug-12 6:10 
AnswerRe: Validation? Pinmembergeometer30-Aug-12 6:12 
GeneralRe: Validation? PinmemberLOUIS Christian9-Oct-12 3:51 
GeneralRe: Validation? Pinmembergeometer9-Oct-12 4:34 
QuestionAdd buttons next to fields? PinmemberMember 13293299-Jul-12 3:07 
AnswerRe: Add buttons next to fields? PinmemberJaime Olivares10-Jul-12 19:05 
GeneralMy vote of 5 Pinmemberjraju114216-Jul-12 1:44 
GeneralMy vote of 5 PinmemberAlexKven23-Jun-12 18:41 
QuestionProbably issue with DialogPropertyValueEditor [modified] PinmemberThornik22-May-12 4:02 
AnswerRe: Probably issue with DialogPropertyValueEditor PinmemberJaime Olivares10-Jul-12 19:08 
GeneralRe: Probably issue with DialogPropertyValueEditor PinmemberThornik11-Jul-12 10:16 
QuestionWhy ComboBox? Pinmembertm-team16-Mar-12 4:24 
AnswerRe: Why ComboBox? PinmemberJaime Olivares10-Jul-12 19:28 
QuestionIssues with SelectedObjectsPropertyChanged PinmemberMember 21010557-Mar-12 21:44 
AnswerRe: Issues with SelectedObjectsPropertyChanged PinmemberJaime Olivares10-Jul-12 19:29 
SuggestionNeed a way to remove the search Items PinmemberSmurf IV (Simon Coghlan)23-Feb-12 6:53 
AnswerSorted: :-D PinmemberSmurf IV (Simon Coghlan)23-Feb-12 8:54 
AnswerHow to make this into a DesignProperty PinmemberSmurf IV (Simon Coghlan)23-Feb-12 11:14 
QuestionHelp text not fired when only a single object is in the grid [modified] PinmemberSmurf IV21-Feb-12 11:12 
BugRe: Help text not fired when only a single object is in the grid PinmemberSmurf IV22-Feb-12 7:53 
AnswerRe: Help text not fired when only a single object is in the grid PinmemberSmurf IV22-Feb-12 11:03 

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 | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 12 Jul 2011
Article Copyright 2010 by Jaime Olivares
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid