How to add back the sort arrow after applying background of Column headers

Question

After applying background color to columnheaders, the sort arrow is missing. How to add it back?

Answer 1

I think you're gonna have to re-template the DataGridColumnHeader and add it from there. Here's an example. You're gonna have to add a reference to PresentationFramework.Aero

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

<DataGrid ...>
    <DataGrid.Resources>
        <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 TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Grid>
                            <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Path x:Name="SortArrow"
                                            Grid.Column="1"
                                            HorizontalAlignment="Right" VerticalAlignment="Center"                                           
                                            Width="8" Height="6" Margin="2,0,5,0"
                                            Stretch="Fill" Opacity="0.5" Fill="White"
                                            RenderTransformOrigin="0.5,0.4"
                                            Visibility="Collapsed"
                                            Data="M0,0 L1,0 0.5,1 z" />
                                </Grid>
                            </Themes:DataGridHeaderBorder>
                            <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                            <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="SortDirection" Value="Ascending">
                                <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                                <Setter TargetName="SortArrow" Property="RenderTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Descending">
                                <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
</DataGrid>

Answer 2

Here is a blog post that breaks down the template process for the DataGridColumnHeader very well and provides a visual of the result. Blog post by Terry Hutt

his demonstrates the default column header. Click on the column headers to resort the columns. You can also resequence the columns by dragging the header and resize them by dragging hidden thumbs at either end of the header The header itself obviously a button with an optional sort indicator above the text. It looks pretty nasty.

Let's try to change the background of the header so it isn't so obviously a button. The DataGrid has a ColumnHeaderStyle attribute. We could use that but for simplicity let's create a default style for our column headers by adding this to the XAML...

<Window.Resources>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Background" Value="LightGray"/>
    </Style>
</Window.Resources>

If you run the project with the new style the header looks much better. But wait - where did our sort indicators go? It turns out that the DataGridColumnHeader is deliberately styled so that the sort indicator is hidden if you change the background color. Sometimes I just don't understand how Microsoft stays in business. Why would you style such an ugly control and then break other critical functionality when the developer tries to fix it.

We have to re-template the DataGridColumnHeader. While we're in there, lets have some fun! This is what we're going to do...

Change the background color Use a border to create an underline Change the color of the border when the mouse is over the header Move the sort indicator to the side of the header text instead of above Make the column width thumbs invisible but change the cursor when it's over them

Step 1 - Beef the style up so it looks like this...

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="Cursor" Value="Hand"/>
</Style>

Step 2 - Write the ControlTemplate that defines the header area, the sort indicator, the border, and the thumbs. The Grid controls the layout of the header, with the Content area on the left and the Sort Indicator on the right. Note the Sort Indicator is defined using a Path. The two rectangles produce a visible left and right edge for the column headers. The Thumbs must be defined and allow the user to resize the columns. We will define the ThumbStyle later. Notice the name of the Border. We need this so we can alter it using triggers in step 3. Add this before the closing Style tag.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border x:Name="BackgroundBorder" BorderThickness="0,0,0,2"
                        Background="LightGray"
                        BorderBrush="Black"
                        Grid.ColumnSpan="2"/>
                <ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center"/>
                <Path x:Name="SortArrow" Visibility="Collapsed" Data="M 0,0 L 1,0 0.5,1 z" Stretch="Fill"
                     Grid.Column="1" Width="8" Height="6" Fill="Black" Margin="0,0,8,0"
                      VerticalAlignment="Center" RenderTransformOrigin="0.5, 0.4"/>
                <Rectangle Width="1" Fill="#EEEEEE" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                <Rectangle Width="1" Margin="0,0,1,0" Fill="#DDDDDD" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ThumbStyle}"/>
                <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource ThumbStyle}"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Step 3 - Add triggers to change the color of the border when the mouse moves over the column header. Add the following triggers after the Grid closing tag.

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="BackgroundBorder" Property="Background" Value="LightGray"/>
        <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Orange"/>
    </Trigger>
</ControlTemplate.Triggers>

Step 4 - Add triggers to display and/or rotate the Sort Indicator when the column is sorted.

<Trigger Property="SortDirection" Value="Ascending">
    <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
    <Setter TargetName="SortArrow" Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="180"/>
        </Setter.Value>
    </Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
    <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
</Trigger>

Step 5 - Hide the LeftHeaderGripper in column 0 - we don't need it.

<Trigger Property="DisplayIndex" Value="0">
    <Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed"/>
</Trigger>

As promised, here is the ThumbStyle definition. Insert it above the DataGridColumnHeader style. I use an invisible rectangle with a cursor of SizeWE. You could color it or use something completely different if you chose.

<Style TargetType="{x:Type Thumb}" x:Key="ThumbStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle Width="1" Stroke="Transparent" Cursor="SizeWE"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

** **UPDATE: Style Entries Combined Together **

<FontFamily x:Key="Corp_FontFamily">Segoe UI</FontFamily>
<clr:Double x:Key="Corp_FontSize">13</clr:Double>
<Style TargetType="{x:Type Control}" x:Key="baseStyle">
    <Setter Property="FontFamily" Value="{StaticResource Corp_FontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource Corp_FontSize}" />
</Style>

<Color x:Key="CorpBlue_T1S1" A="255" R="172" G="180" B="196"/>
<SolidColorBrush x:Key="Brush_CorpBlue_T1S1" Color="{StaticResource CorpBlue_T1S1}"/>

<Color x:Key="CLR_Green" A="255" R="220" G="239" B="202"/>
<SolidColorBrush x:Key="YourCompany_HeaderColumnDefaultBackground" Color="{StaticResource CLR_Green}"/>

<Style TargetType="DataGridColumnHeader" x:Key="DG_Hdr_Base" BasedOn="{StaticResource baseStyle}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="Background" Value="{StaticResource YourCompany_HeaderColumnDefaultBackground}"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="BorderThickness" Value="0 0 1 0"/>
    <Setter Property="BorderBrush" Value="DarkGray"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DataGridColumnHeader">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="BackgroundBorder" BorderThickness="0,0,0,2"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Grid.ColumnSpan="2"/>
                    <ContentPresenter Margin="5" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    <Path x:Name="SortArrow" Visibility="Collapsed" Data="M 0,0 L 1,0 0.5,1 z" Stretch="Fill"
                         Grid.Column="1" Width="8" Height="6" Fill="Black" Margin="0,0,8,0"
                          VerticalAlignment="Center" RenderTransformOrigin="0.5, 0.4"/>
                    <Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                    <Rectangle Width="1" Margin="0,0,1,0" Fill="DarkGray" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ThumbStyle}"/>
                    <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource ThumbStyle}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource Brush_CorpBlue_T1S1}"/>
                        <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ControlHighlightBorderBrush}"/>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Ascending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="SortArrow" Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Descending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="DisplayIndex" Value="0">
                        <Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 3

There may be better solutions, but I simply appended the character ▴ or ▾ to the column header based on sort direction.