Highlight DataGrid column header when mouse overing

Question

If I set CanUserSort to false in a DataGridTextColumn (or in a DataGridTemplateColumn) because I want to do the sorting manually, when I place the mouse over the column header, it doesn't highlight anymore.

Here are both examples:

How can I force that behaviour?

Answer 1

As per Microsoft documentation, when the DataGridHeaderBorder.IsClickable property is false, the hover appearance will not be applied, even when DataGridHeaderBorder.IsHovered value is true (source). So in order to keep the hover appearance, the IsClickable property must be true.

The default style of the DataGridColumnHeader uses a template binding which binds its IsClickable property to the CanUserSort property of the column. So if you wish to maintain the hover appearance using the default style, you must set CanUserSort = true in order to make IsClickable = true. However, if you don't want to allow user sorting, then using the default style is probably not the best option.

One way to solve the problem is to use a modified style for the DataGridColumnHeader. You can take a copy of the default style and adjust how the IsClickable property is set. Instead of making IsClickable dependent on CanUserSort, it can be set directly to true. This allows the hover appearance to persist even when user sorting is disabled. The XAML for the modified style is as follows:

<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Width" Value="8"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="SizeWE"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Background="{TemplateBinding Background}"
                Padding="{TemplateBinding Padding}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Grid>
                    <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}"
                                                 BorderThickness="{TemplateBinding BorderThickness}"
                                                 Background="{TemplateBinding Background}"
                                                 IsClickable="True"
                                                 IsPressed="{TemplateBinding IsPressed}"
                                                 IsHovered="{TemplateBinding IsMouseOver}"
                                                 Padding="{TemplateBinding Padding}"
                                                 SortDirection="{TemplateBinding SortDirection}"
                                                 SeparatorBrush="{TemplateBinding SeparatorBrush}"
                                                 SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Themes:DataGridHeaderBorder>
                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Make sure you reference the "Themes" namespace in your XAML as follows:

xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

Finally, wherever you define the DataGridColumn, make sure to reference this style such as the following:

<DataGridTemplateColumn Width="*" HeaderStyle="{StaticResource DataGridColumnHeaderStyle}"/> 

Answer 2

You can do it in 2 ways:

1. Set CanUserSort to True but canel sorting on Sorting event of the datagrid by:

   e.Handled = true;

2. Retemplate DataGridColumnHeader - add mouseover trigger to highlight header.