WPF实现DataGrid内容滚动时列标题固定的方法

当前实现会使整个DataGrid（包括列标题）一同滚动，想实现列标题固定、仅内容区域滚动，原XAML代码如下：

<Grid Name="rowRecs0" Grid.Row="0">
    <ScrollViewer Height="200" VerticalScrollBarVisibility="Auto">
        <StackPanel>
            <DataGrid
                x:Name="datagridRecipes"
                VerticalAlignment="Top"
                AutoGenerateColumns="False"
                CanUserAddRows="False"
                CanUserReorderColumns="False"
                CanUserResizeColumns="False"
                CanUserResizeRows="False"
                CanUserSortColumns="False"
                IsReadOnly="True"
                ItemsSource="{Binding UsersItems}"
                SelectedIndex="{Binding UserSelectedIndex}"
                SelectedItem="{Binding UserSelectedItem}"
                SelectionChanged="datagridRecipes_SelectionChanged">
                <DataGrid.Columns>
                    <materialDesign:DataGridTextColumn
                        Width="*"
                        EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}"
                        Header="NAME">
                        <materialDesign:DataGridTextColumn.ElementStyle>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="VerticalAlignment" Value="Center" />
                                <Setter Property="Height" Value="30" />
                            </Style>
                        </materialDesign:DataGridTextColumn.ElementStyle>
                        <materialDesign:DataGridTextColumn.Binding>
                            <Binding Path="RecipeName" />
                        </materialDesign:DataGridTextColumn.Binding>
                    </materialDesign:DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>
    </ScrollViewer>
</Grid>

解决方案 #

问题出在你把整个DataGrid嵌套在了外部的ScrollViewer和StackPanel里，这会让整个控件（包括标题）都跟着外部滚动条移动。实际上WPF的DataGrid本身内置了滚动区域，只需要直接给DataGrid设置高度限制，就能让它的内容区域单独滚动，列标题保持固定。

修改后的代码如下：

<Grid Name="rowRecs0" Grid.Row="0">
    <DataGrid
        x:Name="datagridRecipes"
        Height="200" <!-- 直接给DataGrid设置高度，替代外部ScrollViewer的高度限制 -->
        VerticalAlignment="Top"
        AutoGenerateColumns="False"
        CanUserAddRows="False"
        CanUserReorderColumns="False"
        CanUserResizeColumns="False"
        CanUserResizeRows="False"
        CanUserSortColumns="False"
        IsReadOnly="True"
        ItemsSource="{Binding UsersItems}"
        SelectedIndex="{Binding UserSelectedIndex}"
        SelectedItem="{Binding UserSelectedItem}"
        SelectionChanged="datagridRecipes_SelectionChanged">
        <DataGrid.Columns>
            <materialDesign:DataGridTextColumn
                Width="*"
                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}"
                Header="NAME">
                <materialDesign:DataGridTextColumn.ElementStyle>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="VerticalAlignment" Value="Center" />
                        <Setter Property="Height" Value="30" />
                    </Style>
                </materialDesign:DataGridTextColumn.ElementStyle>
                <materialDesign:DataGridTextColumn.Binding>
                    <Binding Path="RecipeName" />
                </materialDesign:DataGridTextColumn.Binding>
            </materialDesign:DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

修改说明： #

• 移除了外部的ScrollViewer和StackPanel，这两个容器完全多余，反而破坏了DataGrid原生的滚动逻辑
• 给DataGrid直接设置Height="200"，也可以用MaxHeight或者通过父容器的布局约束（比如Grid的行高限制）来限定高度，这样DataGrid内部会自动启用垂直滚动，列标题会固定在顶部，只有数据行区域滚动

内容的提问来源于stack exchange，提问作者Jaume