Property Description in WPF PropertyGrid

7 May 202118 minutes to read

You can display the description about the property using the description panel which is placed on the bottom of the PropertyGrid control. Description panel visibility can be managed by DescriptionPanelVisibility property . The default value of the DescriptionPanelVisibility is Collapsed. To display the description panel, you should set DescriptionPanelVisibility property value as Visible.

Property Description using attributes

We can give a meaningful description about the properties by using the Description attribute and Display attribute’s Description field. This description will be displayed in PropertyGrid Description panel while focusing the property or its value editor.

C#

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class Employee {
    [Display(Description = "Name of the employee")]
    public string Name { get; set; }
    public string ID { get; set; }
    [Description("Birth date of the employee")]
    public DateTime DOB { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            Name = "John",
            ID = "381",
            DOB = new DateTime(1995, 12, 24)
        };
    }
}

XAML

<syncfusion:PropertyGrid DescriptionPanelVisibility="Visible" 
                         DescriptionPanelHeight="50"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>

C#

PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));
propertyGrid1.DescriptionPanelVisibility = Visibility.Visible;
propertyGrid1.DescriptionPanelHeight = new GridLength(50);

Here, the description about the Name property is displayed by using the Display attribute’s Description field.

Here, the description about the DOB property is displayed by using the Description attribute.

NOTE

If you use both the Description attribute and Description field of the Display attribute, the Description attribute will have higher priority.

NOTE

The Display attribute is contained in the System.ComponentModel.Annotations.dll assembly.

NOTE

View Sample in GitHub

Change Property Description at runtime

We can set the property description without using the attributes and can change the property description at runtime by handling the AutoGeneratingPropertyGridItem event with AutoGeneratingPropertyGridItemEventArgs.Description property.

C#

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class Employee {
    public string Name { get; set; }
    public string ID { get; set; }
    public DateTime DOB { get; set; }
    public int Experience { get; set; }
}

public class ViewModel {
    public object SelectedEmployee { get; set; }

    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            Name = "John",
            ID = "381",
            DOB = new DateTime(1995, 12, 24),
            Experience = 5;
        };
    }
}

XAML

<syncfusion:PropertyGrid AutoGeneratingPropertyGridItem="PropertyGrid1_AutoGeneratingPropertyGridItem"
                         DescriptionPanelVisibility="Visible" 
                         DescriptionPanelHeight="50"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>

C#

PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));
propertyGrid1.AutoGeneratingPropertyGridItem += PropertyGrid1_AutoGeneratingPropertyGridItem;
propertyGrid1.DescriptionPanelVisibility = Visibility.Visible;
propertyGrid1.DescriptionPanelHeight = new GridLength(50);

C#

private void PropertyGrid1_AutoGeneratingPropertyGridItem(object sender, AutoGeneratingPropertyGridItemEventArgs e) {
    //Description about the DOB properties is added.
    if (e.DisplayName == "DOB") {
        e.Description = "Birth date of the Employee";
    }
}

Here, the DOB property description is added by the AutoGeneratingPropertyGridItemEventArgs.Description property of the AutoGeneratingPropertyGridItem event, not by any attributes.

NOTE

View Sample in GitHub

Setting description panel height

By default, the height of the description panel is automatically adjusted, based on the description text length of the property items. If you want to set description panel height manually, use the DescriptionPanelHeight property. The default value of DescriptionPanelHeight property is Auto.

NOTE

If length of the description text exceeds the DescriptionPanelHeight when manually setting the value to DescriptionPanelHeight, particular text is trimmed. you can see the full description text using the tooltip.

C#

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class Employee {
    [Display(Description = "Name of the employee")]
    public string Name { get; set; }
    [Description("An employee ID is a code used by an employer to uniquely identify the people working at an organization")]
    public string ID { get; set; }
    public DateTime DOB { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            Name = "John",
            ID = "381",
            DOB = new DateTime(1995, 12, 24)
        };
    }
}

XAML

<syncfusion:PropertyGrid DescriptionPanelVisibility="Visible" 
                         DescriptionPanelHeight="60"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>

C#

PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));
propertyGrid1.DescriptionPanelVisibility = Visibility.Visible;
propertyGrid1.DescriptionPanelHeight = new GridLength(60);

