Creating Property Definitions

• Aug 03, 2020
• 2 minutes to read

The WPF Property Grid control uses property definitions to define how and which properties are displayed.

This document demonstrates how to bind the WPF Property Grid control to data and create property definitions.

Perform the following steps.

Step 1 — Create a Property Grid

Add a PropertyGridControl component to the project.

To do this, open the Toolbox in Visual Studio, locate the DX.18.2: Data tab, choose the PropertyGridControl Toolbox item, and drop it onto the window.

Right-click the Property Grid and select Layout | Reset All to fill the entire window.

Step 2 — Create a Data Object

Create a data object and set it as the DataContext.

C#

namespace Creating_Definitions {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            DataContext = new Customer() {
                ID = 1,
                FirstName = "Nancy",
                LastName = "Davolio",
                Gender = Gender.Female,
                BirthDate = new DateTime(1948, 8, 12),
                Phone = "7138638137"
            };
        }
        public class Customer {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public Gender Gender { get; set; }
            public DateTime BirthDate { get; set; }
            public string Phone { get; set; }
        }
        public enum Gender { Male, Female }
    }
}

Step 3 — Bind the Property Grid to the Data Object

Use the property grid’s PropertyGridControl.SelectedObject property to bind it to data.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxprg="http://schemas.devexpress.com/winfx/2008/xaml/propertygrid" x:Class="PG_lesson1.MainWindow"
        Title="MainWindow" Height="250" Width="525">
    <Grid>

        <dxprg:PropertyGridControl SelectedObject="{Binding}" />

    </Grid>
</Window>

Step 4 — Create Property Definitions

Add property definitions to the property grid. Set the PropertyGridControl.ShowProperties property to ShowPropertiesMode.WithPropertyDefinitions, to hide the properties that do not have definitions.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxprg="http://schemas.devexpress.com/winfx/2008/xaml/propertygrid" x:Class="PG_lesson1.MainWindow"
        Title="MainWindow" Height="250" Width="525">
    <Grid>

        <dxprg:PropertyGridControl SelectedObject="{Binding}" ShowProperties="WithPropertyDefinitions" >
            <dxprg:PropertyDefinition Type="sys:String" />
            <dxprg:PropertyDefinition Path="Gender" />
            <dxprg:PropertyDefinition Path="BirthDate" />
        </dxprg:PropertyGridControl>

    </Grid>
</Window>

Run the application to see the result.