从您显示的屏幕截图中,您所有的项目都具有相同的大小,因此没有理由使用VariableSizedWrapGrid
. 只需使用一个GriView
控件,它就会自动包装您所描述的项目:
- 在一个小屏幕上,所有项目都垂直堆叠
- 在更宽的屏幕上,项目水平流动并根据可用宽度和单个项目的宽度换行到下一行。
1 2 3
4 5 6
7
<GridView ItemsSource="{Binding YourItems}"
ItemTemplate="{StaticResource YourItemTemplate}">
单个项目的布局在 YourItemTemplate 中指定,DataTemplate
一切就绪。
更新:随着问题变为可变大小的项目,它变得更加复杂。
- ListView 为您的项目的不同高度提供自动缩放;但仅限于单列。
- VariableSizedWrapGrid 需要使用 # 行/列的“分配”。为了获得最大的灵活性,您可以让单元格的高度为 1px(注意性能问题!!)并分配您需要的任何高度。因此,您需要添加一些计算,并且您不能 100% 确定要渲染的文本需要多少行(尽管您可以根据字符数做出很好的猜测)。
我之前使用过第二种方法来实现完全灵活的布局,但它并不总是 100% 完美(因为在大多数字体上 M 比 I 占用更多空间)。除非您在计算尺寸时也想考虑到这一点。
还有很多其他的技巧,比如在可见屏幕之外渲染文本框(例如坐标-500/-500),检查它渲染的大小并将其用于VariableSizedWrapGrid,但是如果你沿着这条路走,它会在哪里结束?
我的结论是:保持简单。
- 使用简单的计算(例如 > 80 个字符 = 2 行)来确定您需要小图块还是大图块。
- 设备名称默认提供2行,如果很短,则仅使用1行,其余内容底部对齐。
- 为设备名称提供 1 行,如果文本较长,请修剪文本。您可以在详细信息页面上使用全名。
我会选择 2 或 3,因为它更容易实现,并且相同大小的图块比可变大小的图块提供更好的概览(对齐的文本)。