Custom UI for description panel

You can customize the UI of description panel by using the DescriptionTemplate property. The DataContext of `` property is PropertyItem.

C#

public class Employee
{
    [Description("Name of the employee")]
    public string Name { get; set; }
    [Description("ID of the employee")]
    public string ID { get; set; }
    [Description("Birth date of the employee")]
    public DateTime DOB { get; set; }
    [Description("Age of the employee")]
    public int Age { get; set; }
    public Employee()
    {
        Name = "John";
        ID = "381";
        DOB = new DateTime(1995, 12, 24);
        Age = 26;
    }
}

XAML

<syncfusion:PropertyGrid DescriptionPanelVisibility="Visible"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DescriptionTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock 
                    Text="{Binding Name}" 
                    FontSize="16" 
                    Foreground="Red" 
                    TextWrapping="Wrap"/>
                <TextBlock 
                    Text="{Binding Description}"
                    FontSize="14" 
                    Foreground="Green" 
                    TextWrapping="Wrap"/>
            </StackPanel>
        </DataTemplate>
    </syncfusion:PropertyGrid.DescriptionTemplate>
    <syncfusion:PropertyGrid.SelectedObject>
        <local:Employee></local:Employee>
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>

NOTE

View Sample in GitHub

Different custom UI for specific property’s description panel

You can customize the different UI for specific property’s description panel by handling the AutoGeneratingPropertyGridItem event and using the AutoGeneratingPropertyGridItemEventArgs.DescriptionTemplate property. You can also use the DescriptionTemplateSelector property to customize the UI for specific property’s description panel.

C#

public class Employee
{
    [Description("Name of the employee")]
    public string Name { get; set; }
    [Description("ID of the employee")]
    public string ID { get; set; }
    [Description("Birth date of the employee")]
    public DateTime DOB { get; set; }
    [Description("Age of the employee")]
    public int Age { get; set; }
    public Employee()
    {
        Name = "John";
        ID = "381";
        DOB = new DateTime(1995, 12, 24);
        Age = 26;
    }
}

XAML

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="template1">
            <StackPanel>
                <TextBlock 
                        Text="{Binding Name}" 
                        FontSize="16" 
                        Foreground="Red" 
                        TextWrapping="Wrap"/>
                <TextBlock 
                        Text="{Binding Description}"
                        FontSize="14" 
                        Foreground="Green" 
                        TextWrapping="Wrap"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="template2">
            <StackPanel>
                <TextBlock 
                        Text="{Binding Name}" 
                        FontSize="16" 
                        Foreground="BlueViolet" 
                        TextWrapping="Wrap"/>
                <TextBlock 
                        Text="{Binding Description}"
                        FontSize="14" 
                        Foreground="DarkCyan" 
                        TextWrapping="Wrap"/>
            </StackPanel>
        </DataTemplate>
    </Grid.Resources>
    <syncfusion:PropertyGrid AutoGeneratingPropertyGridItem="propertyGrid1_AutoGeneratingPropertyGridItem"
                             DescriptionPanelVisibility="Visible"
                             x:Name="propertyGrid1">
        <syncfusion:PropertyGrid.SelectedObject>
            <local:Employee></local:Employee>
        </syncfusion:PropertyGrid.SelectedObject>
    </syncfusion:PropertyGrid>
</Grid>

You can handle the event as follows,

C#

private void propertyGrid1_AutoGeneratingPropertyGridItem(object sender, AutoGeneratingPropertyGridItemEventArgs e)
{
    if (e.DisplayName == "Name" || e.DisplayName == "DOB")
    {
        e.DescriptionTemplate = grid.TryFindResource("template1") as DataTemplate;
    }
    else if (e.DisplayName == "ID" || e.DisplayName == "Age")
    {
        e.DescriptionTemplate = grid.TryFindResource("template2") as DataTemplate;
    }
}

NOTE

View Sample in GitHub

NOTE

If you use DescriptionTemplate and AutoGeneratingPropertyGridItemEventArgs.DescriptionTemplate properties to customize the description panel. Then, AutoGeneratingPropertyGridItemEventArgs.DescriptionTemplate have higher priority.