多条目环绕 Xaml 网格
Multi-Entry Wrapping Xaml Grid
在 UWP 应用程序中，我想要一个 XAML 网格样式控件的动态布局，它将使用屏幕的所有水平 space 可用空间。例如，当我在像 phone 这样的小屏幕上时，我希望列表像这样简单地向下滚动屏幕。
但是，当我在更宽的屏幕上时，我希望布局适应类似于以下屏幕截图：
关于 Visual Studio 2015 UWP 控件我可以用来完成这个的任何建议？我正在考虑 VariableSizedWrapGrid 和 Grid 控件的组合，但我似乎无法弄清楚。如有任何建议，我们将不胜感激。
编辑： 并非所有项目的尺寸都相同。一些设备名称会更长并换行，我需要控件来处理不同的项目大小，并根据屏幕大小具有所需的一列/两列/三列等布局。
从您显示的屏幕截图来看，您所有的项目都具有相同的大小，因此没有理由使用 VariableSizedWrapGrid。只需使用 GriView 控件，它就会像您描述的那样自动包装项目：
- 在小屏幕上，所有项目都垂直堆叠
- 在较宽的屏幕上，项目水平流动并根据可用宽度和单个项目的宽度换行到下一行。
1 2 3
4 5 6
7
<GridView ItemsSource="{Binding YourItems}"
ItemTemplate="{StaticResource YourItemTemplate}">
单个项目的布局在 YourItemTemplate 中指定 DataTemplate，一切就绪。
更新：随着问题变为可变大小的项目，它变得更加复杂。
- ListView 为项目的不同高度提供自动缩放；但仅限于单列。
- VariableSizedWrapGrid 需要使用 'assignment' 个，共 #rows/columns 个。为了获得最大的灵活性，您可以让单元格具有 1px 的高度（注意性能影响！！）并分配您需要的任何高度。因此，您需要添加一些计算，并且您不能 100% 确定要呈现的文本需要多少行（尽管您可以根据字符数做出很好的猜测）。
我以前使用过第二种方法来获得完全灵活的布局，但它并不总是 100% 完美（因为在大多数字体上 M 比 I 占用更多 space）。除非你想在计算尺寸时也考虑到这一点。
还有很多其他技巧，比如在可见屏幕外渲染文本框（例如坐标 -500/-500），检查它渲染的尺寸并将其用于 VariableSizedWrapGrid，但如果你走那条路？
我的结论是：保持简单。
- 使用简单的计算（例如 > 80 个字符 = 2 行）来确定您需要小块还是大块。
- 设备名称默认2行，如果比较短，就只用1行，其余内容下对齐
- 为设备名称提供 1 行，如果文本较长，则 trim 提供文本。您可以在详情页面使用全名。
我会选择 2 或 3，因为它更容易实现，而且相同大小的图块比可变大小的图块提供更好的概览（对齐文本）。
在 UWP 应用程序中，我想要一个 XAML 网格样式控件的动态布局，它将使用屏幕的所有水平 space 可用空间。例如，当我在像 phone 这样的小屏幕上时，我希望列表像这样简单地向下滚动屏幕。
但是，当我在更宽的屏幕上时，我希望布局适应类似于以下屏幕截图：
关于 Visual Studio 2015 UWP 控件我可以用来完成这个的任何建议？我正在考虑 VariableSizedWrapGrid 和 Grid 控件的组合，但我似乎无法弄清楚。如有任何建议，我们将不胜感激。
编辑： 并非所有项目的尺寸都相同。一些设备名称会更长并换行，我需要控件来处理不同的项目大小，并根据屏幕大小具有所需的一列/两列/三列等布局。
从您显示的屏幕截图来看，您所有的项目都具有相同的大小，因此没有理由使用 VariableSizedWrapGrid。只需使用 GriView 控件，它就会像您描述的那样自动包装项目：
- 在小屏幕上，所有项目都垂直堆叠
- 在较宽的屏幕上，项目水平流动并根据可用宽度和单个项目的宽度换行到下一行。
1 2 3
4 5 6
7
<GridView ItemsSource="{Binding YourItems}"
ItemTemplate="{StaticResource YourItemTemplate}">
单个项目的布局在 YourItemTemplate 中指定 DataTemplate，一切就绪。
更新：随着问题变为可变大小的项目，它变得更加复杂。
- ListView 为项目的不同高度提供自动缩放；但仅限于单列。
- VariableSizedWrapGrid 需要使用 'assignment' 个，共 #rows/columns 个。为了获得最大的灵活性，您可以让单元格具有 1px 的高度（注意性能影响！！）并分配您需要的任何高度。因此，您需要添加一些计算，并且您不能 100% 确定要呈现的文本需要多少行（尽管您可以根据字符数做出很好的猜测）。
我以前使用过第二种方法来获得完全灵活的布局，但它并不总是 100% 完美（因为在大多数字体上 M 比 I 占用更多 space）。除非你想在计算尺寸时也考虑到这一点。
还有很多其他技巧，比如在可见屏幕外渲染文本框（例如坐标 -500/-500），检查它渲染的尺寸并将其用于 VariableSizedWrapGrid，但如果你走那条路？
我的结论是：保持简单。
- 使用简单的计算（例如 > 80 个字符 = 2 行）来确定您需要小块还是大块。
- 设备名称默认2行，如果比较短，就只用1行，其余内容下对齐
- 为设备名称提供 1 行，如果文本较长，则 trim 提供文本。您可以在详情页面使用全名。
我会选择 2 或 3，因为它更容易实现，而且相同大小的图块比可变大小的图块提供更好的概览（对齐文本）。