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"
RenderMode="Flat"
IsGrouped="True"
AutoGeneratePropertyDefinitions="False">
<telerik:RadPropertyGrid.PropertyDefinitions>
<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"/>
</telerik:RadPropertyGrid.PropertyDefinitions>
</telerik:RadPropertyGrid>
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:
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" />
</Style>
Example 5: Set the GroupStyle property
<telerik:RadPropertyGrid RenderMode="Flat"
IsGrouped="True"
AutoGeneratePropertyDefinitions="False"
GroupStyle="{StaticResource commonGroupStyle}" />
The effect on the appearance of the control will be the following:
