How to Fix Blank Spot where Scrollbar Meets ColumnHeader of DataGrid?

Question

I am using the WPF DataGrid to display some data, when I have enough lines a scrollbar appears. At the top of the scrollbar, where it meets the DataGrid ColumnHeader there is blank square that I would like to fill with ideally the ColumnHeader or anything else that would look more pleasing.

How can I achieve this?

The following is the code I'm using.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition />
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <DataGrid x:Name="DataGrid"
                  ItemsSource="{Binding ProfilesDataGrid}"
                  Style="{StaticResource DataGrid_Style}"
                  CellStyle="{StaticResource DataGridCell_Style}"
                  RowStyle="{StaticResource DataGridRow_Style}"
                  RowHeaderStyle="{StaticResource DataGridRowHeader_Style}"
                  ColumnHeaderStyle="{StaticResource DataGridColHeader_Style}">

            <!-- Data Grid Columns -->
            <DataGrid.Columns>
                <DataGridTextColumn Header="Status" 
                                    Binding = "{Binding ProfileStatus}"
                                    Width="50"
                                    ElementStyle="{StaticResource DataGridCellCenter_Style}"/>
                <DataGridTextColumn Header="Profile" 
                                    Binding = "{Binding ProfileName}"
                                    MinWidth="125"/>
                <DataGridTextColumn Header="Email" 
                                    Binding = "{Binding ProfileEmail}"
                                    Width="*"/>
                <DataGridTemplateColumn Header=""
                                        Width="60">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button x:Name="EditProfileButton"
                                        BorderThickness="0"
                                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                                    <Image Source="../Resources/Images/icon_edit.png"/>
                                </Button>
                                <Button x:Name="DeleteProfileButton"
                                        BorderThickness="0"
                                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                                    <Image Source="../Resources/Images/icon_delete.png"/>
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Grid>

I've seen another post address this with ScrollContentPresenter but I cannot use that since I am using ItemSource (if you know why this is I would appreciate knowing that as well!).

Here are my Stylings as well if relevant.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Data Grid -->
    <Style x:Key="DataGrid_Style" TargetType="{x:Type DataGrid}">
        <Setter Property="Foreground" Value="WhiteSmoke"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
        <Setter Property="CanUserReorderColumns" Value="False"/>
        <Setter Property="CanUserResizeColumns" Value="False"/>
        <Setter Property="CanUserResizeRows" Value="False"/>
        <Setter Property="CanUserAddRows" Value="False"/>
        <Setter Property="CanUserDeleteRows" Value="False"/>
        <Setter Property="IsReadOnly" Value="True"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="500"/>
        <Setter Property="Margin" Value="50 20"/>
        <Setter Property="BorderBrush" Value="#343b48"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="GridLinesVisibility" Value="All"/>
        <Setter Property="SelectionMode" Value="Single"/>
        <Setter Property="SelectionUnit" Value="FullRow"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#2c313c"/>
        <Setter Property="VerticalGridLinesBrush" Value="#2c313c"/>
    </Style>

    <!-- Cell -->
    <Style x:Key="DataGridCell_Style" TargetType="{x:Type DataGridCell}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>

    <!-- Row -->
    <Style x:Key="DataGridRow_Style" TargetType="{x:Type DataGridRow}">
        <Setter Property="Background" Value="#343b48"/>
        <Setter Property="Height" Value="25" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#839096"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- Row Header -->
    <Style x:Key="DataGridRowHeader_Style" TargetType="{x:Type DataGridRowHeader}">
        <Setter Property="Width" Value="0"/>
    </Style>

    <!-- Column Header -->
    <Style x:Key="DataGridColHeader_Style" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Background" Value="#1a95d4"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Height" Value="25"/>
    </Style>
    
    <!-- Cell Centered -->
    <Style x:Key="DataGridCellCenter_Style" TargetType="{x:Type TextBlock}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
</ResourceDictionary>

Answer 1

You could set the Background of the DataGrid itself to the same Brush as you use for the DataGridColumnHeader:

<Style x:Key="DataGrid_Style" TargetType="{x:Type DataGrid}">
    <Setter Property="Foreground" Value="WhiteSmoke"/>
    <Setter Property="Background" Value="#1a95d4"/>
    ...