多入口包装Xaml网格

Question

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

然而，当我在更宽的屏幕上时，我希望布局适应类似于以下屏幕截图：

有关Visual Studio 2015 UWP控件的任何建议我可以使用它来完成此任务吗？我想的可能是VariableSizedWrapGrid和Grid控件组合，但我似乎无法弄明白。任何建议将不胜感激。

编辑：并非所有商品的尺寸都相同。一些设备名称将更长并包装为两行，我需要控件来处理不同的项目大小，并根据屏幕大小具有所需的一列/两列/三列等布局。

Answer 1

从您显示的屏幕截图中，您的所有商品都具有相同的尺寸，因此没有理由使用VariableSizedWrapGrid。只需使用GriView控件，它就会自动换行您描述的项目：

• 在小屏幕上所有项目都垂直堆叠
• 在更宽的屏幕上，项目水平流动并根据单个项目的可用宽度和宽度换行到下一行。

  

1 2 3

     

4 5 6

     

7

<GridView ItemsSource="{Binding YourItems}"
          ItemTemplate="{StaticResource YourItemTemplate}">

单个项目的布局在YourItemTemplate DataTemplate中指定，并且您已全部设置。

更新：随着问题变为可变大小的项目，它变得更加复杂。

• ListView为您商品的不同高度提供自动缩放功能;但仅限于一列。
• VariableSizedWrapGrid需要使用＃rows / columns'赋值'。为了获得最大的灵活性，您可以让单元格具有1px的高度（注意性能命中!!）并指定您需要的任何高度。因此，您需要添加一些计算，并且您不能100％确定文本将渲染多少行（尽管您可以根据字符数进行良好的猜测）。

我之前使用过第二种方法来获得完全灵活的布局，但它并不总是100％完美（因为在大多数字体上M占用的空间比I大）。除非你想在计算尺寸时考虑到这一点。

还有很多其他黑客在可见屏幕之外渲染文本框（例如坐标-500 / -500），检查它渲染的大小并将其用于VariableSizedWrapGrid，但如果你失败则会在哪里结束那条路？

我的结论是：保持简单。

• 使用简单的计算（例如> 80个字符= 2行）来确定您是需要小块还是大块。
• 默认情况下为设备名称提供2行，如果它很短，则只使用1行，其余内容底部对齐。
• 为设备名称提供1行，如果文本更长，则修剪文本。您可以在详细信息页面上使用全名。

我选择2或3，因为它更容易实现，因为相同大小的切片比可变大小的切片提供更好的概览（对齐文本）。