[翻译]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，直译就是应用程序栏和状态栏，具体它们都是什么请参考下面的图片：

】