Windows Phone开发：处理屏幕方向的改变

Posted 谢维开

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Windows Phone开发：处理屏幕方向的改变相关的知识，希望对你有一定的参考价值。

俺们都知道，智能手机可以通过旋转手机来改变屏幕的显示方向，更多的时候，对于屏幕方向的改变，我们要做出相应的处理，例如，当手机屏幕方向从纵向变为横向时，可能要重新排列页面上的控件以适应显示区域的变化。

 
前面我们讨论过，Silverlight for Windows Phone的页面布局有三个常用的布局控件，那么，当屏幕方向改变后，我们所做的对布局的更改基础上是基于这几个容器进行的操作。
 
本文我将通过三个示例来分别说明。
开始之前，先说一下PhoneApplicationPage类的OrientationChanged事件，该事件就是当屏幕的方向改变之后发生，我们从事件参数OrientationChangedEventArgs类的实例的Orientation属性中获取当前屏幕的方向，即改变后的方向，比如，原来屏幕是纵向，现在我把手机屏幕改为横向，则Orientation属性获取到的方向就是横向的，呵呵，当然也包括从哪个方向旋转过来的，这里只是举例而已。
 

要使页面支持旋转，要把PhoneApplicationPage的SupportedOrientations属性改为PortraitOrLandscape，然后可以通过定义OrientationChanged事件来处理布局。形如：

  1. <phone:PhoneApplicationPage   
  2.   
  3.     ..............  
  4.     SupportedOrientations="PortraitOrLandscape"   
  5.     Orientation="Portrait"  
  6.     OrientationChanged="PhoneApplicationPage_OrientationChanged">  


一、Grid控件的处理。

  1. <phone:PhoneApplicationPage   
  2.     x:Class="Sample_PageDir.Page1"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
  10.     FontSize="{StaticResource PhoneFontSizeNormal}"  
  11.     Foreground="{StaticResource PhoneForegroundBrush}"  
  12.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"  
  13.     shell:SystemTray.IsVisible="True"  
  14.     SupportedOrientations="PortraitOrLandscape"   
  15.     Orientation="Portrait"  
  16.     OrientationChanged="PhoneApplicationPage_OrientationChanged">  
  17.   
  18.     <Grid x:Name="layoutRoot">  
  19.         <Grid.RowDefinitions>  
  20.             <RowDefinition Height="Auto" />  
  21.             <RowDefinition Height="Auto" />  
  22.         </Grid.RowDefinitions>  
  23.         <Grid.ColumnDefinitions>  
  24.             <ColumnDefinition Width="Auto" />  
  25.             <ColumnDefinition Width="Auto" />  
  26.         </Grid.ColumnDefinitions>  
  27.         <Image x:Name="img" Source="http://gubapic.eastmoney.com/member/e68/e681999/e68199920091216131540.jpg" Stretch="UniformToFill" Width="270" Grid.Row="0" Grid.Column="0" />  
  28.         <TextBlock x:Name="txtBlock"  
  29.             Grid.Row="1"  
  30.             Grid.Column="0"  
  31.             FontSize="70"  
  32.             Margin="28">  
  33.             <Run Foreground="Coral">信春哥</Run>  
  34.             <LineBreak/>  
  35.             <Run Foreground="Yellow">唱情歌</Run>  
  36.             <LineBreak/>  
  37.             <Run Foreground="SkyBlue">不挂科</Run>  
  38.         </TextBlock>  
  39.     </Grid>  
  40.   
  41. </phone:PhoneApplicationPage>  


页面主要有两个控件，一个用于显示图片，一个用于显示文本信息，通过事件处理代码来相应改变两个控件的布局。

  1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)  
  2. {  
  3.     // 如果是横向的  
  4.     if (e.Orientation == PageOrientation.Landscape ||  
  5.         e.Orientation == PageOrientation.LandscapeLeft ||  
  6.         e.Orientation == PageOrientation.LandscapeRight)  
  7.     {  
  8.         Grid.SetColumn(this.img, 0);  
  9.         Grid.SetRow(this.img, 0);  
  10.         Grid.SetRow(this.txtBlock, 0);  
  11.         Grid.SetColumn(this.txtBlock, 1);  
  12.     }  
  13.     // 如果是纵向  
  14.     else if (e.Orientation == PageOrientation.Portrait ||  
  15.         e.Orientation == PageOrientation.PortraitDown ||  
  16.         e.Orientation == PageOrientation.PortraitUp)  
  17.     {  
  18.         Grid.SetColumn(this.img, 0);  
  19.         Grid.SetRow(this.img, 0);  
  20.         Grid.SetRow(this.txtBlock, 1);  
  21.         Grid.SetColumn(this.txtBlock, 0);  
  22.     }  
  23.     else  
  24.     {  
  25.         Grid.SetColumn(this.img, 0);  
  26.         Grid.SetRow(this.img, 0);  
  27.         Grid.SetRow(this.txtBlock, 1);  
  28.         Grid.SetColumn(this.txtBlock, 0);  
  29.     }  
  30. }  


