Horizontal Scrolling Issue

Question

I'm new to WPF and I'm trying to create an dashboard interface for an app I'm developing. My problem is as follows;

I have a datagrid which will contain my data. This datagrid is inside a grid because I needed superheaders over particular sections. I inserted a test row into the data table and it shows up fine, but the datagrid element inside the grid seems to have its own scrollbar. Both the super header row and the datagrid row extend off the window but only the datagrid row scrolls. The 2 visible super headers stay in the same place while the datagrid row scrolls. Below is my xaml code to generate the interface. I have tried wrapping the grid in a scrollviewer and also setting the horizontal scrollbar of the row with the super headers to visible but nothing has worked so far. If I can get the super headers to scroll at all at least I can try to make an event handler to move the super headers when the datagrid scrollbar is moved. Sorry if this seems kinda garbled but I haven't had my coffee yet and I also have a migraine, 2 of the best things for a programmer to experience. Thanks in advance

<Canvas HorizontalAlignment="Center" Height="508" VerticalAlignment="Top" Width="1366" Margin="-4,4,2,-7">

    <Grid Canvas.Top="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" ScrollViewer.CanContentScroll="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding ElementName=grid, Path=RowHeaderWidth}" />
                <ColumnDefinition Width="{Binding ElementName=TypeCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=NCRCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=StatusCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PStkCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=DfStkCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=QtyCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=DfCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=DfDateCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=b1, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CCodeCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=ByCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=InvAssignCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=InvCommentsCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=b2, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CStepNoCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CActionCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CAssignCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CReqCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=CComplCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=MCostCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=LabourCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=b3, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PStepCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PActionCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PAssignedCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PReqCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PCompCol, Path=ActualWidth}" />
                <ColumnDefinition Width="{Binding ElementName=PDateCol, Path=ActualWidth}" />
            </Grid.ColumnDefinitions>

                <TextBlock Text="INVESTIGATION" Height="20" Grid.Column="10" Grid.ColumnSpan="5" Grid.Row="0"/>
                <TextBlock Text="CORRECTIVE ACTION" Height="20" Grid.Column="15" Grid.ColumnSpan="8" Grid.Row="0" />
                <TextBlock Text="PREVENTATIVE ACTION" Height="20" Grid.Column="23" Grid.ColumnSpan="6" Grid.Row="0"/>
        </Grid>
        <DataGrid x:Name="grid" Grid.Row="1" Grid.Column="0" CanUserAddRows="False" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1524" Canvas.Top="44" HeadersVisibility="Column" AutoGenerateColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" Canvas.Left="-180" CellEditEnding="grid_CurrentCellChanged" Margin="0,0,881,0">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="TypeCol" Binding="{Binding Type}" Header="Type" Width="50" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="NCRCol" Binding="{Binding NCR}"  Header="NCR" Width="100" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="StatusCol" Binding="{Binding Status}"  Header="Status" Width="50"/>
                <DataGridTextColumn x:Name="PStkCol" Binding="{Binding PStkCode}"  Header="Parent Stock Code" Width="120 " IsReadOnly="True"/>
                <DataGridTextColumn x:Name="DfStkCol" Binding="{Binding DfStkCode}"  Header="Defective Stock Code" Width="125" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="QtyCol" Binding="{Binding Qty}"  Header="Quantity" Width="120" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="DfCol" Binding="{Binding Defect}"  Header="Defect" Width="100" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="DfDateCol" Binding="{Binding Defect Date}" Header="Defect Date" Width="100" IsReadOnly="True"/>
                <DataGridTemplateColumn x:Name="b1" Width="20" IsReadOnly="True"/>
                <DataGridTextColumn x:Name="CCodeCol"  Header ="Cause Code" Width ="80" />
                <DataGridTextColumn x:Name="ByCol"  Header ="By" Width ="80"/>
                <DataGridTextColumn x:Name="InvAssignCol"  Header ="Assigned To" Width ="100" />
                <DataGridTextColumn x:Name="InvCommentsCol"  Header ="Comments" Width ="100" />
                <DataGridTemplateColumn  x:Name="b2" Width="20"  IsReadOnly="True"/>
                <DataGridTextColumn x:Name="CStepNoCol"  Header ="Step No" Width ="60" />
                <DataGridTextColumn x:Name="CActionCol"  Header ="Action" Width ="100" />
                <DataGridTextColumn x:Name="CAssignCol"  Header ="Assigned To" Width ="100"/>
                <DataGridTextColumn x:Name="CReqCol"  Header ="Reqd By" Width ="100" />
                <DataGridTextColumn x:Name="CComplCol"  Header ="Completed By" Width ="100"/>
                <DataGridTextColumn x:Name="MCostCol" Header="Material Cost($)" Width="100"/>
                <DataGridTextColumn x:Name="LabourCol" Header="Labour (Hrs)" Width="100"/>
                <DataGridTemplateColumn  x:Name="b3" Width="20"  IsReadOnly="True"/>
                <DataGridTextColumn x:Name="PStepCol" Header="Step No" Width="60"/>
                <DataGridTextColumn x:Name="PActionCol" Header="Action" Width="100"/>
                <DataGridTextColumn x:Name="PAssignedCol" Header="Assigned To" Width="100"/>
                <DataGridTextColumn x:Name="PReqCol" Header="Reqd By" Width="100"/>
                <DataGridTextColumn x:Name="PCompCol" Header="Completed By" Width="100"/>
                <DataGridTextColumn x:Name="PDateCol" Header="Completed Date" Width="100"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Canvas>

Answer 1

Rather than trying to match the columns and ScrollBars of the DataGrid in a Grid that has no relation to it, just define the DataGrid header however you want to. You can use the HeaderTemplate property of a DataGrid.DataGridTemplateColumn... maybe something like this:

<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Text="Top Header" />
                        <TextBlock Grid.Row="1" Text="Bottom Header" />
                    </Grid>        
                </DataTemplate>
            </DataGridTemplateColumn.HeaderTemplate>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>