WinUI 3双列布局统一ScrollViewer滚动的优化方案咨询

问题分析 #

你需要实现双列布局的整体垂直滚动，要求短列内容完全显示后停止滚动，长列继续；回滚时短列回到起始位置后再跟随滚动。原方案通过ViewChanged事件结合TranslateTransform实现，存在滚动不流畅的问题，核心原因是频繁的UI变换触发了过多布局更新，导致性能损耗。

优化方案：基于原生布局的极简实现 #

核心思路是让外层ScrollViewer的滚动范围由最长列的高度决定，短列内容容器垂直对齐顶部，利用WinUI原生布局系统的特性实现滚动同步，彻底避免手动控制RenderTransform带来的卡顿问题。

XAML 代码 #

<Grid>
    <ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto">
        <!-- 外层Grid高度由内容最高的列决定，确保滚动范围覆盖最长列 -->
        <Grid x:Name="ColumnsContainer" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="7.25*"/>
                <ColumnDefinition Width="2.75*"/>
            </Grid.ColumnDefinitions>

            <!-- 左列容器：垂直对齐顶部，高度自适应内容 -->
            <Grid x:Name="LeftContentContainer" Grid.Column="0" 
                  VerticalAlignment="Top" Background="{ThemeResource BackgroundBrush}">
                <!-- 左列内容 -->
            </Grid>

            <!-- 右列容器：垂直对齐顶部，高度自适应内容 -->
            <Grid x:Name="RightContentContainer" Grid.Column="1" 
                  VerticalAlignment="Top" Background="{ThemeResource BackgroundBrush}">
                <!-- 右列内容 -->
            </Grid>
        </Grid>
    </ScrollViewer>
</Grid>

后台极简代码（仅初始化时同步高度） #

只需在页面加载完成后，将外层ColumnsContainer的高度设置为两列中较高的实际高度，确保外层ScrollViewer的滚动范围正确：

protected override void OnLoaded(object sender, RoutedEventArgs e)
{
    base.OnLoaded(sender, e);
    // 获取两列实际高度
    double leftHeight = LeftContentContainer.ActualHeight;
    double rightHeight = RightContentContainer.ActualHeight;
    // 设置外层Grid高度为最大值，保证滚动范围覆盖最长列
    ColumnsContainer.Height = Math.Max(leftHeight, rightHeight);
}

方案优势 #

1. 滚动流畅度拉满：完全依赖WinUI原生布局系统，避免了ViewChanged事件的频繁回调和手动变换带来的UI卡顿。
2. 逻辑极简：无需处理复杂的滚动偏移计算，布局系统自动完成滚动同步逻辑。
3. 自适应双向场景：无论左列或右列更长，都能自动适配，满足任意高度差异的需求。

动态内容适配说明 #

如果列内容是异步加载（比如接口请求后更新），需要在内容更新完成后重新计算并设置ColumnsContainer的高度，确保滚动范围始终覆盖最长列。

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