多条目包装 Xaml 网格

Posted 2023-03-15

【中文标题】多条目包装 Xaml 网格

【英文标题】：Multi-Entry Wrapping Xaml Grid

【发布时间】：2015-11-17 01:45:23

【问题描述】：

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

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

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

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

【参考方案1】：

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

【讨论】：

这不起作用，因为网格视图要求所有项目都具有相同的大小，而我的实际上并非都是相同的大小。一些设备名称会更长并换行至两行，我需要控件来处理它并根据屏幕尺寸具有所需的一列/两列/三列等布局。

我将它添加到您的问题中，因为它不在其中，但对于选择正确的控件至关重要。这使它变得更加困难，因为默认情况下没有允许这种行为的控制。

所以同样的挑战是这些方法都没有真正处理真正的动态方法，例如标题变成三行......或四行等。所以因为真的没有方法似乎完成似乎我需要截断任何长文本，然后提供一个可以查看所有完整文本的详细信息页面。