WPF 内层Grid无法按预期拉伸至最大可用尺寸问题求助

问题根源 #

你遇到的拉伸失效问题来自两个核心布局错误：

• 外层MyCanvas作为Canvas容器，默认不会自动拉伸子元素，直接把内层Grid放进去的话，内层Grid只会按自身内容计算尺寸，不会撑满整个Canvas的可用空间
• 内层Grid的第二行（用来放图片区域的行）设置了Height="Auto"，Auto规则是优先满足子元素所需的最小尺寸，不会自动占满内层Grid的剩余可用高度

修复步骤 #

1. 给放在MyCanvas里的内层Grid添加宽高绑定，让它和外层Canvas的实际尺寸保持一致：

<Grid ShowGridLines="True" 
      Width="{Binding ActualWidth, ElementName=MyCanvas}"
      Height="{Binding ActualHeight, ElementName=MyCanvas}">

2. 把内层Grid的第二行高度从Auto改成*，让它自动占据除了上下两行（100+50）之外的所有剩余高度：

<RowDefinition Height="*" />

3. 可选优化：如果你后续要在中间的黑色区域放图片，不需要额外套Canvas也能实现边框效果，直接用Border容器更合适，也能避免Canvas的布局特性影响拉伸：

<Border Background="Black" IsHitTestVisible="False" Grid.Column="1" Grid.Row="1">
    <Viewbox Stretch="Uniform" StretchDirection="DownOnly" >
        <!-- 后续放图片或者你现在的Rectangle都可以 -->
        <Rectangle Fill="Red" />
    </Viewbox>
</Border>

完整修改后的核心布局片段 #

<Canvas Grid.Row="2" Grid.Column="1"
        Background="LightBlue" 
        Name="MyCanvas" 
        Focusable="True">

    <!-- 新增宽高绑定，撑满外层Canvas -->
    <Grid ShowGridLines="True"
          Width="{Binding ActualWidth, ElementName=MyCanvas}"
          Height="{Binding ActualHeight, ElementName=MyCanvas}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <!-- 把Auto改成*，占满剩余高度 -->
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>

        <Canvas Grid.Row="0" Grid.Column="0">
            <Label Name="MashKey" Content="Current key to Mash: NONE" FontSize="18" FontWeight="Bold" Foreground="White"/>
        </Canvas>
        <Canvas Grid.Row="0" Grid.Column="2">
            <Label Background="Red" Name="MashedCount" Content="Last Mash Count: 0" FontSize="18" FontWeight="Bold" Canvas.Right="0" Foreground="White"/>
        </Canvas>

        <!-- 替换Canvas为Border，避免布局问题，也自带边框属性可以后续调整 -->
        <Border Background="Black" IsHitTestVisible="False" Grid.Column="1" Grid.Row="1">
            <Viewbox StretchDirection="DownOnly" >
                <Rectangle Fill="Red" />
            </Viewbox>
        </Border>
    </Grid>
</Canvas>

修改后内层的中间区域就会自动撑满所有可用空间，同时跟随外层窗口缩放自适应调整尺寸，你后续插入图片也能自动适配区域大小。

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