如何在 UWP XAML 中实现这种类型的项目布局答案

【问题标题】：How to achieve this type of item layout in UWP XAML如何在 UWP XAML 中实现这种类型的项目布局
【发布时间】：2023-04-09 19:35:01
【问题描述】：

这是我想要的布局的示例图像：

所有项目都将具有相同的宽度，但高度是可变的。我希望它水平包装但垂直滚动。我可以在它碰到面板边缘时包裹它，或者限制为 3-4 列。

我已经在谷歌上搜索了很多，并尝试了各种类型的项目面板（VariableSizedWrapGrid、WrapPanel、VariableSizedGrid 等），但找不到任何与这种布局真正匹配的东西。我得到的最接近的是 UWP 社区工具包的 WrapGrid，但它仍然根据最高项目设置行的高度，因此较小的项目下方有一堆空白空间。

我觉得我遗漏了一些明显的东西，因为我在其他 UWP 应用程序中看到过这种布局，它是 html 中相当常见的模式，但我就是想不通。

【问题讨论】：

也许你可以使用RelativePanel？ docs.microsoft.com/en-us/uwp/api/…

标签： xaml gridview uwp uwp-xaml

【解决方案1】：

UWP 社区工具包现在有一个StaggeredPanel

【讨论】：

这是最合适的解决方案 - （对于提问者 - 请记住，如果您在 ListView / GridView 中使用它，您将破坏虚拟化）

【解决方案2】：

目前（2017 年 5 月）无法以干净的方式实现准确的布局，但该团队的未来是 working on it。

您可以使用VariableSizedWrapGrid 以肮脏的方式到达那里。最肮脏的选择是设置 1px 的高度，然后让您的控件根据需要的高度取 x（例如 200）行。一个更好的解决方案是将行高设置为例如20 或 50px 并从那里开始相乘。这将为您提供一个非常灵活的布局（但您必须进行一些计算才能知道您需要的高度）。请记住，这些肮脏的方式会对性能产生负面影响，但如果确实需要，它也会起作用。

我建议要么等待新控件（最早在秋季创作者更新中，今年晚些时候，也许更晚），或者尝试将你的物品调整为有限数量的可变尺寸，这样你就可以回退到一个好的VariableSizedWrapGrid 的实现（而不是使用肮脏的方式）。

【讨论】：