如何将Grid的Auto自动尺寸与星号(*)尺寸特性结合使用？

解决方案 #

你需要的「内容高度小于剩余可用空间时自动适配内容高度、超出时限制高度并触发滚动」效果，可以通过以下两种方式实现：

方案1：基于现有Grid布局修改 #

无需调整现有Grid的行定义结构，只需修改ScrollViewer的属性即可：

1. 保留Grid第二行高度为*，确保该行最多占用所有剩余可用空间
2. 给ScrollViewer添加两个属性：
   • VerticalAlignment="Top"：让ScrollViewer默认高度匹配内容高度，而非强行占满整行
   • 绑定MaxHeight为第二行的实际高度，限制ScrollViewer最大高度不超过可用空间，超出时自动触发滚动

完整代码示例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <!-- Top Bar -->
    <Border Grid.Row="0">
        <!-- 顶部栏内容 -->
    </Border>
    
    <!-- Main Content -->
    <Border Grid.Row="1">
        <ScrollViewer 
            VerticalAlignment="Top"
            MaxHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RowDefinition}}, Path=ActualHeight}">
            <!-- 主内容 -->
        </ScrollViewer>
    </Border>
    
    <!-- Bottom Bar -->
    <Border Grid.Row="2">
        <!-- 底部栏内容 -->
    </Border>
</Grid>

如果你的UI框架不支持相对绑定，可以通过后台代码手动计算：监听窗口/容器尺寸变化事件，用容器总高度 - 顶部栏实际高度 - 底部栏实际高度得到可用高度，赋值给ScrollViewer的MaxHeight即可。

方案2：使用DockPanel简化实现 #

如果可以更换布局容器，DockPanel的特性天然适配该需求，代码更简洁：

<DockPanel LastChildFill="False">
    <!-- 顶部栏停靠在顶部 -->
    <Border DockPanel.Dock="Top">
        <!-- 顶部栏内容 -->
    </Border>
    <!-- 底部栏停靠在底部 -->
    <Border DockPanel.Dock="Bottom">
        <!-- 底部栏内容 -->
    </Border>
    <!-- 主内容放在最后，自动占用剩余空间的可用高度 -->
    <ScrollViewer VerticalAlignment="Top">
        <!-- 主内容 -->
    </ScrollViewer>
</DockPanel>

DockPanel会优先计算停靠元素的尺寸，剩余空间分配给最后一个元素，搭配LastChildFill="False"和VerticalAlignment="Top"，主内容会自动适配内容高度，最多不超过剩余可用空间，超出时自动触发滚动。

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