Is it possible to stop the vertical scrollbar from pushing the DataGrid columns/header to the left?

Question

Is it possible to stop the vertical scrollbar from pushing the DataGrid columns/header to the left? (See picture)

Alternatively, is it possible to style the small circled area so it doesn't just show up as a white square?

Answer 1

Please use the following template (the ColumnSpan does the trick):

        <Style x:Key="{x:Type DataGridColumnHeadersPresenter}" TargetType="{x:Type DataGridColumnHeadersPresenter}">
            <Setter Property="Grid.ColumnSpan" Value="2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                        <Grid>
                            <DataGridColumnHeader IsHitTestVisible="False" Name="PART_FillerColumnHeader"/>
                            <ItemsPresenter/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

The colour of that rectangle above the scrollbar is the Background property of the DataGrid. So, for example, if you wanted to make it yellow you can set

<DataGrid Background="Yellow" ...

The downside of this (potentially) is that the background then affects your whole DataGrid, including any space not taken up by data rows:

One solution, if you wanted the rectangle in question to be yellow but not the space below the data rows, might be to design a custom brush that rendered yellow for a strip the same width as the column headers, and white for the remainder.