Filtering and Searching in WPF PropertyGrid

10 Nov 202318 minutes to read

We can decide the properties which are need to be displayed in PropertyGrid by hiding the unwanted properties using collection and attributes. We can navigate to the particular property by using the default SearchBox.

Hide the Properties using Collection

We can hide the properties using the HidePropertiesCollection property. It is used to hide the mentioned properties which are already present in SelectedObject. Properties can also be hidden at runtime using HidePropertiesCollection.

public class Employee {
    public string Name { get; set; }
    public string Email { get; set; }
    public string Bank { get; set; }
    public string ID { get; set; }
    public string AccountNumber { get; set; }
    public int Age { get; set; }
    public int Experience { get; set; }
}

 public class ViewModel {
    private ObservableCollection<string> hidePropertyItems = new ObservableCollection<string>();
    public Object SelectedEmployee { get; set; }
    public ObservableCollection<string> HidePropertyItems
    {
        get { return hidePropertyItems; }
        set { hidePropertyItems = value; }
    }
    public ViewModel() {
        var employee = new Employee()
        { 
            Email = "john@gta.com",
            AccountNumber="23456784",
            Bank="ABC bank",
            Name = "Johnson",
            Experience=5,
            ID = "895",
            Age = 35,
        };
        HidePropertyItems.Add(nameof(employee.AccountNumber));
        HidePropertyItems.Add(nameof(employee.Email));
        HidePropertyItems.Add(nameof(employee.Bank));
        SelectedEmployee = employee;
    }
}
<syncfusion:PropertyGrid HidePropertiesCollection="{Binding HidePropertyItems}" 
                         SelectedObject="{Binding SelectedEmployee}" 
                         x:Name="propertyGrid1" Width="350" Height="200" >
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));

AccountNumber, Bank and Email properties are not displayed in PropertyGrid

Here, the PropertyGrid hides the properties AccountNumber, Bank and Email properties which are specified in the HidePropertiesCollection.

NOTE

HidePropertiesCollection cannot hide the properties which are added using DynamicDescriptor.

Click here to download the sample that showcases the filtering support using the HidePropertiesCollection.

Hide the Properties using Attributes

We can hide properties by setting the Browsable value as false or Bindable as false, which properties will not be displayed in PropertyGrid. Functionalities of Browsable and Bindable attributes are same.

using System;
using System.ComponentModel;

public class Employee {
    [Browsable(false)]
    public string Bank { get; set; }
    [Bindable(false)]
    public string AccountNumber { get; set; }
    [Browsable(false)]
    public string Email { get; set; }
    public string Name { get; set; } 
    public string ID { get; set; }       
    public int Age { get; set; }
    public int Experience { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            Email = "john@gta.com",
            AccountNumber = "23456784",
            Bank = "ABC bank",
            Name = "Johnson",
            Experience = 5,
            ID = "895",
            Age = 35,
        };
    }
}
<syncfusion:PropertyGrid SelectedObject="{Binding SelectedEmployee}"                   
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));

AccountNumber, Bank and Email properties are not displayed in PropertyGrid

Here, the PropertyGrid not displayed the AccountNumber, Bank and Email properties which are specified Browsable and Bindable attribute value as false.

NOTE

If we use both the Browsable and Bindable attributes, the Browsable attribute have a higher priority.

Hide the Properties using Display.AutoGeneratedField

If a property has the value of Browsable attribute as true and Bindable attribute as true, then properties are not hidden. We can hide the property by using the AutoGeneratedField of Display as false. Value of AutoGeneratedField has no effect when the property is marked Browsable or Bindable as false.

