1

在 UWP 应用程序中,我想要一个 XAML 网格样式控件的动态布局,它将使用屏幕的所有可用水平空间。例如,当我在手机等小屏幕上时,我希望列表像这样简单地向下滚动屏幕。

小屏幕布局图像

但是,当我在更宽的屏幕上时,我希望布局适应类似于以下屏幕截图:

宽屏布局

关于我可以使用哪些 Visual Studio 2015 UWP 控件来完成此操作的任何建议?我正在考虑可能是 VariableSizedWrapGrid 和 Grid 控件的组合,但我似乎无法弄清楚。任何建议,将不胜感激。

编辑:并非所有物品的尺寸都相同。一些设备名称会更长并换行至两行,我需要控件来处理不同的项目大小,并根据屏幕大小具有所需的一列/两列/三列等布局。

4

1 回答 1

0

从您显示的屏幕截图中,您所有的项目都具有相同的大小,因此没有理由使用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,因为它更容易实现,并且相同大小的图块比可变大小的图块提供更好的概览(对齐的文本)。

于 2015-11-17T21:01:22.470 回答