Prevent content to scroll - wpf

Question

Essentially I've a DataGrid with multiple headers, in wpf there is no control that implement this so I've implemented my own solution.
The control look like this:
[Header1 ][Header2][Header3][Header4 ]
[column 1][column2][Column3][Column4][Column5][Column6]
so as you can see under specific column I've a header that group x columns.
This is my implementation:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="{Binding Path=Width, ElementName=RankingsHalfTime}">
<!-- multiple headers -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=HalfColumn0, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn1, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn2, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn3, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn4, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn5, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn6, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn7, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn8, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn9, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn10, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn11, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn12, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn13, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn14, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn15, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn16, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn17, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn18, Path=ActualWidth}"/>
<ColumnDefinition Width="{Binding ElementName=HalfColumn19, Path=ActualWidth}"/>
</Grid.ColumnDefinitions>
<!-- Multiple Headers-->
<Border Grid.Column="2" Grid.ColumnSpan="6" BorderThickness="1 1 1 1" Margin="-1 0 -1 0">
<Label TextBlock.FontWeight='Bold' Background="WhiteSmoke" Content="Header 1" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="8" Grid.ColumnSpan="6" BorderThickness="1 1 1 1" Margin="0 0 -2 0">
<Label TextBlock.FontWeight='Bold' Background="WhiteSmoke" HorizontalAlignment="Center">Header 2</Label>
</Border>
</Grid>
<DataGrid AutoGenerateColumns="False"
CanUserAddRows="false" Grid.Column="1" Grid.Row="1"
RowStyle="{StaticResource CustomRowStyle}"
ItemsSource="{Binding RankingController.RankingsHalfTime}"
IsReadOnly="True" x:Name="RankingsHalfTime" >
<DataGrid.Columns>
<DataGridTextColumn Header="0" x:Name="HalfColumn0" Binding="{Binding Position}"/>
<DataGridTextColumn Header="1" x:Name="HalfColumn1" Binding="{Binding Team}" Width="200" />
<DataGridTextColumn Header="2" x:Name="HalfColumn2" />
<DataGridTextColumn Header="3" x:Name="HalfColumn3" />
<DataGridTextColumn Header="4" x:Name="HalfColumn4" />
<DataGridTextColumn Header="5" x:Name="HalfColumn5" />
<DataGridTextColumn Header="6" x:Name="HalfColumn6" />
<DataGridTextColumn Header="7" x:Name="HalfColumn7" />
<DataGridTextColumn Header="8" x:Name="HalfColumn8"/>
<DataGridTextColumn Header="9" x:Name="HalfColumn9" />
<DataGridTextColumn Header="10" x:Name="HalfColumn10" />
<DataGridTextColumn Header="12" x:Name="HalfColumn11" />
<DataGridTextColumn Header="12" x:Name="HalfColumn12" />
<DataGridTextColumn Header="13" x:Name="HalfColumn13" />
</DataGrid.Columns>
</DataGrid>
</Grid>
The code working pretty well, the result that I want is achieved successfully, but there is a problem:
when the window is resized, the DataGrid display an horizontal scrollbar, this will bug the logic of multiple headers, infact, when the user move the horizontal scrollbar, the multiple header doesn't keep fixed to the original position, so the final result is this (when I move the scrollbar):
[Header1 ][Header2][Header3][Header4 ]
[column 1][column2][Column3][Column4][Column5][Column6]
[scrollbar ]
I'm looking for a way to prevent multiple header scrolling and keep them to stuck at the original position. You can try my code for a better practice explanation.