WPF中为Grid添加ScrollViewer导致行高异常的解决方法

问题原因 #

当Grid被嵌套在ScrollViewer中时，ScrollViewer默认不会为子元素提供固定高度约束（其设计初衷是支持内容滚动），导致Grid的*比例行高失去计算基准，只能根据内部元素的最小高度渲染，从而出现行高异常。手动设置Grid高度虽能修复，但会失去窗口自适应能力。

解决方案 #

方法一：绑定Grid高度到ScrollViewer可视区域高度 #

这种方法既保留窗口自适应能力，又能让Grid的比例行高正常计算，同时在内容超出时自动显示滚动条：

1. 移除内部Grid多余的Grid.Row="0" Grid.Column="1"属性（该Grid已处于ScrollViewer内部，无需参与外层Grid的行列布局）。
2. 给内部Grid绑定ScrollViewer的ViewportHeight（可视区域高度），作为行高计算的基准。
3. 设置ScrollViewer的VerticalScrollBarVisibility="Auto"，实现滚动条按需显示。

修改后的代码示例：

<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto">
    <Grid Height="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ViewportHeight}">
         <Grid.RowDefinitions>
             <RowDefinition Height="1.5*"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
         </Grid.RowDefinitions>

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

         <Grid x:Name="MainMovieTvShow" Background="#000000" Grid.Row="0" Grid.Column="0">
             <!-- 内部Grid内容保持不变 -->
         </Grid>

         <Grid Grid.Row="1" Grid.Column="0">
             <!-- 内部Grid内容保持不变 -->
         </Grid>
     </Grid>
 </ScrollViewer>

方法二：禁用ScrollViewer的内容虚拟化（简单但需注意性能） #

如果Grid内容不多，可直接设置ScrollViewer的CanContentScroll="False"，此时ScrollViewer会将内容视为整体，Grid会自适应ScrollViewer的可视区域高度，*比例行高即可正常生效：

修改后的代码示例：

<ScrollViewer Grid.Column="1" CanContentScroll="False" VerticalScrollBarVisibility="Auto">
    <Grid>
         <!-- Grid内容保持不变，移除多余的Grid.Row/Grid.Column属性 -->
     </Grid>
 </ScrollViewer>

注意：此方法会禁用ScrollViewer的虚拟化功能，若Grid内包含大量元素（如列表），可能影响性能，建议优先使用方法一。

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