Appearance in WPF PropertyGrid

This section explains different UI customization, styling, theming options available in PropertyGrid control.

Setting the Foreground

We can change the foreground color for properties of SelectedObject by setting the Foreground property. The default color value of Foreground property is Blue.

<syncfusion:PropertyGrid Foreground="Red" x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.SelectedObject>
         <Button></Button>
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.SelectedObject = new Button();
propertyGrid1.Foreground = Brushes.Red;

PropertyGrid with Red foreground

Setting the Background and FontWeight

We can change the background and font weight for all the properties by using the ViewBackgroundColor and FontWeight properties.

<syncfusion:PropertyGrid ViewBackgroundColor="Cyan" FontWeight="Bold" 
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.SelectedObject>
        <Button></Button>
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.SelectedObject = new Button();
propertyGrid1.ViewBackgroundColor = Brushes.Cyan;
propertyGrid1.FontWeight = FontWeights.Bold;

PropertyGrid with Cyan background and bold font

Background and FontWeight for the Editable and Readonly Properties

If we want to differentiate between editable and readonly properties, we can do this by using EditableBackground and EditableFontWeight properties to highlights the editable properties and use the ReadOnlyBackground and ReadOnlyFontWeight properties to highlights the readonly properties.

class Employee {
    public string EmployeeName { get; set; }
    [Editable(false)]
    public int EmployeeID { get; set; }     
    public int Age { get; set; }
    [ReadOnly(true)]
    public DateTime DOB { get; set; }
}

public class ViewModel {
    public Object SelectedEmployee { get; set; }
    public ViewModel() {
        SelectedEmployee = new Employee() 
        { 
            EmployeeName = "John", 
            DOB = new DateTime(1995, 01, 08), 
            Age=25, 
            EmployeeID = 036 
        };
    }
}
<syncfusion:PropertyGrid EditableBackground="LightGreen" EditableFontWeight="Bold"
                         ReadOnlyBackground="LightPink"  ReadOnlyFontWeight="UltraLight"
                         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.EditableBackground = Brushes.LightGreen;
propertyGrid1.EditableFontWeight = FontWeights.Bold;
propertyGrid1.ReadOnlyBackground = Brushes.LightPink;
propertyGrid1.ReadOnlyFontWeight = FontWeights.UltraLight;

Different Background and FontWeight applyed to the Editable and Readonly Properties

NOTE

If you use EditableBackground or ReadOnlyBackground properties with ViewBackgroundColor property, EditableBackground and ReadOnlyBackground properties have higher priority.

NOTE

If you use EditableFontWeight or ReadOnlyFontWeight properties with FontWeight property, EditableFontWeight and ReadOnlyFontWeight properties have higher priority.

Category Header’s foreground and background

We can change the background and foreground of the category header by setting the LineColor property and CategoryForeground property. The LineColor property value applied to the background and CategoryForeground property value applied to the foreground of the category header only on category view. To enable category view, use the EnableGrouping property as true.

<syncfusion:PropertyGrid LineColor="Cyan" CategoryForeground="Red"
                         x:Name="propertyGrid1" >
    <syncfusion:PropertyGrid.SelectedObject>
        <Button></Button>
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.SelectedObject = new Button();
propertyGrid1.LineColor = Brushes.Cyan;
propertyGrid1.CategoryForeground = Brushes.Red;

PropertyGrid with group header Red foreground and Cyan background

Customize the height of PropertyViewItem and PropertyCatagoryViewItem

We can customize the height of PropertyViewItem and PropertyCatagoryViewItem using its Padding property by overriding style in PropertyGrid.

<Window x:Class="PropertyGrid_CustomEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PropertyGrid_CustomEditor"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="450" Width="600">
    <Window.Resources>
        <Style TargetType="syncfusion:PropertyViewItem" >
            <Setter Property="Padding" Value="0"/>
        </Style>
        <Style TargetType="syncfusion:PropertyCatagoryViewItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </Window.Resources>
    <Grid>
        <syncfusion:PropertyGrid Margin="10" x:Name="propertyGrid1" >
            <syncfusion:PropertyGrid.SelectedObject>
                <Button></Button>
            </syncfusion:PropertyGrid.SelectedObject>
        </syncfusion:PropertyGrid>
    </Grid>
</Window>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.SelectedObject = new Button();

Customized the height of PropertyViewItem in PropertyGrid

Tooltip support

You can get the value and description about the property item through tooltip when hover the mouse on the respective property item and its value field. If the property item not contains any description, tooltip shows the property display name. You can restrict the tooltip support by setting the EnableToolTip property as false. The default value of EnableToolTip property is true.

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

public class Employee {
    [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)
        };
    }
}
<syncfusion:PropertyGrid EnableToolTip="True"
                         SelectedObject="{Binding SelectedEmployee}"
                         x:Name="propertyGrid1">
    <syncfusion:PropertyGrid.DataContext>
        <local:ViewModel></local:ViewModel>
    </syncfusion:PropertyGrid.DataContext>
</syncfusion:PropertyGrid>
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.EnableToolTip = true;
propertyGrid1.DataContext = new ViewModel();
propertyGrid1.SetBinding(PropertyGrid.SelectedObjectProperty, new Binding("SelectedEmployee"));

Tooltip show the property description

NOTE

View Sample in GitHub

Theme

We can customize the appearance of the PropertyGrid control by using the SfSkinManager.SetVisualStyle method. The following are the various built-in visual styles for PropertyGrid control.

  • Blend
  • Default
  • Lime
  • MaterialDark
  • MaterialDarkBlue
  • MaterialLight
  • MaterialLightBlue
  • Metro
  • Office2010Black
  • Office2010Blue
  • Office2010Silver
  • Office2013DarkGray
  • Office2013LightGray
  • Office2013White
  • Office2016Colorful
  • Office2016DarkGray
  • Office2016White
  • Office2019Black
  • Office2019Colorful
  • Office365
  • Saffron
  • SystemTheme
  • VisualStudio2013
  • VisualStudio2015

Here, the Blend style is applied to the PropertyGrid.

<Window
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <Grid>
        <syncfusion:PropertyGrid syncfusionskin:SfSkinManager.VisualStyle="Blend" 
                                 x:Name="propertyGrid1" >
            <syncfusion:PropertyGrid.SelectedObject>
                <Button></Button>
            </syncfusion:PropertyGrid.SelectedObject>
        </syncfusion:PropertyGrid>        
    </Grid>
</Window>
//Namespace for the SfSkinManager.
using Syncfusion.SfSkinManager;
PropertyGrid propertyGrid1 = new PropertyGrid();
propertyGrid1.SelectedObject = new Button();
SfSkinManager.SetVisualStyle(propertyGrid1, VisualStyles.Blend);

PropertyGrid with Blend visual style

Click here to download the sample that showcases the different theming support.