WPF GridColumnHeader Background Property cannot be set - wpf

Question

i'm trying to set the Background of the Column Header to a dark grey color (#6A767D) but it doesn´t work. Instead the Header Background is the Color of the AlternatingRowBackground Property. Maybe the Background is somehow overwritten? I'm not sure if you need more than just the xaml-code of the data grid. Any suggestions?
<DataGrid x:Name="DataGrid"
AlternatingRowBackground="#F8F8F8" Margin="40,60,40,45"
Grid.Column="2" Grid.ColumnSpan="10"
Grid.Row="1" Grid.RowSpan="12"
RowHeight="47"
ColumnHeaderHeight="47"
Padding="0"
FontSize="18"
ColumnWidth="Auto"
HorizontalScrollBarVisibility="Visible"
AutoGenerateColumns ="False"
GridLinesVisibility="All"
SelectionUnit="Cell"
ContextMenu="{StaticResource ctMenu}">
<DataGrid.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="AliceBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</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.RowStyle>
<Style TargetType="DataGridRow">
<EventSetter Event="MouseUp" Handler="Row_Click"/>
</Style>
</DataGrid.RowStyle>

Answer 1

Two issues:
You never actually assign the style to be used. I would recommend you define the style in the resources of your Window or whatever panel the DataGrid is placed in.
<Window.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="{TemplateBinding Background}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</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>
</Window.Resources>
You can then assign it to your DataGrid like this:
<DataGrid ColumnHeaderStyle="{StaticResource DatagridColumnHeaderStyle_Basic}"/>
Alternatively, just remove x:Key="DatagridColumnHeaderStyle_Basic", then you don't have to specify.
(fixed for you in the above code) you override your Background with AliceBlue:
<Grid Name="HedearGrid" Background="AliceBlue">
should be:
<Grid Name="HedearGrid" Background="{TemplateBinding Background">