Color custom header DataGrid

Question

I made a layout table where two columns are combined into one. It looks like this:

Here's my XAML code, it's pretty basic:

    <DataGrid x:Name="ReportTable" AutoGenerateColumns="False" ItemsSource="{Binding Report}"
              CanUserResizeRows="False" SelectionMode="Single" IsReadOnly="True" HorizontalScrollBarVisibility="Disabled" HeadersVisibility="Column">
                <DataGridTextColumn ElementStyle="{StaticResource WrapText}" IsReadOnly="true" Header="TEST1" Width="*">
                <DataGridTextColumn.HeaderStyle>
                    <Style TargetType="DataGridColumnHeader">
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding}"></TextBlock>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </DataGridTextColumn.HeaderStyle>
            </DataGridTextColumn>
            <DataGridTemplateColumn Width="*">
                <DataGridTemplateColumn.HeaderStyle>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                        <Setter Property="Background" Value="{DynamicResource GridViewColumnHeaderBackground}"/>
                        <Setter Property="Margin" Value="4"/>
                    </Style>
                </DataGridTemplateColumn.HeaderStyle>
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <Border BorderBrush="{DynamicResource GridViewColumnHeaderBorderBackground}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.5*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="0.5*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.ColumnSpan="3" Text="TEST2_1" TextAlignment="Center" Margin="5,5,5,5"/>
                                <Separator Background="{DynamicResource GridViewColumnHeaderBorderBackground}" Grid.ColumnSpan="3" Grid.Row="1" Margin="-4,0,-4,0"/>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"  Text="TEST2_2_1" TextAlignment="Center" Margin="5,5,5,5"/>
                                <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                                    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="{DynamicResource GridViewColumnHeaderBorderBackground}" Margin="0, -3,0,-3"/>
                                </StackPanel>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.Row="2" Grid.Column="2" Text="TEST2_2_2" TextAlignment="Center" Margin="5,5,5,5" />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
            </DataGridTemplateColumn>
           </DataGrid>

The only thing I haven't been able to achieve is the background colors of the header of the merged columns like a standard column. I think the screenshot will better display the situation:

The first column background color header - gradient, the second - white fill.

As you can see, the first column has one background color, and the second one is strange, it is not distributed throughout the header. How to achieve the desired?

Answer 1

<DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        <Setter Property="Background" Value="{DynamicResource GridViewColumnHeaderBackground}"/>

        <Setter Property="Margin" Value="4"/>
    </Style>
</DataGridTemplateColumn.HeaderStyle>

you changed Background of the Template column. it is different somehow. remove Background setter, and both headers will have the same color