WinUI中窗口缩小时如何让Grid列自动换行而非隐藏

固定列数的Grid无法在窗口缩小时自动调整布局换行，要实现第二列自动移至第一列下方，可通过以下几种方案解决：

方案1：使用WrapPanel（WPF适用） #

直接将外层Grid替换为WrapPanel，它会根据容器可用宽度自动换行，同时给子控件设置MinWidth避免过度压缩：

<WrapPanel Background="White" Orientation="Horizontal" Margin="0">
    <!-- 第一列 -->
    <Grid MinWidth="300" Margin="0 0 10 0">
        <ScrollViewer>   
            <StackPanel Orientation="Vertical">
               <!-- listview -->
            </StackPanel>
        </ScrollViewer>
    </Grid>
    <!-- 第二列 -->
    <Grid MinWidth="300">
        <ScrollViewer>
            <StackPanel Orientation="Vertical" Margin="5,10,0,0">
                <!-- listview -->
            </StackPanel>
        </ScrollViewer>
    </Grid>
</WrapPanel>

方案2：使用VariableSizedWrapGrid（UWP适用） #

UWP中可使用VariableSizedWrapGrid实现类似自动换行效果，通过ItemWidth控制子控件宽度：

<VariableSizedWrapGrid Background="White" Orientation="Horizontal" ItemWidth="300" Margin="0">
    <!-- 第一列 -->
    <Grid>
        <ScrollViewer>   
            <StackPanel Orientation="Vertical">
               <!-- listview -->
            </StackPanel>
        </ScrollViewer>
    </Grid>
    <!-- 第二列 -->
    <Grid>
        <ScrollViewer>
            <StackPanel Orientation="Vertical" Margin="5,10,0,0">
                <!-- listview -->
            </StackPanel>
        </ScrollViewer>
    </Grid>
</VariableSizedWrapGrid>

方案3：响应式布局切换（支持WPF/UWP） #

若需精确控制布局切换的宽度阈值，可结合VisualStateManager和自适应触发器，在窗口宽度小于指定值时切换为垂直布局：

<Grid Background="White">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainPanel.Orientation" Value="Horizontal"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NarrowLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainPanel.Orientation" Value="Vertical"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="MainPanel" Orientation="Horizontal">
        <!-- 第一列 -->
        <Grid MinWidth="300" Margin="0 0 10 0">
            <ScrollViewer>   
                <StackPanel Orientation="Vertical">
                   <!-- listview -->
                </StackPanel>
            </ScrollViewer>
        </Grid>
        <!-- 第二列 -->
        <Grid MinWidth="300">
            <ScrollViewer>
                <StackPanel Orientation="Vertical" Margin="5,10,0,0">
                    <!-- listview -->
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </StackPanel>
</Grid>

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