How to make WPF DataGrid Column Header transparent

Question

Hi,

I am trying to make the column header of my WPF Datagrid to be transparent.

I am able to set it to a color without problem, but I can't have it transparent. Here is what I tried:

<Style x:Key="DatagridColumnHeaderStyle" TargetType="{x:Type tk:DataGridColumnHeader}">
   <Setter Property="Background" Value="Transparent" />
   <Setter Property="Foreground" Value="#C2C4C6" />
</Style>

<Style x:Key="DashboardGridStyle" TargetType="{x:Type tk:DataGrid}">
   <Setter Property="ColumnHeaderStyle" Value="{StaticResource DatagridColumnHeaderStyle}" />
   <Setter Property="Background" Value="Transparent" />
   <Setter Property="RowBackground" Value="Transparent" />
</Style>

<tk:DataGrid Style="{StaticResource DashboardGridStyle}" >
...
</tk:DataGrid>

With this code, it seems to take the default brush.

What am I missing?

Answer 1

Hi, I used Snoop to take a look at what was happening. It seems that another DataGridColumnHeader is always created behind the one you can modify, and it's not affected by changes on styles. When you set a transparent background, in fact is being correctly applied, so what you see is that ghost header behind (which has the usual grey background).

If you apply a coloured background and play with Opacity, you will see how the two colours are mixed. I don't know if this can be solved.

Answer 2

With the answer from Natxo (thanks!), I was able to find a solution. And it is a simple one too!

Knowing that there was another DataGridColumnHeader behind the one we can modify through the ColumnHeaderStyle, I just had to set a style that will affect all DataGridColumnHeader:

<Style TargetType="{x:Type tk:DataGridColumnHeader}">
   <Setter Property="Background" Value="Transparent" />
</Style>

Answer 3

thanks guys it very helped