WPF GridColumnHeader Background Property cannot be set-CodePudding

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>

CodePudding user response：

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">