GridViewDataColumn header content foreground color not matching the sort color

[Brad]

When creating a GridViewDataColumn for a RadGridView to use sometimes I want to add custom content for the header in addition to text.

<telerik:RadGridView Grid.Row="2" AutoGenerateColumns="False" >
      <telerik:RadGridView.Items>
          <TextBlock Text="1" />
          <TextBlock Text="2" />
          <TextBlock Text="3" />
      </telerik:RadGridView.Items>
      <telerik:RadGridView.Columns>
         <telerik:GridViewDataColumn Width="80"
                            HeaderTextAlignment="Center"
                            TextAlignment="Center"
                            IsFilterable="False"
                            DataMemberBinding="{Binding Path=Text}">
    <telerik:GridViewDataColumn.Header>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Queued"
                       TextAlignment="Center"
                       VerticalAlignment="Center"
                       ToolTipService.ToolTip="The time elapsed" />
            <Path Grid.Column="1"
                  Data="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"
                  Stroke="#1C274C"
                  Width="12"
                  Height="12"
                  Stretch="Fill" />
        </Grid>
    </telerik:GridViewDataColumn.Header>
</telerik:GridViewDataColumn>
      </telerik:RadGridView.Columns>
  </telerik:RadGridView>

The issue is that when the column is sorted the header color is supposed to change to white (I am using the VisualStudio2019Theme)

This behavior breaks when the header is specified in this way so I was wondering what the best way to restore normal behavior is.

[Masha]

Hello Brad,

To achieve the desired approach you need to create style triggers for both the Ascending and Descending states of the GridViewHeaderCell style. After that, simply set a binding to the TexbtBlock's foreground and the header cell will get the desired color. 

 <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellStyle}">
     <Style.Triggers>
         <Trigger Property="SortingState" Value="Descending">
             <Setter Property="Foreground" Value="{telerik:VisualStudio2019Resource ResourceKey=MarkerInvertedBrush}" />
         </Trigger>
         <Trigger Property="SortingState" Value="Ascending">
             <Setter Property="Foreground" Value="{telerik:VisualStudio2019Resource ResourceKey=MarkerInvertedBrush}" />
         </Trigger>
     </Style.Triggers>
 </Style>
<telerik:RadGridView Grid.Row="1"  Name="clubsGrid" RowHeight="40" ItemsSource="{Binding Clubs}">
    <telerik:RadGridView.Columns>
     ...
     <TextBlock Text="Queued" TextAlignment="Center"
                       VerticalAlignment="Center"
                       Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:GridViewHeaderCell}}}" />
     ...
 </telerik:RadGridView>

I hope it helps.

Regards,
Masha
Progress Telerik

[Brad]

Hi Masha,

The solution you have provided does solve the problem however I wonder if having to restyle the header cell on every column is efficient. Also it seems strange that the header cell doesn't already have this behavior by default.

The visual studio 2019 theme sets the foreground property of the ContentControl within the header instead of the header itself so you could achieve the same behavior without restyling the header cell using the following code.

<TextBlock Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ContentControl}}}" />

I am interested to hear your thoughts on this but either way I have a solution now so thank you.

[Masha]

Hi Brad,

Absolutely, I'm in complete agreement with you. It would greatly improve the user experience if the foreground is updated globally when the SortingState changes. I've already had a discussion with our development team, and we're committed to implementing this as soon as we can.

Thank you for bringing this to our attention!

Regards,
Masha
Progress Telerik