WPF中DockPanel内按钮随DataGrid滚动消失问题及需求

这个问题我之前也碰到过，核心是布局容器的空间分配逻辑没搞对：你原来的DockPanel里，DataGrid会无限制占据所有可用空间，把按钮挤到可视区域外面；而StackPanel是流式布局，不会限制高度，自然就没了滚动条。下面给你两种靠谱的解决方案，选哪种看你习惯～

方案一：用Grid拆分布局（推荐，更直观） #

Grid可以明确把界面分成上下两部分，上部分放DataGrid（自动滚动），下部分固定放按钮，完全不会受滚动影响。修改后的代码如下：

<HeaderedContentControl>
    <HeaderedContentControl.Header>
        <TextBlock TextWrapping="Wrap">
            <TextBlock.Text>
                <MultiBinding StringFormat="Associated WUCs for {0} ({1})">
                    <Binding Path="Class.Name" />
                    <Binding Path="Class.Narrative" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </HeaderedContentControl.Header>
    <!-- 用Grid替代外层DockPanel，分成两行 -->
    <Grid>
        <Grid.RowDefinitions>
            <!-- 第一行占满剩余空间 -->
            <RowDefinition Height="*" />
            <!-- 第二行自动适配按钮高度 -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- 第一行放置DataGrid，开启自动滚动 -->
        <m:DataGrid 
            Grid.Row="0"
            ItemsSource="{Binding Source={StaticResource ViewSource}}" 
            Style="{StaticResource {x:Type DataGrid}}" 
            CanUserAddRows="False" 
            CanUserDeleteRows="True"
            VerticalScrollBarVisibility="Auto">
            <DataGrid.Columns>
                <DataGridTemplateColumn IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource DataGridButtonStyle}" 
                                    Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=DataContext.DeleteCommand}" 
                                    CommandParameter="{Binding}">
                                <Image Style="{StaticResource DataGridButtonImageStyle}" Source="{StaticResource DeleteImage}" />
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn 
                    Header="{Binding Source={x:Type entities:OtherClass}, ConverterParameter='Name', Converter={StaticResource DisplayNameConverter}}" 
                    Binding="{Binding Name}" 
                    IsReadOnly="True" 
                    SortDirection="Ascending" />
                <DataGridTextColumn 
                    Header="{Binding Source={x:Type entities:OtherClass}, ConverterParameter='Narrative', Converter={StaticResource DisplayNameConverter}}" 
                    Binding="{Binding Narrative}" 
                    IsReadOnly="True" 
                    SortDirection="Ascending" />
            </DataGrid.Columns>
        </m:DataGrid>

        <!-- 第二行放按钮组，用DockPanel保持原有排列 -->
        <DockPanel Grid.Row="1" Margin="0,8,0,0">
            <Button Command="{Binding AddCommand}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{StaticResource AddImage}" Height="16" />
                    <TextBlock Text=" Add" />
                </StackPanel>
            </Button>
            <Button Command="{Binding OkCommand}" DockPanel.Dock="Right" Content="OK" />
            <Button Command="{Binding CancelCommand}" DockPanel.Dock="Right" Content="Cancel" HorizontalAlignment="Right" />
        </DockPanel>
    </Grid>
</HeaderedContentControl>

为什么这个方案管用？ #

• Grid的RowDefinition明确划分了空间：*号行会占满所有剩余高度，Auto行只会占用按钮需要的高度，按钮永远不会被挤压。
• DataGrid的VerticalScrollBarVisibility="Auto"确保内容过多时自动显示滚动条，滚动范围只限于DataGrid内部，完全不影响底部按钮。

方案二：调整DockPanel结构（贴合你原有代码） #

如果你不想换布局容器，只要调整DockPanel的元素顺序，先把按钮固定在底部，再让DataGrid占剩余空间就行：

<HeaderedContentControl>
    <HeaderedContentControl.Header>
        <TextBlock TextWrapping="Wrap">
            <TextBlock.Text>
                <MultiBinding StringFormat="Associated WUCs for {0} ({1})">
                    <Binding Path="Class.Name" />
                    <Binding Path="Class.Narrative" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </HeaderedContentControl.Header>
    <!-- 显式声明LastChildFill确保最后一个元素占满剩余空间 -->
    <DockPanel LastChildFill="True">
        <!-- 先把按钮组Dock到底部 -->
        <DockPanel DockPanel.Dock="Bottom" Margin="0,8,0,0">
            <Button Command="{Binding AddCommand}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{StaticResource AddImage}" Height="16" />
                    <TextBlock Text=" Add" />
                </StackPanel>
            </Button>
            <Button Command="{Binding OkCommand}" DockPanel.Dock="Right" Content="OK" />
            <Button Command="{Binding CancelCommand}" DockPanel.Dock="Right" Content="Cancel" HorizontalAlignment="Right" />
        </DockPanel>

        <!-- DataGrid作为最后一个元素，占据剩余空间 -->
        <m:DataGrid 
            ItemsSource="{Binding Source={StaticResource ViewSource}}" 
            Style="{StaticResource {x:Type DataGrid}}" 
            CanUserAddRows="False" 
            CanUserDeleteRows="True"
            VerticalScrollBarVisibility="Auto">
            <DataGrid.Columns>
                <!-- 列内容和原有代码一致 -->
                <DataGridTemplateColumn IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource DataGridButtonStyle}" 
                                    Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=DataContext.DeleteCommand}" 
                                    CommandParameter="{Binding}">
                                <Image Style="{StaticResource DataGridButtonImageStyle}" Source="{StaticResource DeleteImage}" />
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn 
                    Header="{Binding Source={x:Type entities:OtherClass}, ConverterParameter='Name', Converter={StaticResource DisplayNameConverter}}" 
                    Binding="{Binding Name}" 
                    IsReadOnly="True" 
                    SortDirection="Ascending" />
                <DataGridTextColumn 
                    Header="{Binding Source={x:Type entities:OtherClass}, ConverterParameter='Narrative', Converter={StaticResource DisplayNameConverter}}" 
                    Binding="{Binding Narrative}" 
                    IsReadOnly="True" 
                    SortDirection="Ascending" />
            </DataGrid.Columns>
        </m:DataGrid>
    </DockPanel>
</HeaderedContentControl>

这个方案的关键： #

• DockPanel的LastChildFill="True"是核心（默认就是True，但显式写出来更清晰），它会让最后一个元素（DataGrid）占据所有未被Dock元素占用的空间。
• 先把按钮Dock到Bottom，这样按钮会固定在底部，DataGrid只能在上面的空间里显示，内容过多时自动出现滚动条。

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