按F5运行程序，默认的屏幕方向是纵向的，如下图所示：

技术分享

 

好，现在，我们把屏幕旋转一下，看看会怎么样。

 

技术分享

 

 

二、StackPanel控件的处理。

  1. <phone:PhoneApplicationPage   
  2.     x:Class="Sample_PageDir.Page2"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
  10.     FontSize="{StaticResource PhoneFontSizeNormal}"  
  11.     Foreground="{StaticResource PhoneForegroundBrush}"  
  12.     SupportedOrientations="PortraitOrLandscape"  
  13.     OrientationChanged="PhoneApplicationPage_OrientationChanged"  
  14.     Orientation="Portrait"  
  15.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"  
  16.     shell:SystemTray.IsVisible="True">  
  17.   
  18.     <phone:PhoneApplicationPage.Resources>  
  19.         <Style TargetType="TextBlock">  
  20.             <Setter Property="FontSize" Value="46"/>  
  21.         </Style>  
  22.     </phone:PhoneApplicationPage.Resources>  
  23.       
  24.     <StackPanel x:Name="pl">  
  25.         <TextBlock Text="文本一"/>  
  26.         <TextBlock Text="文本二"/>  
  27.         <TextBlock Text="文本三"/>  
  28.     </StackPanel>  
  29. </phone:PhoneApplicationPage>  


后台事件处理代码。

 

  1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)  
  2. {  
  3.     if (e.Orientation == PageOrientation.Landscape ||  
  4.         e.Orientation == PageOrientation.LandscapeLeft ||  
  5.         e.Orientation == PageOrientation.LandscapeRight)  
  6.     {  
  7.         this.pl.Orientation = System.Windows.Controls.Orientation.Horizontal;  
  8.     }  
  9.     else  
  10.     {  
  11.         this.pl.Orientation = System.Windows.Controls.Orientation.Vertical;  
  12.     }  
  13. }  


运行，默认方向是纵向。

 

技术分享

 

把屏幕旋转后。

 

技术分享

 

三、Canvas控件的处理。

  1. <phone:PhoneApplicationPage   
  2.     x:Class="Sample_PageDir.Page3"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
  10.     FontSize="{StaticResource PhoneFontSizeNormal}"  
  11.     Foreground="{StaticResource PhoneForegroundBrush}"  
  12.     SupportedOrientations="PortraitOrLandscape"  
  13.     Orientation="Portrait"  
  14.     OrientationChanged="PhoneApplicationPage_OrientationChanged"  
  15.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"  
  16.     shell:SystemTray.IsVisible="True">  
  17.   
  18.     <Canvas x:Name="cv">  
  19.         <Rectangle x:Name="rect1"  
  20.             Width="232"  
  21.             Height="238"  
  22.             Fill="Red"  
  23.             Canvas.Left="88"  
  24.             Canvas.Top="88"/>  
  25.         <Rectangle x:Name="rect2"  
  26.             Height="192"  
  27.             Width="275"  
  28.             Fill="Yellow"  
  29.             Canvas.Top="268"  
  30.             Canvas.Left="155"/>  
  31.     </Canvas>  
  32.   
  33. </phone:PhoneApplicationPage>  


后台代码。后台代码。

 

  1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)  
  2. {  
  3.     if (e.Orientation== PageOrientation.Landscape||e.Orientation== PageOrientation.LandscapeLeft||e.Orientation== PageOrientation.LandscapeRight)  
  4.     {  
  5.         Canvas.SetTop(this.rect1, 37);  
  6.         Canvas.SetLeft(this.rect1, 46);  
  7.         Canvas.SetTop(this.rect2, 240);  
  8.         Canvas.SetLeft(this.rect2, 462);  
  9.     }  
  10.     else  
  11.     {  
  12.         Canvas.SetTop(this.rect1, 88);  
  13.         Canvas.SetLeft(this.rect1, 88);  
  14.         Canvas.SetTop(this.rect2, 268);  
  15.         Canvas.SetLeft(this.rect2, 155);  
  16.     }  
  17. }  


看看效果。看看效果。

 

纵向。

技术分享

 

 

横向。

技术分享

 








以上是关于Windows Phone开发：处理屏幕方向的改变的主要内容，如果未能解决你的问题，请参考以下文章

Windows Phone开发（13）：如何规范用户的输入行为

Windows Phone开发（19）：三维透视效果

粮草先行——Android折叠屏开发技术点番外篇之运行时变更处理原则

处理 Windows Phone 应用中的“后退”按钮 (XAML)

Windows Phone 8 中的响应式 UI

Windows Phone开发：当好总舵主