如何在 Windows 8 中重排窄屏布局

Question

我有一个布局，其中包含红色面板和右侧面板中的一些控件，它们都包含一个带有一些项目的列表视图，因此它们可以自行滚动，如图片顶部所示。

我想更改窄屏上的布局（当用户调整我的应用程序大小时），因为同一方向的两个面板不适合。我想知道什么是实现这一目标的好方法。

到目前为止，我已经尝试创建一个最初包含红色和蓝色面板的网格，当窗口大小发生变化时，我将属性 Grid.Column 从 1 变为 0 并将 Grid.Row 从 0 变为 1蓝色面板。然而，虽然这确实将蓝色面板置于红色面板之下，但我不知道如何使整个布局可滚动，因为现在蓝色布局的一部分将在屏幕外。

我认为也许我可以通过将两个面板都放在 StackPanel 中并仅更改其方向来实现我的计划，但我不确定如何在宽布局中为其子级平均拆分 StackPanel（并且滚动问题仍然存在在这里）。

或者我应该只准备两个单独的布局并使用 VisualStateManager 在它们之间切换？

Answer 1

“只需​​准备两个单独的布局，并使用VisualStateManager在它们之间切换”

基本上为所有支持的窗口大小创建布局，并将它们全部放在带有Visibility="Collapsed" 的页面中。然后处理SizeChanged 事件并使用VSM 切换到适合新大小的状态。您可以在 Blend 中轻松定义和查看不同的视觉状态。如果您不打算使用 Blend - 您可以跳过 VSM，只需在事件处理程序中手动设置每个布局面板的 Visibility。

还有一些其他选项，例如动态重新配置不同的方向和ScrollViewer 模式，甚至实现您自己的布局面板，但我不会尝试过早地进行优化，并且在大多数情况下 VSM 路线运作良好。