Edit this page

Styling Group Panel

Before reading this topic, you might find it useful to get familiar with the Template Structure of the GridViewGroupPanel and GridViewGroupPanelItem.

In this article we will discuss the following topics:

Figure 1: GridViewGroupPanel template structure

GridViewCell template structure

Figure 2: GridViewGroupPanelItem template structure

GridViewCell template structure

Figure 3: GridViewGroupPanelCell template structure

GridViewCell template structure

Targeting the GridViewGroupPanel Element

In order to style all RadGridView group panels of an application, you should create an appropriate style targeting the GridViewGroupPanel element.

You have two options:

  • To create an empty style and set it up on your own.

  • To copy the default style of the control and modify it.

To learn how to modify the default GridViewGroupPanel style, please refer to the Modifying Default Styles article.

[XAML] Example 1: Styling all group panels of an application

<Style TargetType="{x:Type telerik:GridViewGroupPanel}">
    <Setter Property="MinHeight" Value="50"/>
    <Setter Property="BorderThickness" Value="3"/>
</Style>

If you're using Implicit Styles, you should base your style on the GridViewGroupPanelStyle.

Targeting the GridViewGroupPanelItem Element

You could also style all group panel items by creating a style, targeting the GridViewPanelItem element, like so:

[XAML] Example 2: Styling all group panel items of an application

<Style TargetType="{x:Type telerik:GridViewGroupPanelItem}">
    <Setter Property="Padding" Value="10"/>
    <Setter Property="FontSize" Value="20" />
</Style>

If you're using Implicit Styles, you should base your style on the GridViewGroupPanelItemStyle.

Targeting the GridViewGroupPanelCell Element

The GridViewGroupPanelItem wraps the GridViewGroupPanelCell control, which represents the visual item in the Group Panel. If you want to style it, you should create the appropriate style, targeting the GridViewGroupPanelCell element.

[XAML] Example 3: Styling the GridViewGroupPanelCell element

<Style TargetType="{x:Type telerik:GridViewGroupPanelCell}">
    <Setter Property="Background" Value="Red" />
    <Setter Property="BorderBrush" Value="Yellow" />
    <Setter Property="BorderThickness" Value="2" />
</Style>

If you're using Implicit Styles, you should base your style on the GridViewGroupPanelCellStyle.

Setting RadGridView's GroupPanelStyle and GroupPanelItemStyle

RadGridView exposes two properties of type Style - GroupPanelStyle and GroupPanelItemStyle. They are applied to the Group Panel and its items.

[XAML] Example 4: Setting RadGridView's GroupPanelStyle and GroupPanelItemStyle

<telerik:RadGridView GroupPanelStyle="{StaticResource GroupPanelStyle}"
GroupPanelItemStyle="{StaticResource GroupPanelItemStyle}" />

Figure 4: RadGridView with styled group panel

RadGridView with styled group panel

GroupPanelForeground and GroupPanelBackground

A simple way to change the group panel's foreground and background is through RadGridView's GroupPanelForeground and GroupPanelBackground properties. Example 5 shows how this can be done.

[XAML] Example 5: Setting RadGridView's GroupPanelForeground and GroupPanelBackground

<telerik:RadGridView GroupPanelForeground="White"
GroupPanelBackground="Blue" />

See Also