如何在 WinRT 中进行动态网格布局？

Question

我希望页面中的网格在纵向模式下只有一列，在横向模式下有两列。 当设备为横向时，某些内容应移至第二列。 我试过这样做，但不能。

我正在从代码背后做所有事情。 生成网格，添加子项等。当方向改变时，我会破坏当前布局并创建一个新布局。 这种方法的问题是，任何输入的数据都将消失。 这是一个巨大的代码，不可能放在这里。 我希望这种布局更改自动发生。 因此，任何输入的数据都会在方向更改后保留。

任何帮助，将不胜感激。

Answer 1

诀窍是让一个网格同时容纳两种状态。 您可以使用 VisualStates 将不同的 Grid.Row、Grid.Column、Grid.RowSpan 和 Grid.ColumnSpan 值分配给控件。 这是使用 Blend 完成的，并且在 XAML 中是声明性的。 你给每个州一个名字。 在代码中，您使用 VisualStateManager 检测窗口大小的变化以触发不同的状态。

您也可以在没有 VisualStates 的情况下执行此操作。 在这种情况下，在 SizeChanged 的​​事件处理程序中，您必须自己为所有控件设置适当的值。

在 Windows 10 UWP 中，使用 RelativePanel 变得更加简单。 与网格相比，您可以以更灵活的方式定位控件。

马丁