[翻译]WP7 QuickStart-第八篇-屏幕方向

 

原文地址：http://create.msdn.com/en-us/education/quickstarts/screen_orientations

 

【译者注:这篇文章是翻译自微软官方的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宋卫东