WPF Property Grid (WPG) Tutorial In C#

Property grid in WPF helps us in generating UI controls from a c# class. Although. there are several projects and releases out there for this purpose, I am going to introduce one of the most popular open source once, hosted on codeplex, wpg(WPF Property Grid). I am assuming that, you have basic wpf knowledge. If no, please consider reading my another article about getting started with wpf in c#.

How Property grid works?

As you already know from my introductory words, what wpf property grid does; You still might have another question in mind, how it works, that means, which property to change which type of controls? Its simple enough to answer, as that will be the one only that will come to our mind first. It recognizes by the type of the property of a class. Such as, if you define a property of a property grid class of string type, then it will create a text box control. On the other hand, if you use an enum type for a property, that will be treated for a combo box controls.

However, there are some extra efforts needed in the property grid class for making it suitable to use. You will have to define some attributes. Such as, for categorize a list of fields, you will have to use ‘CategoryAttribute’. For the text label corresponding to a field, you will have to use ‘DisplayName’ attribute. Besides you can use ‘DescriptionAttribute’, which will define the tool tip text when user mouse over a field text.

Example codes for using WPF property grid:

First, add the property grid dlls to the project you are working on. Now, create a class as like following format:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Xml.Serialization;
using System.Windows.Input;

namespace PropertyGridClasses
{
public class MyPropertyGrid
    {
        public enum ETestEnum { option1,option2,option3 }      
        
        
        [CategoryAttribute("Category 1"),
        DisplayName("Field 1 Text"),
        DescriptionAttribute("Field 1 Text")]
        public ETestEnum ComboData
        {
            get;
            set;
        }
        
        [CategoryAttribute("Category 2"),
        DisplayName("NumericUpdow Field Text"),
        DescriptionAttribute("Test Description")]
        public int MyNumericUpdown
        {
            get;
            set;
        } 
        [CategoryAttribute("Category 2"),
        DisplayName("Textbox Field Text"),
        DescriptionAttribute("Test Description")]
        public string MyTextbox
        {
            get;
            set;
        }       
  }
}

Just to mention, setting up this class won’t require the wpg library to be imported. for attributes, it requires for system.ComponentModel name space.

Now, first, add the reference of wpg library on your xaml file along with other references. Example simple xaml file code is as follows:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpg="clr-namespace:WPG;assembly=WPG"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <wpg:PropertyGrid AutomaticlyExpandObjects="False"  Width="320" Foreground="BlanchedAlmond" Instance="{Binding ElementName=myGrid}" x:Name="wpgMyControl" ShowDescription="False" ShowPreview="false"  />
    </Grid>
</Window>

Now write a function on the code behind c# file with following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            MyPropertyGrid testGrid = new MyPropertyGrid();
            wpgMyControl.Instance = testGrid;
        }
    }
}

for getting data inputted by user, you will have to use the following code:

MyPropertyGrid testGrid = (MyPropertyGrid)wpgMyControl.Instance;

Now, if you run your application, you will see the controls and some more options at the top. Those are actually integrated part and helps user searching controls by label text. The result window will be as like follows:

Advantages of WPF Property Grid:

• Simple to use: This library is very easy to adapt, nothing difficult at all.
• Code reduction: It helps to reduce writing code for ui, a huge reduction in amount of code, thus development time also.
• Enhancement is easy: To add remove fields are very much easy, just a matter of adding/removing property to the property grid entity class.
• Suitable for lots of fields contained app: Which applications requires a lot of data fields to be represented on form window, this library will help those kind of application a lot. Because, it will save huge amount of ui code writing, compactly represents the fields in a organized way, provides option to search controls.
• Its Open source: Its being an open source project, you can track/fix its bug and enhance yourself as per your need.

Disadvantages of WPF Property Grid:

• Buggy: You may face some unexpected behaviors/errors sometimes, specially while working with other libraries. This library still under development and really needs good amount of improvement also for a stability.
• Less customizable: you will get very few rooms for customizing the ui according to your taste. So, better to decide at the very beginning whether to use this library according to what it provides.
• Event Handling: Its very difficult to add/attach events to the controls of property grid.
• Documentation: On codeplex, this project doesn’t have any documentation at all. For this, developers may face problem to know its features and using them.

For your kind information, for this project, you won’t be able to download the library from the download section. Rather, you will have to go to the ‘source code’ tab, and its on the top right corner. Happy coding 🙂