方向改变时保持相同的布局 [英] Keep same layout when orientation changes

问题描述

我有一个Silverlight页面，希望在纵向和横向模式下具有以下外观.本质上，三个图像排列在一个网格中.大图像跨越两列.手机旋转时，图像旋转，但整体布局不旋转.小图像保留在后退/窗口/搜索按钮附近，大图像保留在手机顶部.

I have a Silverlight page that I would like to have below appearance in portrait and landscape mode. Essentially, there are three images arranged in a grid. The big image spans two columns. When the phone rotates, the images rotate, but the overall layout does not. The small images remain close to the back/windows/search button and the large image remains towards the top of the phone.

我尝试了多种方法来达到这种效果，但是事实证明它们都不能令人满意.我希望有人可以指出我所缺少的东西，或者至少可以防止别人不得不浪费4或5天才能得出与我相同的结论. 粗体字问题:

I have tried a number of methods to achieve this effect, but they have all proved unsatisfactory in one way or another. I'm hoping that someone can point out something that I'm missing or, at the very least, prevent someone else from having to waste 4 or 5 days coming to the same conclusion that I did. Questions in Bold:

• 我尝试的第一件事是将RotateTransform应用于LayoutRoot元素，并在手机旋转变为横向时将其旋转-90度.我不得不将布局根的高度和宽度硬编码为800和400，而不是自动"，否则它将被压扁.该解决方案几乎可以正常工作，但是在绘制页面之后应用了RotateTransform.由于它是在800x400屏幕上绘制为400x800图像，因此不会绘制顶部200和底部200像素.旋转后，这变得很明显，并且缺少(现在)左右部分. 是否有一种方法可以强制布局引擎从屏幕上拖动出来，以便在应用RotateTransform之后所有像素都在那里?

我接下来要考虑的(但没有尝试过)是将页面SupportedOrientations设置为"PortraitOnly"，然后使用加速度计生成我自己的"OnOrientationChanged"事件，然后在出现以下情况时有选择地将图像旋转90度手机倾斜到横向.我认为这是个坏主意，因为当旋转在我的应用程序中无法以与其他所有应用程序完全不同的方式运行时，我可能会以某种微妙的方式犯错，从而导致混乱. 是否可以在不自动更新包含我的元素的网格布局的情况下触发OnOrientationChanged事件?另外，还有其他挂钩可用于检测手机方向吗?

The next thing I considered (but did not try) was to set the page SupportedOrientations to "PortraitOnly" and then use the accelerometer to generate my own "OnOrientationChanged" event and then selectively rotate the images by 90 degrees when the phone is tilted to landscape. I determined this is a bad idea because I would probably get this wrong in some subtle way resulting in confusion when rotation didn't work quite the same way in my app as in every other app. Is there a way to have the OnOrientationChanged event fire without also automatically updating the layout of the grid that contains my elements? Alternatively, is there some other hook that can be used to detect the phone orientation?

我尝试的最后一件事类似于此处提供的建议: Windows Phone 7应用程序-方向更改，并在此处:由于我已经用尽了所有其他选项，因此我认为这是我坚持使用的解决方案.

The last thing I tried was similar to the advice offered here: Windows Phone 7 applications - Orientation Change and here: http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing-with-orientation-changes.aspx. This solution seems a bit brittle to me because it forces me to change the relative sizes of my grid rows and columns in the OnOrientationChanged event handler as well as in the xaml code. In the portrait mode, the first row is set to 5* and the 2nd row is set to 2*. Then when I switch to landscape, the rows need to be each set to 1* and the columns need to be set to 5* and 2* respectively. Alternatively, I could hard-code the size of the small images and set the rows and columns to Auto, but then I'm still stuck hard coding something. Since I've exhausted all of my other options, I think this is the solution that I'm stuck with.

我错过了什么吗，或者这是这样做的方式吗?

Am I missing anything, or is this the way to do it?

推荐答案

您实际上并不需要硬编码任何东西.您需要的是巧妙的设计.为了开发具有多方向支持的良好应用程序，您应该提供一个巧妙的网格布局，该布局使您可以按需要的方式重新放置对象，而不会造成混乱.

You don't really have to hard code anything. What you need is clever designing. To develop good applications with multiple orientation support you should come up with a clever grid layout which lets you reposition objects the way you want without creating a mess.

根据您的情况考虑布局:

For your situation consider the layout:

 <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3.5*" />
            <ColumnDefinition Width="1.5*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2.5*"/>
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Margin="12,17,0,28" Grid.ColumnSpan="3" Grid.RowSpan="3"></StackPanel>
        <Image Name="bigSmiley" Margin="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Source="big.jpg"
               Stretch="Fill"/>
        <Image Name="smallSmiley1" Grid.Row="3" Source="smiley.jpg" Stretch="Fill" Margin="8"/>
        <Image Name="smallSmiley2" Grid.Row="3" Grid.Column="1"
               Source="smiley.jpg" Stretch="Fill" Margin="8"
               Grid.ColumnSpan="2" />
        <!--ContentPanel - place additional content here-->
    </Grid>

并且您更改方向的方法应类似于:

And your orientation changed method should be like:

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 3);
                Grid.SetRowSpan(bigSmiley, 3);
                Grid.SetRow(smallSmiley1, 3);
                Grid.SetColumn(smallSmiley1, 0);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 1);
                Grid.SetRow(smallSmiley2, 3);
                Grid.SetColumn(smallSmiley2, 1);
                Grid.SetColumnSpan(smallSmiley2, 2);
                Grid.SetRowSpan(smallSmiley2, 1);
            }
            else
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 2);
                Grid.SetRowSpan(bigSmiley, 4);
                Grid.SetRow(smallSmiley1, 0);
                Grid.SetColumn(smallSmiley1, 2);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 2);
                Grid.SetRow(smallSmiley2, 2);
                Grid.SetColumn(smallSmiley2, 2);
                Grid.SetColumnSpan(smallSmiley2, 1);
                Grid.SetRowSpan(smallSmiley2, 2);
            }
        }

结果:

我希望能解决您的问题.记住，总会有一个更好的设计可以解决您的问题！ :)

I hope that solves your issue. Remember, there's always a better design which makes your problems go away! :)

这篇关于方向改变时保持相同的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！