Edit this page

Foreground color does not change in a custom header

PROBLEM

You declare a custom header for a column (Example 1):

Example 1: Initial declaration of a custom header

<telerik:GridViewDataColumn.Header>
    <TextBlock Text="My Custom Header"
TextWrapping="Wrap" />
</telerik:GridViewDataColumn.Header>

As a result, the Foreground color of the custom header does not change on mouse hover (Figure 1 ), sorting, etc.

Figure 1: The Foreground color of the custom header does not change, when the column is hovered.

gridview-troubleshooting-styling-custom-header-Problem

CAUSE

Your custom header is not automatically bound to the default theme's Foreground color.

SOLUTION

You can bind the Foreground property of the custom header(in this example this is a TextBlock) to the Foreground property of the control containing the content of the GridViewHeaderCell(Example 2 ). In this case the container is a ContentControl with x:Name="ContentPresenter", which is located in the default GridViewHeaderCellTemplate. You can observe the result in Figure 2.

Example 2: Final declaration of a custom header

<telerik:GridViewDataColumn.Header>
    <TextBlock Foreground="{Binding Foreground,
                  RelativeSource={RelativeSource AncestorType={x:Type ContentControl}}}"
Text="My Custom Header"
TextWrapping="Wrap" />
</telerik:GridViewDataColumn.Header>

Figure 2: The Foreground color of the custom header now changes, when the column is hovered.
gridview-troubleshooting-styling-custom-header-Solution