WPF中DockPanel嵌套Grid布局内容底部裁剪问题求助

我看了你的XAML代码，问题出在布局逻辑的几个细节上，导致内容随着窗口缩小被严重裁剪。咱们来一步步修复，同时保证内层8*8的Grid布局不受影响：

问题根源分析 #

• 错误的高度绑定：你给外层Grid绑定了Window.ActualHeight，但Window的实际高度包含了标题栏、菜单这些非客户端/已占用区域，直接用这个值会让Grid超出DockPanel的可用空间，自然会被裁剪。
• 破坏DockPanel的布局规则：DockPanel的核心是让最后一个元素填充剩余空间，但你给外层Grid硬设了高度，打断了这个自动适配逻辑。

修复方案（修改后的XAML） #

<Window x:Class="WPF_test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_test"
        mc:Ignorable="d"
        Title="MainWindow"
        WindowState="Maximized">
    <DockPanel HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="0">
        <!-- Menu固定在顶部，占据对应空间 -->
        <Menu Width="200" Height="40" DockPanel.Dock="Top"/>
        <!-- 外层Grid填充DockPanel剩余空间，同时保持正方形 -->
        <Grid VerticalAlignment="Stretch" 
              Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
              ShowGridLines="True">
            <Grid.Background>
                <ImageBrush Stretch="UniformToFill" 
                            ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/red_mahogany_wood_texture_by_sweetsoulsister.jpg"/>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <!-- 内层8*8 Grid，占满外层Grid的中间区域 -->
            <Grid ShowGridLines="True" 
                  Grid.Column="1" Grid.Row="1" 
                  Grid.ColumnSpan="8" Grid.RowSpan="8">
                <Grid.Background>
                    <ImageBrush Stretch="Fill" 
                                ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/WhiteBoards.png"/>
                </Grid.Background>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
            </Grid>
        </Grid>
    </DockPanel>
</Window>

关键改动说明 #

• 给Menu添加DockPanel.Dock="Top"：明确告诉DockPanel把Menu固定在顶部，剩余空间会自动留给后面的Grid。
• 移除外层Grid的Height绑定：让DockPanel自动分配剩余高度，Grid会适配窗口减去Menu后的可用空间，不会超出边界导致裁剪。
• 外层Grid设置Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"：保证外层Grid始终是正方形，这样内层的8*8 Grid每个单元格都会保持正方形，完美符合你要固定布局的需求。
• 简化冗余属性：去掉了Height="Auto"、Width="Auto"这类默认值属性，让代码更简洁。

这样修改后，无论窗口怎么调整大小，内层的8*8布局都会保持稳定，整个内容也不会出现裁剪的情况了。

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