欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-07-03 18:44:52
  原文地址:http://create.msdn.com/en-us/education/quickstarts/screen_orientations   【译者注...

 

原文地址: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宋卫东