如何避免WinUI中ScrollView拉伸Grid列宽度的问题

问题根源 #

当ScrollView设置ContentOrientation="Horizontal"时，会允许内容无限扩展宽度——哪怕Grid配置了固定列宽和比例列，也会被强制拉伸；再加上硬编码的ScrollView宽度无法适配SplitView Pane的动态变化，最终导致布局异常。

修复方案 #

按以下方式调整XAML代码：

<ScrollView
    x:Name="PaneScrollView"
    HorizontalScrollMode="Auto"
    HorizontalScrollBarVisibility="Auto"
    Width="{Binding ElementName=YourSplitViewPane, Path=ActualWidth}">
    <Grid 
        MaxWidth="{Binding ElementName=PaneScrollView, Path=ViewportWidth}"
        HorizontalAlignment="Left">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- 你的页面内容 -->
    </Grid>
</ScrollView>

关键配置说明 #

• 移除ScrollView硬编码的Width和MaxWidth，改为绑定SplitView Pane的ActualWidth，让ScrollView始终与Pane同宽。
• 设置HorizontalScrollMode="Auto"和HorizontalScrollBarVisibility="Auto"，仅当内容超出ScrollView可视范围时才启用水平滚动。
• 给Grid绑定MaxWidth到ScrollView的ViewportWidth，限制Grid最大宽度不超过ScrollView的可视区域，避免不必要的拉伸。
• 设置Grid的HorizontalAlignment="Left"，确保内容从左侧开始布局，不会自动填充超出需求的宽度。

额外注意 #

将代码中的YourSplitViewPane替换为你实际的SplitView Pane控件名称，确保绑定生效。

内容的提问来源于stack exchange，提问作者E. A. Bagby