码迷，mamicode.com
首页 > Windows程序 > 详细

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

时间：2017-05-09 23:18:11      阅读：513      评论：0      收藏：0      [点我收藏+]

标签：phone   run   control   reg   horizon   text   bre   技术   assembly   

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

 
前面我们讨论过，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开发（6）：处理屏幕方向的改变

标签：phone   run   control   reg   horizon   text   bre   技术   assembly   

原文地址：http://www.cnblogs.com/xieweikai/p/6833109.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！