Grouping in WPF PropertyGrid

18 Nov 20189 minutes to read

We can combine the properties and club them into expandable groups according to our needs by using the Category attribute and the Display.GroupName field. By default, the grouped properties are displayed in the sorted view. If we want to display the properties in the grouped view, we can set the EnableGrouping property to true.

Grouping using attributes

Properties in the WPF PropertyGrid will be grouped based on the name specified in the Category attribute and the GroupName field of the Display attribute. If a property item doesn’t have any category name, that property will be grouped under the Misc category.

C#

using System;
using System.ComponentModel;

public class Employee {
    [Category("Basic Info")]
    public string ID { get; set; }
    [Display(GroupName = "Basic Info")]
    public string Name { get; set; }   
    [Display(GroupName = "Additional Info")]
    public int  Experience { get; set; }     
    [Category()]
    public int Age { get; set; }
    public DateTime DOB { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            DOB = new DateTime(1995, 01, 31),
            Name = "Johnson",                
            Experience = 5,
            ID = "895",
            Age = 25,
        };
    }
}

XAML

<syncfusion:PropertyGrid SelectedObject="{Binding SelectedEmployee}"  EnableGrouping="True"          
                         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.EnableGrouping = true;

Here, the ID and Name properties are grouped under the ‘Basic Info’ category and the Experience property is grouped under the ‘Additional Info’ category by using the Category attribute or the Display.GroupName field.
The Age and DOB properties do not contain any group name, so they are grouped under the Misc category.

If we use both the Category attribute and the GroupName field of the Display attribute, the Category attribute will have higher priority.

Grouping the Properties at runtime

We can group the properties in the PropertyGrid without using the attributes at runtime by handling the AutoGeneratingPropertyGridItem event with the AutoGeneratingPropertyGridItemEventArgs.Category property. Based on the value of the Category property, the properties are grouped.

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"
                         EnableGrouping = "True"
                         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.EnableGrouping= true;

C#

private void PropertyGrid1_AutoGeneratingPropertyGridItem(object sender, AutoGeneratingPropertyGridItemEventArgs e) {
    //Experience and DOB properties grouped under 'Additional Info' category.
    if (e.DisplayName == "Experience") {
        e.Category = "Additional Info";
    }
    else if (e.DisplayName == "DOB") {
        e.Category = "Additional Info";
    }
    //Name and ID properties grouped under 'Basic Info' category.
    else if (e.DisplayName == "Name") {
        e.Category = "Basic Info";
    }
    else if (e.DisplayName == "ID") {
        e.Category = "Basic Info";
    }
}

Here, the DOB and Experience properties are grouped under the Additional Info category and Name and ID properties are grouped under the Basic Info category

Click here to download the sample that showcases the property grouping support using AutoGeneratingPropertyGridItem event.

Expand or Collapse Category group

We can expand or collapse the grouped properties programmatically by using the ExpandCategory and CollapseCategory methods in the PropertyGrid. These methods accept the group name as an argument.

Expand Category group

ExpandCategory method will expand the specified category if it is in the collapsed view.

C#

//Expand the Identity category group
PropertyGrid propertyGrid = new PropertyGrid();
propertyGrid1.EnableGrouping= true;
propertyGrid1.ExpandCategory("Identity");

Collapse Category group

CollapseCategory method will collapse the specified category if it is in the expanded view.

C#

//Collapse the Identity category group
PropertyGrid propertyGrid = new PropertyGrid();
propertyGrid1.EnableGrouping= true;
propertyGrid1.CollapseCategory("Identity");

Show or Hide the Group Button

We can change the view of the properties from the sorted view to the grouped view by using the GroupButton. We can show or hide the group button by using the ButtonPanelVisibility property. If we want to hide the GroupButton, set the ButtonPanelVisibility property to Collapsed. The default value of the ButtonPanelVisibility property is Visible.

XAML

<syncfusion:PropertyGrid x:Name="propertyGrid1" Width="350" Height="400"
                         ButtonPanelVisibility="Collapsed">
    <syncfusion:PropertyGrid.SelectedObject>
        <Button></Button>
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>

C#

PropertyGrid propertyGrid = new PropertyGrid();
propertyGrid.Width = 350;
propertyGrid.Height = 400;propertyGrid.SelectedObject = new Button();
propertyGrid1.ButtonPanelVisibility = Visibility.Collapsed;

Click here to download the sample that showcases the property grouping support.