New to Telerik UI for WPF? Download free 30-day trial

Styling Groups

This article will show you how to assign a common style for all the groups of the RadPropertyGrid. You can achieve this by creating a style and assigning it to the GroupStyle property of the RadPropertyGrid.

This feature is only available with RenderMode set to "Flat"

The feature was introduced with Q1 2016

1. First we declare an Employee class, an instance of which we will set as the RadPropertyGrid`s item:

Example 1: Create the Employee class

public class Employee 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public string Title { get; set; } 
    public string HomePhone { get; set; } 
Public Class Employee 
    Public Property FirstName() As String 
    Public Property LastName() As String 
    Public Property Title() As String 
    Public Property HomePhone() As String 
End Class 

2. Declare the RadPropertyGrid in XAML:

Example 2: Create the RadPropertyGrid

<telerik:RadPropertyGrid x:Name="PropertyGrid"  
        <telerik:PropertyDefinition Binding="{Binding FirstName}" GroupName="Group Name" DisplayName="First Name" /> 
        <telerik:PropertyDefinition Binding="{Binding LastName}" GroupName="Group Name" DisplayName="Last Name"/> 
        <telerik:PropertyDefinition Binding="{Binding Title}" GroupName="Group Title" DisplayName="Title"/> 
        <telerik:PropertyDefinition Binding="{Binding HomePhone}" GroupName="Group Phone" DisplayName="HomePhone"/> 

3. Instantiate the Employee object and set it as the item of the PropertyGrid control:

Example 3: Instantiate Employee object

Employee employee = new Employee() 
    FirstName = "Nancy", 
    LastName = "Porter", 
    Title = "Sales Representative", 
    HomePhone = "0088 888 3433" 
PropertyGrid.Item = employee; 
Dim employee As New Employee() With { 
    .FirstName = "Nancy", 
    .LastName = "Porter", 
    .Title = "Sales Representative", 
    .HomePhone = "0088 888 3433" 
PropertyGrid.Item = employee 

At this point we have the following appearance:

WPF RadPropertyGrid Default Group Appearance

You then need to proceed with creating the specific style and assign it to the control.

4. Create the common style as a static resource:

Example 4: Create the style

<Style x:Key="commonGroupStyle" TargetType="telerik:RadToggleButton"> 
    <Setter Property="Foreground" Value="Blue" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="FontSize" Value="15"/> 
    <Setter Property="Height"  Value="50" /> 
5. Set the Group Style property of the RadPropertyGrid:

Example 5: Set the GroupStyle property

<telerik:RadPropertyGrid RenderMode="Flat"    
                 GroupStyle="{StaticResource commonGroupStyle}" /> 

The effect on the appearance of the control will be the following:

WPF RadPropertyGrid with Custom Group Style

See Also

In this article