原文地址：
【译者注:这篇文章是翻译自微软官方的wp7 quickstart的第八篇，讲述wp下的处理横屏和纵屏切换的技巧。部分内容加入了自己的理解和表达习惯。而翻译此系列的主要目的一是为了练习英语，二是让自己作为一个 bi开发者对wp7的开发有一个了解。部分翻译不当的地方望各位高人指出批评指正】
此篇主要描述windows phone的silverlight对横屏和竖屏的支持技巧。
其中主要阐述以下内容：
屏幕方向
滚动技巧
grid布局技巧
屏幕方向
windows phone支持下面几种方式：
纵向
左向水平
右向水平
用户可以很简单的更改设备的方向。当在模拟器中测试你的应用的时候，可以通过单击模拟器工具栏的方向切换按钮实现。方向按钮是一个带箭头的矩形来显示屏幕的方向。
在屏幕纵向的时候，页面的方向是纵向的所以页面的高度要大于宽度。
无论是左向横向和右向横向，状态栏和应用程序栏仍然是在屏幕的边缘的。左向横向，状态栏在左面，右向横向的时候，状态栏在右侧。【译者注：关于应用程序栏和状态栏参考本文末尾的译注。】
屏幕纵向是默认支持的，所以当屏幕横向的时候需要额外写些代码。不能只指定左向或者右向的横向，如果需要支持屏幕横向，那么就需要对这两种横向都支持。如果需要程序支持横向或者纵向，需要设置supportedorientations属性为portraitorlandscape，在xaml里和代码里设置都可以。
显示横屏和纵屏的内容有很多方式。其中的两个技巧就是通过滚动和grid布局。
滚动技巧
这个技巧需要在scrollviewer控件中使用stackpanel，适用于需要显示列表数据或者一个控件接着一个控件显示的情况。stackpanel允许将其内部的控件一个接一个地显示，scrollviewer控件允许转屏的过程中当控件超出屏幕的时候在stackpanel中显示滚动条。
这个技巧按如下方式操作。
1.更改supportedorientations属性为portraitorlandscape。
2.替换grid为scrollviewer和stackpanel。
代码演示：
xaml
<scrollviewer x:name="contentgrid" grid.row="1" verticalscrollbarvisibility="auto">
<!--you must apply a background to the stackpanel control or you
will be unable to pan the contents.-->
<stackpanel background="transparent" >
<!--adding various controls and ui elements.-->
<button content="this is a button" />
<rectangle width="100" height="100" margin="12,0"
horizontalalignment="left" fill="{staticresource phoneaccentbrush}"/>
<rectangle width="100" height="100" horizontalalignment="center"
fill="{staticresource phoneaccentbrush}"/>
<rectangle width="100" height="100" margin="12,0"
horizontalalignment="right" fill="{staticresource phoneaccentbrush}"/>
<textblock text="this is a line of text that will wrap in portrait
orientation but not landscape orientation." textwrapping="wrap" />
<checkbox content="a checkbox"/>
<radiobutton content="a radiobutton" />
</stackpanel>
</scrollviewer>
下图是运行效果。在纵屏中是不需要滚屏的，但是在横屏中就需要滚屏。
grid布局技巧
这个技巧的元素布局在grid中。当方向改变的时候，通过的方式对元素的在grid中的行和列重新定位。
这个技巧按如下方式操作：
1. 更改supportedorientations属性为portraitorlandscape。
2. 使用grid作为内容面板
3. 为orientationchanged事件定义事件处理程序来重新定位grid中的元素。
下面的示例是两行两列的grid中定位一个图片和一些按钮。orientationchanged事件处理代码在屏幕方向改变的时候对grid内的元素进行重新定位。【译者注：也就是更改子元素的grid.row和grid.column属性】
xaml
<grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">
<!--create a 2 x 2 grid to store an image and button layout.-->
<grid.rowdefinitions>
<rowdefinition height="auto"/>
<rowdefinition height="*"/>
</grid.rowdefinitions>
<grid.columndefinitions>
<columndefinition width="auto"/>
<columndefinition width="*"/>
</grid.columndefinitions>
<!--add an image to the grid. ensure the image height and width
are set to 300 and 500 respectively for this example.-->
<image x:name="image1" grid.row="0" grid.column="0"
stretch="fill" horizontalalignment="center" source="licorice.jpg"
height="300" width="500"/>
<!--add a stackpanel with buttons to the row beneath the image.-->
<stackpanel x:name="buttonlist" grid.row="1" grid.column="0"
horizontalalignment="center" >
<button content="action 1" />
<button content="action 2" />
<button content="action 3" />
<button content="action 4" />
</stackpanel>
</grid>
c#
private void phoneapplicationpage_orientationchanged(
object sender, orientationchangedeventargs e)
{
// switch the placement of the buttons based on an orientation change.
if ((e.orientation & pageorientation.portrait) == (pageorientation.portrait))
{
grid.setrow(buttonlist, 1);
grid.setcolumn(buttonlist, 0);
}
// if not in portrait, move buttonlist content to visible row and column.
else
{
grid.setrow(buttonlist, 0);
grid.setcolumn(buttonlist, 1);
}
}
效果如下图。在纵向屏幕中，按钮定位在底端。在横向屏幕中，按钮定位在右端。
【译者注：这部分的技巧是windows phone下的silverlight特有的，开发的时候为了使用户界面更友好一些，就需要支持屏幕的不同方向。另这里有两个概念被提到，原文是application bar和status bar，直译就是应用程序栏和状态栏，具体它们都是什么请参考下面的图片：
】
作者 netx宋卫东
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Windows Phone 7编程实践—推送通知(剖析推送通知实现架构)
Esri for Window Phone 7（一） 加载BingMap
浅谈ListBox在Windows Phone 7 中的使用
我要评论
网友评论