如何实现窗口缩小时StackPanel垂直堆叠并显示滚动条？

问题描述 #

• 现有代码在全屏应用中运行正常
• 窗口缩小时，因Grid使用固定宽度列，内容无法完整显示
• 希望窗口调整后，无法容纳的StackPanel自动垂直堆叠，同时出现垂直滚动条（如示例效果）

原代码示例 #

<ScrollViewer VerticalScrollBarVisibility="Auto"  HorizontalScrollBarVisibility="Disabled">
    <Grid HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Background="Red"/>
        <StackPanel Grid.Column="2" Background="Red"/>
        <StackPanel Grid.Column="4" Background="Red"/>
        <StackPanel Grid.Column="6" Background="Red"/>
        <StackPanel Grid.Column="8" Background="Red"/>
    </Grid>
</ScrollViewer>

效果展示 #

当前效果 #

• 全屏状态：
  
• 窗口缩小后：
  

期望效果 #

• 显示滚动条状态：
  
• 滚动后状态：
  

解决方案 #

核心问题在于固定列的Grid无法自动换行，改用WrapPanel即可实现内容自动堆叠，配合ScrollViewer满足需求：

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <WrapPanel HorizontalAlignment="Center" Orientation="Horizontal" ItemWidth="200">
        <StackPanel Background="Red" Width="200" Margin="0 0 15 0"/>
        <StackPanel Background="Red" Width="200" Margin="0 0 15 0"/>
        <StackPanel Background="Red" Width="200" Margin="0 0 15 0"/>
        <StackPanel Background="Red" Width="200" Margin="0 0 15 0"/>
        <StackPanel Background="Red" Width="200"/>
    </WrapPanel>
</ScrollViewer>

关键说明 #

• WrapPanel设置Orientation="Horizontal"，元素优先水平排列，空间不足时自动换行到下一行
• ItemWidth="200"统一子项宽度，和原布局保持一致
• 通过Margin设置子项间的横向间距，替代原Grid中空白列的作用
• ScrollViewer禁用水平滚动，仅在内容高度超出时显示垂直滚动条

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