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

概述我有一个Silverlight页面,我希望在纵向和横向模式下出现.基本上,有三个图像排列在网格中.大图像跨越两列.手机旋转时,图像会旋转,但整体布局不会.小图像保持靠近后窗/窗口/搜索按钮,大图像保持在手机顶部. 我已经尝试了许多方法来实现这种效果,但它们都以这种或那种方式被证明是不令人满意的.我希望有人可以指出我缺少的东西,或者至少阻止别人不得不浪费4或5天来得出与我相同的结论.粗体问题： >我 我有一个Silverlight页面,我希望在纵向和横向模式下出现.基本上,有三个图像排列在网格中.大图像跨越两列.手机旋转时,图像会旋转,但整体布局不会.小图像保持靠近后窗/窗口/搜索按钮,大图像保持在手机顶部.

我已经尝试了许多方法来实现这种效果,但它们都以这种或那种方式被证明是不令人满意的.我希望有人可以指出我缺少的东西,或者至少阻止别人不得不浪费4或5天来得出与我相同的结论.粗体问题：

>我尝试的第一件事是将Rotatetransform应用于LayoutRoot元素,并在手机旋转变为横向时将其旋转-90度.我不得不将布局根的高度和宽度硬编码为800和400而不是“自动”,否则它会被拉伸.此解决方案几乎可以工作,但在绘制页面后应用Rotatetransform.因为它在800×400屏幕上绘制为400×800图像,所以不绘制前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 *.或者,我可以硬编码小图像的大小,并将行和列设置为自动,但后来我仍然坚持硬编码的东西.由于我已经用尽了所有其他选项,我认为这是我坚持的解决方案.

我错过了什么,还是这样做的？

解决方法 你真的不需要硬编码任何东西.你需要的是聪明的设计.要开发具有多个方向支持的良好应用程序,您应该提供一个聪明的网格布局,使您可以按照自己的方式重新定位对象,而不会造成混乱.

根据您的情况考虑布局：

<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,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,2);                GrID.Setrowspan(bigSmiley,4);                GrID.SetRow(smallSmiley1,0);                GrID.SetColumn(smallSmiley1,2);                GrID.SetColumnSpan(smallSmiley1,2);                GrID.SetRow(smallSmiley2,2);                GrID.SetColumn(smallSmiley2,2);                GrID.SetColumnSpan(smallSmiley2,1);                GrID.Setrowspan(smallSmiley2,2);            }        }

结果：

我希望能解决你的问题.请记住,总会有一个更好的设计让你的问题消失！ 总结

以上是内存溢出为你收集整理的silverlight – 当方向改变时保持相同的布局全部内容，希望文章能够帮你解决silverlight – 当方向改变时保持相同的布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。