Setting ColumnHeader Background removes sort arrows

Oct 13, 2008 at 8:03 PM
Hi All,

I have the following sample style defined for grid column headers:



Style x:Key="RedHeader"
TargetType="{x:Type dg:DataGridColumnHeader}"
BasedOn="{StaticResource {x:Type dg:DataGridColumnHeader}}">
<Setter Property="Background" Value="Red" />

When applied this seems to work and headers are painted red, but sorting arrows from the default implementation are gone. This happens with any background that I set, even transparent.
Anyone has this problem or can explain what's going on?



Oct 16, 2008 at 1:42 PM
This is a bug that unfortunately will not be able to be addressed in the v1 release but will be addressed in vNext.  For performance reasons the arrow for the column header was created on render so it was not made extensible.  There are some ways to work around it.  Here is one possible solution:



<Style x:Key="defaultColumnHeaderStyle" TargetType="{x:Type toolkitprimitives:DataGridColumnHeader}"> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="ContentTemplate">
                <StackPanel Background="Red" > 
                    <TextBlock Text="{Binding}" />

Of course you will still see the default border color for the DataGridHeaderBorder but you will still retain the arrow.  Another solution would be to completely replace the ControlTemplate.  A DataGridColumnHeader is basically a Button with thumb grippers on the left and right sides.  Or you can just have the ContentTemplate take up the entire space and then just implement a custom arrow. 

Oct 25, 2008 at 11:58 AM

I have been trying to replace the ControlTemplate as suggested but I still don't seem to be able to retain the arrow when I change the colour of background in the DataGridHeaderBorder. Could you provide some more detail as to how to accomplish this please?


Oct 30, 2008 at 1:01 PM
You mean the ContentTemplate, not the ControlTemplate correct?  If you follow the sample I have above, it is not the background of the HeaderBorder that needs to be changed.  It is whatever is in the datatemplate.

If you are relpacing the complete ControlTemplate, could you show me a code snippet.
Oct 30, 2008 at 1:22 PM

I was actually referring to the ControlTemplate - in your first reply you mention that 'another solution would be to...'. This is what I was trying to do. First of all I copied the complete template into my own ContorlTemplate and then I tried making changes to various components to try and get a different colour header whilst retaining the sort arrows. Unfortunately I couldn't get it to work. I do not have my code to hand right now, but I can post it later today if necessary.


Oct 31, 2008 at 5:05 PM

Basically I have copied the ControlTemplate for the DataGridColumnHeader and have been trying making changes to that template in order to change the colour of the column header, including the border where the sort arrow lives. Whatever I do I always lose the sort arrow. Am I looking at the right ControlTemplate? Can you explain how to achieve this by replacing the ControlTemplate?

Even though you have made it widely available I wasn't sure if I should paste the code from the ControlTemplate in this forum, I'm sure you're familiar with it anyway!

Nov 2, 2008 at 6:35 PM
You might use style at
And modify it as you neded. It works!
Nov 2, 2008 at 8:08 PM
Thanks Lena123 - I had just spotted that and was trying it. You're right it does just what I want.