如何在UWP XAML

Question

以下是我想要的布局的示例图片：

这些项目都具有相同的宽度，但高度是可变的。 我希望它水平包裹但垂直滚动。当它碰到面板的边缘时，我很好，或者约束为3-4列。

我已经谷歌搜索了这一吨，并尝试了各种类型的项目面板（VariableSizedWrapGrid，WrapPanel，VariableSizedGrid等），但无法获得任何内容实际上匹配那种布局。我最接近的是UWP社区工具包的WrapGrid，但仍然根据最高的项目设置行的高度，所以较小的那些在它们下面有一堆空的空间。

我觉得我错过了一些明显的东西，因为我在其他UWP应用程序中看到了这种布局，并且它在html中是一个相当常见的模式，但我无法弄明白。

Answer 1

目前（2017年5月）无法以干净的方式进行确切的布局，但未来的团队为working on it。

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

我建议要么等待新的控制（最早在秋季创作者更新中，今年晚些时候，也许更晚），或者尝试将你的物品装入有限数量的可变尺寸中，这样你就可以回归到好的状态了。实现VariableSizedWrapGrid（而不是使用脏路）。

Answer 2

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