WPF Property Grid (WPG) Tutorial In C#

The property grid in WPF helps us generate 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 ones, hosted on CodePlex, wpg(WPF Property Grid). I am assuming that you have basic WPF knowledge. If not, please consider reading my other article about getting started with WPF in C#.

How does Property Grid work?

As you already know from my introductory words, what does the WPF property grid do? You still might have another question in mind: how does it work? Which property should be changed for which type of controls? It’s simple enough to answer, as that will be the one that comes to mind first. It is recognized by the type of property of a class; for example, if you define a property of a property grid class of string type, it will create a text box control. On the other hand, if you use an enum type for a property, it will be treated as a combo box control.

However, some extra effort is needed in the property grid class to make it suitable. You will have to define some attributes. For example, to categorize a list of fields, you will have to use ‘CategoryAttribute’. For the text label corresponding to a field, you must use the ‘DisplayName’ attribute. Besides, you can use ‘DescriptionAttribute,’ which will define the tooltip text when the user mouse over a field text.

Example codes for using the WPF property grid:

First, add the property grid dlls to the project you are working on. Now, create a class in the 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;
        }       
  }
}Code language: JavaScript (javascript)

To mention, setting up this class won’t require the wpg library to be imported. However, the system.ComponentModel namespace is required for attributes.

First, add the reference of the WPG library to your XML file along with other references. An 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>Code language: HTML, XML (xml)

Now, write a function on the code behind C# file with the 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;
        }
    }
}Code language: HTML, XML (xml)

To get data inputted by the 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 more options at the top. Those are integrated parts that help users search for controls by label text. The resulting window will be as 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 the amount of code written for us, which in turn reduces development time.
• Enhancement is easy: Adding and removing fields is very easy; it’s just a matter of adding/removing property to the property grid entity class.
• Suitable for many field-contained apps: This library will help applications that require many data fields to be represented on a form window. It will save a huge amount of UI code writing, compactly represent the fields in an organized way, and provide an option to search controls.
• It’s Open source: As an open-source project, you can track and fix its bugs and enhance yourself as you need.

Disadvantages of WPF Property Grid:

• Buggy: You may encounter unexpected behaviours/errors sometimes, especially while working with other libraries. This library is still under development and needs considerable improvement for stability.
• Less customizable: There are very few rooms to customize the UI according to your taste. So, it’s better to decide at the very beginning whether to use this library based on what it provides.
• Event Handling: It’s very difficult to add/attach events to the controls of the property grid.
• Documentation: This project doesn’t have any documentation on CodePlex. Therefore, developers may have problems understanding its features and using them.

For your information, you won’t be able to download the library from the download section for this project. Instead, you will have to go to the ‘source code’ tab, which is in the top right corner. Happy coding 🙂