在 UWP XAML 中自动调整网格列

Posted 2023-04-13

【中文标题】在 UWP XAML 中自动调整网格列

【英文标题】：auto-fit Grid Columns in UWP XAML

【发布时间】：2020-07-25 22:12:50

【问题描述】：

我正在使用 GridView 创建一个项目网格，并试图使列填充以扩展剩余空间。类似于 auto-fit 在 CSS 中的行为。 See example..

这里我已经将GridView的子项的MaxWidth设置为350px，然后当窗口不是350px+padding的偶数倍时，我希望每一列都展开以填充剩余的空间。

UWP/XAML 可以做到这一点吗？

【参考方案1】：

如果你想达到自动适应的效果，你可以尝试使用 Windows Community Toolkit 中的UniformGrid Control。它是一种响应式布局控件，可将项目排列在一组均匀分布的行或列中，以填充可用的总显示空间。首先，您需要添加 Microsoft.Toolkit.Uwp.UI.Controls nuget 包，然后将其用作 GridView 的 ItemsPanel。例如：

.xaml:

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <controls:UniformGrid Columns="3" Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

【讨论】：

嗯，我希望列数根据窗口大小是动态的。基本上，我希望每个单元格的宽度类似于windowWidth / Floor( windowWidth / minCellWidth )。我开始认为自定义面板可能是最好的选择。是否有可能/可行覆盖 GridView 的这部分行为？

如果希望列数是动态的，可以尝试使用AdaptiveGridView替换GridView而不使用自定义Panel。

谢谢，我会试一试的。看起来很有前途！