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.

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=UserControl}}" 
           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.