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

Question

Is it possible to stop the vertical scrollbar from pushing the columns / headers of the DataGrid to the left? (See Figure)

Alternatively, is it possible to style a small circled area so that it does not just display as a white square?

Answer 1

The color of this rectangle above the scrollbar is the Background property of the DataGrid. So, for example, if you want to make it yellow, you can set

<DataGrid Background="Yellow" ... 

The disadvantage of this (potentially) is that the background affects your entire DataGrid, including any space not occupied by data rows:

One solution, if you want the rectangle in question to be yellow rather than a space below the data rows, could be to create a custom brush that would be yellow for a strip with the same width as the column headers and white colors for the rest.

Answer 2

Please use the following pattern (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 3

Not sure if this helps, but one approach that I have used in the past to separate the columns from my headings and present them separately.

Column definitions are defined in resources:

  <UserControl.Resources> <ResourceDictionary> <GridViewColumnCollection x:Key="siColumnCollection"> <GridViewColumn> <GridViewColumn.CellTemplate> <DataTemplate> ... </DataTemplate> </GridViewColumn.CellTemplate> <GridViewColumnHeader Content="Fish"/> </GridViewColumn> ... 

Then the headers and the list are displayed separately, both refer to the same resource:

 <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <GridViewHeaderRowPresenter Columns="{StaticResource siColumnCollection}"/> <ListView Grid.Row="1" ItemsSource="{Binding ViewModelList}"> <ListView.Resources> <DataTemplate x:Key="siNormalRowTemplate"> <GridViewRowPresenter Columns="{StaticResource siColumnCollection}"/> </DataTemplate> </ListView.Resources> </ListView> </Grid> 

(I cannot promise that this XAML works exactly as it is written, but it gives you an idea).

The advantage of this scheme is that you can process the headers and the main part of the list separately. Therefore, if you want to insert some filler right after the GridViewHeaderRowPresenter, you can do it.

Change This solution works if you have a GridView, but unfortunately it does not work for a DataGrid. I do not see an equivalent way to separate the header and rows in the DataGrid, so this answer will only work if you are ready to change the DataGrid for the GridView. Sorry!