silverlight - 方向改变时保持相同的布局

Question

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

我尝试了多种方法来达到这种效果，但都以某种方式证明了它们并不令人满意。我希望有人能指出我遗漏的东西，或者至少可以防止其他人不得不浪费 4 或 5 天时间得出与我相同的结论。 粗体问题：

• 我尝试的第一件事是将 RotateTransform 应用于 LayoutRoot 元素，并在手机旋转变为横向时将其旋转 -90 度。我不得不将布局根的高度和宽度硬编码为 800 和 400 而不是“自动”，否则它会被压扁。该解决方案几乎可以工作，但在绘制页面后会应用 RotateTransform。因为它在 800x400 屏幕上绘制为 400x800 图像，所以不会绘制顶部 200 和底部 200 像素。这在它旋转并且（现在）左右部分丢失后变得很明显。 有没有办法强制布局引擎画出屏幕，以便在应用 RotateTransform 后所有像素都在那里？

• 我考虑的下一件事（但没有尝试）是将页面 SupportedOrientations 设置为“PortraitOnly”，然后使用加速度计生成我自己的“OnOrientationChanged”事件，然后当手机倾斜到横向时有选择地将图像旋转 90 度. 我认为这是一个坏主意，因为当我的应用程序中的旋转方式与其他所有应用程序中的旋转方式不同时，我可能会以某种微妙的方式弄错，从而导致混乱。 有没有办法在不自动更新包含我的元素的网格布局的情况下触发 OnOrientationChanged 事件？或者，是否有其他可用于检测手机方向的钩子？

• 我尝试的最后一件事与此处提供的建议类似：Windows Phone 7 applications - Orientation Change和此处：http: //blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing -with-orientation-changes.aspx。这个解决方案对我来说似乎有点脆弱，因为它迫使我在 OnOrientationChanged 事件处理程序以及 xaml 代码中更改网格行和列的相对大小。在纵向模式下，第一行设置为 5*，第二行设置为 2*。然后当我切换到横向时，每行需要设置为 1*，列需要分别设置为 5* 和 2*。或者，我可以硬编码小图像的大小并将行和列设置为自动，但我仍然坚持硬编码。由于我已经用尽了所有其他选择，我认为这是我坚持的解决方案。

我错过了什么，还是这样做的方式？

Answer 1

你真的不需要硬编码任何东西。你需要的是巧妙的设计。要开发具有多方向支持的优秀应用程序，您应该想出一个巧妙的网格布局，它可以让您以您想要的方式重新定位对象而不会造成混乱。

根据您的情况考虑布局：

 <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>

你的方向改变方法应该是这样的：

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);
            }
        }

结果：

我希望这能解决你的问题。请记住，总有更好的设计可以解决您的问题！:)