ScrollViewer内容过大与Grid ColumnDefinition布局冲突问题

复现代码 #

以下是可复现问题的基础XAML结构：

<Grid Width="200" Height="200">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid Background="Green">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Margin="5" Grid.Column="0"/>
            <Rectangle Fill="Blue" Margin="5" Grid.Column="1"/>
            <Rectangle Fill="Violet" Opacity="0.7" Grid.Column="0" Grid.ColumnSpan="2" Width="40" HorizontalAlignment="Left"/>
        </Grid>
    </ScrollViewer>
</Grid>

当紫色跨列矩形的Width设置为大于外层Grid宽度（如300）时，会出现第一列固定50px失效、两列均分宽度的表现。

现象性质判定 #

该表现是WPF布局系统的预期设计行为，不属于框架Bug，触发原因是两层布局规则的叠加：

• ScrollViewer为了计算完整的内容滚动范围，在开启滚动条的方向测量子元素时，会传入无限大的可用尺寸，不会用自身视口的宽高约束子元素的测量结果
• Grid在接收到水平方向无限大的测量约束时，列宽计算逻辑会调整：
  • 固定像素宽度、Auto宽度的列会先计算基础宽度值
  • 对于*加权列，由于不存在总宽度上限，无法按比例分配固定总空间，此时所有跨列子元素超出基础列宽的尺寸需求，会被平均分摊到所跨的所有列上

Visual Studio设计器没有模拟ScrollViewer的无限尺寸测量逻辑，因此设计时显示的列宽和实际运行渲染结果不一致。

纯XAML解决方案 #

不需要编写后台代码，仅需要给内层Grid增加一个最小宽度绑定，强制其最小宽度和ScrollViewer的可视区域宽度相等即可，既可以严格保留定义的列宽规则，也不会影响内容超出时的横向滚动能力：

<!-- 仅修改内层Grid，增加MinWidth绑定，其余原有代码保持不变 -->
<Grid Background="Green" MinWidth="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ViewportWidth}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Margin="5" Grid.Column="0"/>
    <Rectangle Fill="Blue" Margin="5" Grid.Column="1"/>
    <Rectangle Fill="Violet" Opacity="0.7" Grid.Column="0" Grid.ColumnSpan="2" Width="300" HorizontalAlignment="Left"/>
</Grid>

该方案的原理是：给Grid增加和ScrollViewer视口等宽的最小宽度约束后，Grid测量时不会完全处于无限宽度的计算场景，固定列、*列的分配逻辑会和普通无ScrollViewer容器中的表现完全一致；当内部元素宽度超出视口时，MinWidth不会限制Grid实际宽度增大，ScrollViewer会正常显示横向滚动条。

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