保持相同的布局时，方向改变(Keep same layout when orientation ch

我有我想有下面的外观在纵向和横向模式Silverlight的网页。从本质上讲，有排列成网格的三个图像。大图像跨越两列。当手机旋转时，图像旋转，但整体布局没有。小图象保持紧贴椅背/窗/搜索按钮和大图像保持对手机的顶部。

我已经尝试了许多方法来达到这种效果，但他们都证明了这样或那样的不满意。我希望有人能指出我失去了一些东西，或者至少是，防止别人不必浪费4或5天来，我也做了同样的结论。 在大胆的问题：

我想的第一件事是应用RotateTransform到LayoutRoot元素，其旋转-90度，每当手机旋转而改变为横向。我不得不硬编码的布局根的高度和宽度800和400，而不是“自动”或它被取用压扁。该解决方案几乎工作，但页面被绘制后RotateTransform得到应用。因为它被绘制为一个400x800图像的800x400屏幕上，顶部200和底部200的像素中没有画出。它的旋转后（现在）左右部分缺少这是显而易见的。 有没有办法迫使布局引擎，使应用RotateTransform后的所有像素都没有绘制出屏幕？
我认为（但没有尝试），接下来的事情就是设置页面SupportedOrientations为“PortraitOnly”，然后使用加速度计来生成自己的“OnOrientationChanged”事件，然后当手机倾斜，以景观选择性地转动90度的图像。我确定这是一个坏主意，因为我可能会得到这个错误，导致一些混乱微妙的方式旋转时，在我的应用程序没有工作，以同样的方式在所有其他应用程序。 有没有办法有OnOrientationChanged事件不火也自动更新，其中包含我的元素电网的布局？ 另外，有可用于检测手机方向其他一些挂钩？
我想的最后一件事是类似于这里提供的建议是： Windows Phone 7个的应用程序-取向的转变，并在这里： http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing -with-定向changes.aspx 。该解决方案似乎有点脆的我，因为它迫使我改变我的网格行和列的相对大小在OnOrientationChanged事件处理程序，以及在XAML代码。在人像模式中，第一行被设置为5 *和第二行被设置为2 *。然后，当我切换到横向，行必须分别设定为1 *和列需要分别设置为5 *和2 *。或者，我可以硬编码的小图像的大小和行和列设置为自动，但后来我还是坚持硬编码的东西。 既然我已经用尽了我所有的其他选择，我觉得这是我坚持的解决方案。

我失去了什么，或者这是做到这一点？

你真的没有硬编码任何东西。你需要的是聪明的设计。发展与多方位支持，良好的应用程序，你应该拿出一个聪明的网格布局，它可以让您重新定位对象，而无需创建一个烂摊子，你想要的方式。

对于您的情况考虑布局：

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

结果：