XAML Grid嵌入父容器后布局异常求助：行高均变为Auto

这个问题我碰到过好几次，核心原因是外层Grid的行配置或内层页面根容器的对齐方式没有匹配弹性布局的需求，导致原本的行高规则失效了。我们一步步来拆解和解决：

核心问题分析 #

你原来的页面本身布局正常，是因为它的根Grid能够获取到足够的可用空间（比如直接作为窗口内容时，窗口会给根Grid分配全部可用高度）。但当你把它放到另一个Grid的第一行时，如果外层Grid的这一行没有配置成"占据剩余空间"，或者内层根容器没有拉伸填充外层行的空间，那么内层Grid的第三行（Height="*"）就没有足够的空间可以分配，只能收缩成内容所需的最小高度，最终所有行挤在一起。

解决方案步骤 #

1. 确保外层Grid的目标行设置为Height="*" #

外层Grid的行默认高度如果是Auto，它只会适配子元素的最小高度，不会给内层Grid留出额外空间。你需要明确把存放页面的第一行设置为Height="*"，让它占据外层Grid的剩余高度：

<!-- 正确的外层Grid配置 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> <!-- 关键：让第一行占据外层Grid的剩余空间 -->
        <!-- 其他行可以根据需求设置Auto或* -->
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- 把你的页面放到第一行 -->
    <local:YourTargetPage Grid.Row="0"/>
</Grid>

2. 确保内层页面的根容器对齐方式为Stretch #

内层页面的根Grid默认VerticalAlignment是Stretch，但如果被意外修改成了Top/Center/Bottom，它就不会填充外层行的空间。可以显式设置这个属性来保险：

<!-- 内层页面的根Grid配置 -->
<Grid VerticalAlignment="Stretch"> <!-- 显式设置，确保填充外层行的高度 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 前两行自适应内容高度 -->
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/> <!-- 第三行占据剩余空间 -->
    </Grid.RowDefinitions>

    <!-- 示例内容 -->
    <TextBlock Grid.Row="0" Text="第一行内容" Margin="10"/>
    <Button Grid.Row="1" Content="第二行按钮" Margin="10"/>
    <ScrollViewer Grid.Row="2" Background="#EEE" Margin="10"/>
</Grid>

3. 排查其他限制因素 #

• 不要给内层页面的根Grid设置固定Height值，否则会强制限制高度，覆盖弹性布局规则。
• 如果是通过ContentControl导航加载页面，确保ContentControl的VerticalAlignment也是Stretch，并且它所在的Grid行同样设置为Height="*"。

按照这几步调整后，内层页面的第三行应该就能正常占据剩余空间了，和你原本预期的布局一致。

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