public class Employee
{        
    [Browsable(true)]
    [Bindable(true)]
    [Display(AutoGenerateField = false)]
    public string Bank { get; set; }
    [Display(AutoGenerateField = false)]
    [Browsable(true)]
    [Bindable(true)]
    public string AccountNumber { get; set; }  
    [Browsable(false)]
    [Bindable(true)]
    [Display(AutoGenerateField = false)]
    public string ID { get; set; }      
    public string Email { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public int Experience { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee()
        {
            Email = "john@gta.com",
            AccountNumber = "23456784",
            Bank = "ABC bank",
            Name = "Johnson",
            Experience = 5,
            ID = "895",
            Age = 35,
        };
    }
}
<syncfusion:PropertyGrid SelectedObject="{Binding SelectedEmployee}"          
                         x:Name="propertyGrid1" >
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));

AccountNumber and Bank properties are not displayed in PropertyGrid

Here, the PropertyGrid not displayed the Bank and AccountNumber properties. The Bank and AccountNumber property are not displayed by value of Browsable attribute as true and Bindable attribute as true and the AutoGeneratedField of DisplayAttribute is false.In ID property, the Browsable is false, then the AutoGeneratedField property have no effect.

Click here to download the sample that showcases the filtering support using the attributes.

Hide the Properties at runtime

We can hide the properties in the PropertyGrid without using the attributes at runtime by handling the AutoGeneratingPropertyGridItem event with AutoGeneratingPropertyGridItemEventArgs.Cancel property as true.

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;
        };
    }
}
<syncfusion:PropertyGrid AutoGeneratingPropertyGridItem="PropertyGrid1_AutoGeneratingPropertyGridItem"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));
propertyGrid1.AutoGeneratingPropertyGridItem += PropertyGrid1_AutoGeneratingPropertyGridItem;
private void PropertyGrid1_AutoGeneratingPropertyGridItem(object sender, AutoGeneratingPropertyGridItemEventArgs e) {
    //Name and Experience properties hided in the PropertGrid control.
    if (e.DisplayName == "Experience") {
        e.Cancel = true;
    }
    else if (e.DisplayName == "Name") {
        e.Cancel = true;
    }
}

Designation and Age properties are not displayed in PropertyGrid

Here, the Experience and Name properties are not displayed in the PropertyGrid, since the properties was restricted to be added in PropertyGrid by the AutoGeneratingPropertyGridItem event.

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

Searching the Properties

If the PropertyGrid.SelectedObject contains more properties, it is difficult to find the individual property and nested properties. Now, you can easily get the required properties by searching the property name in the SearchBox. SearchBox will be filter and display the properties which are contains the searched text. SearchBox is shown by default, you can hide it by setting SearchBoxVisibility property as Collapsed.

// A Class that represents the nested properties
public class Address {
    public string State { get; set; }        
    public string StreetName { get; set; }
    public string DoorNo { get; set; }
    public override string ToString() {
        return DoorNo + ", " + StreetName + ", " + State;
    }
}

public class Employee {
    public string Name { get; set; }
    public string ID { get; set; }
    public int Age { get; set; }
    // Property contains the nested properties
    public Address Address { get; set; }
}

public class ViewModel {
    public object SelectedEmployee { get; set; }
    public PropertyExpandModes PropertyExpandMode { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee() {                
            Age = 23,
            ID = "1207",
            Name = "Mark",
            Address = new Address()
            {
                State = "New Yark",
                DoorNo = "10",
                StreetName = "Martin street"
            }
        };
        PropertyExpandMode = PropertyExpandModes.FlatMode;
    }
}
<syncfusion:PropertyGrid PropertyExpandMode="NestedMode"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));
propertyGrid1.PropertyExpandMode = PropertyExpandModes.NestedMode;

SearchBox filter the nested property in PropertyGrid

Here, The Age property is searched in the SearchBox.

SearchBoxVisibility = Collapsed

<syncfusion:PropertyGrid Name="propertyGrid1" SelectedObject="{Binding SelectedEmployee }" SearchBoxVisibility="Collapsed" />
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SelectedObject = (propertyGrid1.DataContext as ViewModel).SelectedEmployee;
propertyGrid1.SearchBoxVisibility = Visibility.Collapsed;

SearchBox not displayed in PropertyGrid

Here, The SearchBox is hidden in the PropertyGrid.

Click here to download the sample that showcases the property searching in the SearchBox support.

##