GroupStyleSelector

This article will show you how to style RadPropertyGrid's group rows conditionally by applying GroupStyleSelector.

Learn more about StyleSelectors.

Assume we have a RadPropertyGrid bound to an Employee object. You can view the initial setup in the Styling Groups article. At first the appearance of the control looks like this:

What we would like to achieve is to apply one style to the Group Name row and different style to the other groups. In order to achieve the desired behavior, you need to follow these steps:

1. Create a new class that inherits the StyleSelector class. Override its SelectStyle method. Based on your conditions - you return the proper Style that will be applied to the framework element.

Example 1: The GroupStyleSelector class

public class GroupStyleSelector : StyleSelector 
{ 
    public override Style SelectStyle(object item, DependencyObject container) 
    { 
        GroupDefinition groupDef = item as GroupDefinition; 
        if (groupDef.DisplayName == "Group Name") 
        { 
            return this.NameGroupStyle; 
        } 
        else if (groupDef.DisplayName == "Group Phone") 
        { 
            return this.PhoneGroupStyle; 
        } 
        else 
        { 
            return this.TitleGroupStyle; 
        } 
    } 
    public Style NameGroupStyle { get; set; } 
    public Style PhoneGroupStyle { get; set; } 
    public Style TitleGroupStyle { get; set; } 
} 

Public Class GroupStyleSelector 
    Inherits StyleSelector 
    Public Overrides Function SelectStyle(ByVal item As Object, ByVal container As DependencyObject) As Style 
        Dim groupDef As GroupDefinition = TryCast(item, GroupDefinition) 
        If groupDef.DisplayName = "Group Name" Then 
            Return Me.NameGroupStyle 
        ElseIf groupDef.DisplayName = "Group Phone" Then 
            Return Me.PhoneGroupStyle 
        Else 
            Return Me.TitleGroupStyle 
        End If 
    End Function 
    Public Property NameGroupStyle() As Style 
    Public Property PhoneGroupStyle() As Style 
    Public Property TitleGroupStyle() As Style 
End Class 

In this specific scenario we have three different styles that could be applied:

• NameGroupStyle

• PhoneGroupStyle

• TitleGroupStyle

Depending on the underlying data you can select which style to apply.

1. In the XAML file define the style selector as a resource and set the properties for the different styles:

Example 2: Defining the different style for the GroupStyleSelector

<my:GroupStyleSelector x:Key="groupStyleSelector"> 
    <my:GroupStyleSelector.NameGroupStyle> 
        <Style TargetType="telerik:RadToggleButton"> 
            <Setter Property="Foreground" Value="Red"/> 
        </Style> 
    </my:GroupStyleSelector.NameGroupStyle> 
    <my:GroupStyleSelector.PhoneGroupStyle> 
        <Style TargetType="telerik:RadToggleButton"> 
            <Setter Property="Foreground" Value="Orange"/> 
        </Style> 
    </my:GroupStyleSelector.PhoneGroupStyle> 
    <my:GroupStyleSelector.TitleGroupStyle> 
        <Style TargetType="telerik:RadToggleButton"> 
            <Setter Property="Foreground" Value="Green"/> 
        </Style> 
    </my:GroupStyleSelector.TitleGroupStyle> 
</my:GroupStyleSelector> 

The "my:" prefix before GroupStyleSelector specifies the mapping for the namespace of the project: xmlns:my="

If you are using our Implicit Themes, you should base the style on the one defined for the corresponding theme:

Example 3: Basing the style on the default for the control

<Style TargetType="telerik:RadToggleButton" BasedOn="{StaticResource RadToggleButtonStyle}"> 
    <Setter Property="Foreground" Value="Green"/> 
</Style> 

3. Finally, set the GroupStyleSelector property of the data column which represents the GroupStyleSelector field:

Example 4: Setting RadPropertyGrid's GroupStyleSelector property

<telerik:RadPropertyGrid x:Name="PropertyGrid"  
                     RenderMode="Flat"    
                     IsGrouped="True" 
                     GroupStyleSelector="{StaticResource groupStyleSelector}" 
                     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> 

The RadPropertyGrid should have the following appearance after the applied changes:

If you are using Implicit Themes, you should base the style on the one defined for the corresponding theme.

See Also

• Group Style

• Templates Structure

• Property Grid Styles And Templates