windows phone7 学习笔记08——屏幕方向
wp7支持竖屏和横屏，但是默认情况下，Silverlight程序以纵向开始，XNA程序以横向开始（游戏通常在宽屏下表现会更好）。我们可以通过修改SupportedOrientations="Portrait" Orientation="Portrait"来更改屏幕支持和启动的方向。
SupportedOrientations：支持屏幕的方向。有三种可选：
- Portrait (默认值)
- Landscape
- PortraitOrLandscape
Orientation：启动屏幕的方向：
- Landscape
- LandscapeLeft (将电话向左翻转，头部在左)
- LandscapeRight (将电话向右翻转，头部在右)
- Portrait
- PortraitDown (正常的竖直方向)
- PortraitUp (倒置)
如果支持的方向为SupportedOrientations，那么当翻转屏幕时，系统会自动翻屏。但是一般系统自动翻转处理的都不好，那么就需要我们来重新布局，这是就要重写OrientationChanged。
public About()
{
InitializeComponent();
OrientationChanged += new EventHandler<OrientationChangedEventArgs>(About_OrientationChanged);
}
void About_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation== PageOrientation.LandscapeRight)
{
TitlePanel.Visibility = Visibility.Collapsed; //横屏不可见
}
else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation== PageOrientation.PortraitUp)
{
TitlePanel.Visibility = Visibility.Visible; //竖屏可见
}
}
下面提两个布局的技巧，如何是页面翻转后仍然好看。
1、使用自动调整大小和滚动
这个技巧需要在ScrollViewer控件中使用StackPanel，适用于需要显示列表数据或者一个控件接着一个控件显示的情况。StackPanel允许将其内部的控件一个接一个地显示，ScrollViewer控件允许转屏的过程中当控件超出屏幕的时候在StackPanel中显示滚动条。
步骤是替换(不是在Grid下面添加)Grid为ScrollViewer和StackPanel。如：
<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>
2、使用Grid布局
这个技巧的元素布局在Grid中。当方向改变的时候，通过编程的方式对元素的在Grid中的行和列重新定位(即更改子元素的Grid.Row和Grid.Column属性)。
XAML
<!--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 that 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="TestImage.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>
C#
(1)在 MainPage.xaml 文件的 XAML 代码中，将以下代码添加到页面顶部的 phone:PhoneApplicationPage 下。
OrientationChanged="PhoneApplicationPage_OrientationChanged"
(2)转到 MainPage.xaml.cs 并找到事件处理程序。下面的代码根据方向更改来切换按键列表的位置。
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 the portrait mode, move buttonList content to a visible row and column.
else
{
Grid.SetRow(buttonList, 0);
Grid.SetColumn(buttonList, 1);
}
}
还有一篇文章是讲解使用VisualState布置屏幕方向处理的，这个有需要的童鞋可以去看下：http://www.cnblogs.com/kiminozo/archive/2012/02/12/2347903.html
参考文章：http://msdn.microsoft.com/zh-cn/library/ff769553(VS.92).aspx
