zoukankan      html  css  js  c++  java

  • Windows Phone开发（6）：处理屏幕方向的改变 转：http://blog.csdn.net/tcjiaan/article/details/7273107

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

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

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

    [html] view plaincopyprint?
    1. <phone:PhoneApplicationPage   
    2.   
    3.     ..............  
    4.     SupportedOrientations="PortraitOrLandscape"   
    5.     Orientation="Portrait"  
    6.     OrientationChanged="PhoneApplicationPage_OrientationChanged">  


    一、Grid控件的处理。

    [html] view plaincopyprint?
    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>  


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

    [csharp] view plaincopyprint?
    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控件的处理。

    [html] view plaincopyprint?
    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>  


    后台事件处理代码。

    [csharp] view plaincopyprint?
    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控件的处理。

    [html] view plaincopyprint?
    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>  


    后台代码。后台代码。

    [csharp] view plaincopyprint?
    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. }  


    看看效果。看看效果。

    纵向。

    横向。
  • 相关阅读:
    关于IIS7发布网站
    二叉树遍历逆向
    山药熬粥补脾
    山萸肉补肝阴
    生黄芪痔疮
    酸石榴
    生石膏粉清实热
    熟地黄被肾阴
    龙眼肉(桂圆肉)
    鸡内金消食导滞
  • 原文地址：https://www.cnblogs.com/songtzu/p/2607176.html
Copyright © 2011-2022 走看看