水平滚动问题

Question

我是 WPF 新手，我正在尝试为我正在开发的应用程序创建仪表板界面。我的问题如下；

我有一个包含我的数据的数据网格。这个数据网格在网格内，因为我需要特定部分的超级标题。我在数据表中插入了一个测试行，它显示得很好，但是网格内的 datagrid 元素似乎有自己的滚动条。超级标题行和数据网格行都延伸到窗口之外，但只有数据网格行滚动。当数据网格行滚动时，2 个可见的超级标题保持在同一个位置。下面是我生成接口的 xaml 代码。我尝试将网格包装在滚动查看器中，并将带有超级标题的行的水平滚动条设置为可见，但到目前为止没有任何效果。如果我至少可以让超级标题滚动，我可以尝试制作一个事件处理程序来在移动数据网格滚动条时移动超级标题。抱歉，如果这看起来有点乱码，但我还没有喝咖啡，而且我还有偏头痛，这是程序员可以体验的最好的两件事。 提前致谢

<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

与其尝试在与之无关的Grid 中匹配DataGrid 的列和ScrollBars，不如定义你想要的DataGrid 标题。您可以使用DataGrid.DataGridTemplateColumn 的HeaderTemplate 属性...也许是这样的：

<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>