在开发Windows 8 Store应用程序时处理不同的方向

Question

我已经写了几年Android应用程序了,现在我正在开发一个Windows应用商店/ Windows 8应用程序.

我对如何为横向和纵向方向编写不同的屏幕布局感到很困惑.

在Android中,我们所要做的就是编写2个布局,一个用于纵向,另一个用于横向,遵循文件名的一些名称约定,当我们旋转设备时,平台会自动更改屏幕布局.

我一直在谷歌搜索一些解决方案在我的Windows 8应用程序中做同样的事情,我发现所有的是使用Visual State Groups和Visual States的解决方案,在我们旋转时对我们的小部件进行一些修改装置.

例如,要在将设备旋转为纵向时使文本块更改其位置:

<VisualState x:Name="FullScreenPortrait" >
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="GridViewTitle">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>3</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="GridViewTitle">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Thickness>0,10,10,807</Thickness>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

它对我来说看起来不是很干净和简单,甚至使用Visual Studio拖放小部件来生成代码的方法,我的印象是必须有一些比我正在做的更容易和更清晰的解决方案.

所以我的问题是:是否有更简单的解决方案为每个方向编写XAML布局,或者我是否正确,但很难？

谢谢!

Answer 1

处理不同方向的一种方法是创建两个 Grid 元素，其中的子元素位于其中，并根据方向更改 Grid 的可见性。

要检测方向变化，您还可以使用 SimpleOrientation 传感器，如下代码所示：

    public sealed partial class MainPage : Page
    {
        private SimpleOrientationSensor _oSensor;

        public MainPage()
        {
            this.InitializeComponent();

            _oSensor = SimpleOrientationSensor.GetDefault();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (_oSensor != null)
                _oSensor.OrientationChanged += (s, a) =>
                {
                    Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
                    {
                        switch (a.Orientation)
                        {
                            case SimpleOrientation.NotRotated:
                            case SimpleOrientation.Rotated180DegreesCounterclockwise:
                                currentOrientation.Text = "Landscape";
                                break;
                            case SimpleOrientation.Rotated270DegreesCounterclockwise:
                            case SimpleOrientation.Rotated90DegreesCounterclockwise:
                                currentOrientation.Text = "Portrait";
                                break;
                            default:
                                currentOrientation.Text = "N/A";
                                break;
                        }
                    });
                };
        }

    }

或者最简单的方法是处理 SizeChanged 事件，如下代码所示：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        mainGrid.SizeChanged += mainGrid_SizeChanged;
    }

    void mainGrid_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (mainGrid.ActualHeight > mainGrid.ActualWidth)
            currentOrientation.Text = "Portrait";
        else
            currentOrientation.Text = "Landscape";
    }

}

希望这可以帮助！