Edit this page

Styling Column Headers

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

In this article we will discuss the following topics:

Figure 1: GridViewHeaderCell template structure

RadGridView template structure

Targeting the GridViewHeaderCell element

In order to style all header cells in your application, you should create an appropriate style targeting the GridViewHeaderCell 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 GridViewHeaderCell style, please refer to the Modifying Default Styles article.

[XAML] Example 1: Styling all header cells of an application

    <Style TargetType="telerik:GridViewHeaderCell">
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
    </Style>

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

Setting a Column's HeaderCellStyle

RadGridView header cells can also be styled by creating an appropriate Style for the GridViewHeaderCell element and setting it as the HeaderCellStyle property of the respective GridView Column.

[XAML] Example 2: Setting a column's HeaderCellStyle

<telerik:GridViewDataColumn Header="ID"
                            DataMemberBinding="{Binding EmployeeID}"
                            HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}" />

Figure 2: RadGridView with styled header cells

RadGridView with styled header cells

See Also