如何检测方向变化和改变布局？答案

【问题标题】：How to detect orientation changes and change layout?如何检测方向变化和改变布局？
【发布时间】：2013-08-08 00:42:33
【问题描述】：

假设我有一个包含 2 行、2 列和每个单元格内的许多控件的网格。

当应用程序更改为快照模式时，我的意思是我希望应用程序只占屏幕的 1/3，一列，两行，并且只显示我决定的一些控件。

对此我有什么样的控制权？

谢谢

【问题讨论】：

标签： xaml windows-8 windows-runtime microsoft-metro

【解决方案1】：

您应该在 xaml 中使用 VisualStateManager，以获得完整的 xaml 解决方案：

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationStates">
            <VisualState x:Name="Full"/>
            <VisualState x:Name="Fill"/>
            <VisualState x:Name="Portrait"/>
            <VisualState x:Name="Snapped"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

为每个 VisualState 创建 StoryBoard，并在您的 xaml 中隐藏/显示元素。 Microsoft 示例使用相同的解决方案。

更新

我在网上搜索并找到了正确的状态，此链接后面有一个示例：MSDN。

 <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait"/>
        <VisualState x:Name="Snapped"/>
    </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>

这些状态反映了ApplicationViewState 枚举。更多信息可以在here找到。

【讨论】：

你能详细说明你的答案吗？在你的帮助下我可以得到这个链接，markermetro.com/2011/11/technical/…，所以这意味着我必须为每个视觉状态编写不同的布局，并重新绑定数据根据状态将每个方向更改为正确的控件？
是的！那确实是最好的，仅限xaml的解决方案afaik。您可以使用一些巧妙的故事板重用您的一些元素，但您主要需要创建不同的布局。如果你这样做，将它们转移到单独的 UserControls 或 Views 并包含它们可能是明智的。
对不起，我有点狭隘了。 Microsoft 创建了一个支持这些 VisualStates 的基 Page 类。我用一个更有用的例子更新了我的帖子......

【解决方案2】：

考虑到此事件的备注部分，使用DisplayProperties.OrientationChanged 事件（如@Jan K. 所建议）可能不是您正在寻找的内容：

DisplayProperties.OrientationChanged 事件仅在显示器或监视器的方向发生变化时发生，而不一定在应用程序的方向发生变化时发生。要确定应用程序的方向以用于布局，请使用ApplicationView.Value 属性。

但由于ApplicationView.Value 可能会在 Windows 8.1 发布后被放弃，MS 建议改用 ApplicationView.GetForCurrentView()：

ApplicationView 静态方法可能会更改或无法用于 Windows 8.1 Preview 之后的版本。而是使用ApplicationView.GetForCurrentView() 来获取ApplicationView 的实例。

所以现在我已经完成了该代码（不幸的是，我拥有一种动态视图并且无法通过 VisualStateManager 在 XAML 中预先设计所有内容）：

public MainPage()
{
    InitializeComponent();
    Window.Current.SizeChanged += (sender, args) =>
    {
        ApplicationView currentView = ApplicationView.GetForCurrentView();

        if (currentView.Orientation == ApplicationViewOrientation.Landscape)
        {
            // when args.Size.Width > args.Size.Height
        }
        else if (currentView.Orientation == ApplicationViewOrientation.Portrait)
        {
            // when args.Size.Width < args.Size.Height
        }
    };
}

【讨论】：

【解决方案3】：

查看DisplayProperties.OrientationChanged-事件。当它触发时，您可以修改网格并重新排列控件。

【讨论】：