在开发Windows 8商店应用程序时处理不同的方向问题

Question

在开发Windows 8商店应用程序时处理不同的方向问题

5

我已经写了几年的Android应用程序，现在我正在开发一个Windows Store/Windows 8应用程序。

我非常困惑如何为横向和纵向方向编写不同的屏幕布局。

在Android中，我们只需要编写两个布局，一个用于纵向，另一个用于横向，遵循一些文件名约定，并且当我们旋转设备时，平台会自动更改屏幕布局。

我一直在搜索解决方案，以在我的Windows 8应用程序中实现相同的功能，但我找到的所有解决方案都是使用Visual State Groups和Visual States，将在同一XAML中发生的一些修改放入我们的小部件中，当我们旋转设备时发生变化。

例如，要使文本块在将设备旋转到纵向方向时更改其位置：

<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布局，还是我正在正确但困难的道路上前进？

谢谢！

- Esdras Beleza

3个回答

1

Esdras- 你没错，可能应该有更简单的方法，但唯一的其他选择是软件Expression Blend。我也会承认，需要一些学习曲线才能上手。

此外，在Xaml中编写方向变化时，父控件必须来自一个可以扩展（而不是内部密封）的控件，并且必须具有布局意识。因此，例如，如果您在具有布局感知页面的文本框上放置文本框，则其方向将更改，但是如果您在布局感知页面上放置网格并在其中放置文本框...默认行为是网格会响应，但文本框不会。

您还可以注意到，虽然这很混乱，每个控件都需要像您为每个应对方向变化的元素提供的控件修饰符那样，但好处是它不需要原生代码来定义状态或转换，因此设计师能够使用类似xml的xaml来描述视图中的更改，无论是方向还是其他控件的状态。

如果您能得到Expression Blend程序，它就是为此目的而制作的。

- Zack Weiner

2

一个快速的补充：由于这里的上下文是Windows 8，因此Blend已经与Visual Studio 2012捆绑在一起。 - Jim O'Neil

0

我之前在stackoverflow上写了一篇文章，可能对你有用。提供了一些示例和代码：

[处理Windows 8应用程序的方向][1]在Windows 8.1商店应用程序中处理方向

如果你有更多问题，请给我留言。

谢谢， Ambuj

- Ambuj

同时参考以下文章：快速入门：Windows 屏幕方向 - Ambuj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kimsk · Accepted Answer

处理不同方向的一种方法是创建两个网格元素，并根据方向更改网格的可见性以及其内部子元素。

要检测方向变化，您还可以使用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";
    }

}

希望这能帮到你！