Windows Phone開發（6）：處理螢幕方向的改變

俺們都知道，智能手機可以通過旋轉手機來改變螢幕的顯示方向，更多的時候，對於螢幕方向的改變，我們要做出相應的處理，例如，當手機螢幕方向從縱向變為橫向時，可能要重新排列頁面上的控制項以適應顯示地區的變化。

前面我們討論過，Silverlight for Windows Phone的頁面配置有三個常用的布局控制項，那麼，當螢幕方向改變後，我們所做的對布局的更改基礎上是基於這幾個容器進行的操作。本文我將通過三個樣本來分別說明。開始之前，先說一下PhoneApplicationPage類的OrientationChanged事件，該事件就是當螢幕的方向改變之後發生，我們從事件參數OrientationChangedEventArgs類的執行個體的Orientation屬性中擷取當前螢幕的方向，即改變後的方向，比如，原來螢幕是縱向，現在我把手機螢幕改為橫向，則Orientation屬性擷取到的方向就是橫向的，呵呵，當然也包括從哪個方向旋轉過來的，這裡只是舉例而已。

要使頁面支援旋轉，要把PhoneApplicationPage的SupportedOrientations屬性改為PortraitOrLandscape，然後可以通過定義OrientationChanged事件來處理布局。形如：

<phone:PhoneApplicationPage     ..............    SupportedOrientations="PortraitOrLandscape"     Orientation="Portrait"    OrientationChanged="PhoneApplicationPage_OrientationChanged">

一、Grid控制項的處理。

<phone:PhoneApplicationPage     x:Class="Sample_PageDir.Page1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True"    SupportedOrientations="PortraitOrLandscape"     Orientation="Portrait"    OrientationChanged="PhoneApplicationPage_OrientationChanged">    <Grid x:Name="layoutRoot">        <Grid.RowDefinitions>            <RowDefinition Height="Auto" />            <RowDefinition Height="Auto" />        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="Auto" />            <ColumnDefinition Width="Auto" />        </Grid.ColumnDefinitions>        <Image x:Name="img" Source="http://gubapic.eastmoney.com/member/e68/e681999/e68199920091216131540.jpg" Stretch="UniformToFill" Width="270" Grid.Row="0" Grid.Column="0" />        <TextBlock x:Name="txtBlock"            Grid.Row="1"            Grid.Column="0"            FontSize="70"            Margin="28">            <Run Foreground="Coral">信春哥</Run>            <LineBreak/>            <Run Foreground="Yellow">唱情歌</Run>            <LineBreak/>            <Run Foreground="SkyBlue">不掛科</Run>        </TextBlock>    </Grid></phone:PhoneApplicationPage>

頁面主要有兩個控制項，一個用於顯示圖片，一個用於顯示文本資訊，通過事件處理代碼來相應改變兩個控制項的布局。

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        {            // 如果是橫向的            if (e.Orientation == PageOrientation.Landscape ||                e.Orientation == PageOrientation.LandscapeLeft ||                e.Orientation == PageOrientation.LandscapeRight)            {                Grid.SetColumn(this.img, 0);                Grid.SetRow(this.img, 0);                Grid.SetRow(this.txtBlock, 0);                Grid.SetColumn(this.txtBlock, 1);            }            // 如果是縱向            else if (e.Orientation == PageOrientation.Portrait ||                e.Orientation == PageOrientation.PortraitDown ||                e.Orientation == PageOrientation.PortraitUp)            {                Grid.SetColumn(this.img, 0);                Grid.SetRow(this.img, 0);                Grid.SetRow(this.txtBlock, 1);                Grid.SetColumn(this.txtBlock, 0);            }            else            {                Grid.SetColumn(this.img, 0);                Grid.SetRow(this.img, 0);                Grid.SetRow(this.txtBlock, 1);                Grid.SetColumn(this.txtBlock, 0);            }        }

按F5運行程式，預設的螢幕方向是縱向的，如所示：

 

好，現在，我們把旋轉螢幕一下，看看會怎麼樣。

 

 

 二、StackPanel控制項的處理。

<phone:PhoneApplicationPage     x:Class="Sample_PageDir.Page2"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="PortraitOrLandscape"    OrientationChanged="PhoneApplicationPage_OrientationChanged"    Orientation="Portrait"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True">    <phone:PhoneApplicationPage.Resources>        <Style TargetType="TextBlock">            <Setter Property="FontSize" Value="46"/>        </Style>    </phone:PhoneApplicationPage.Resources>        <StackPanel x:Name="pl">        <TextBlock Text="文本一"/>        <TextBlock Text="文本二"/>        <TextBlock Text="文本三"/>    </StackPanel></phone:PhoneApplicationPage>

後台事件處理代碼。

 

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        {            if (e.Orientation == PageOrientation.Landscape ||                e.Orientation == PageOrientation.LandscapeLeft ||                e.Orientation == PageOrientation.LandscapeRight)            {                this.pl.Orientation = System.Windows.Controls.Orientation.Horizontal;            }            else            {                this.pl.Orientation = System.Windows.Controls.Orientation.Vertical;            }        }

運行，預設方向是縱向。

 

 

把旋轉螢幕後。

 

 

三、Canvas控制項的處理。

<phone:PhoneApplicationPage     x:Class="Sample_PageDir.Page3"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="PortraitOrLandscape"    Orientation="Portrait"    OrientationChanged="PhoneApplicationPage_OrientationChanged"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True">    <Canvas x:Name="cv">        <Rectangle x:Name="rect1"            Width="232"            Height="238"            Fill="Red"            Canvas.Left="88"            Canvas.Top="88"/>        <Rectangle x:Name="rect2"            Height="192"            Width="275"            Fill="Yellow"            Canvas.Top="268"            Canvas.Left="155"/>    </Canvas></phone:PhoneApplicationPage>

後台代碼。後台代碼。

 

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        {            if (e.Orientation== PageOrientation.Landscape||e.Orientation== PageOrientation.LandscapeLeft||e.Orientation== PageOrientation.LandscapeRight)            {                Canvas.SetTop(this.rect1, 37);                Canvas.SetLeft(this.rect1, 46);                Canvas.SetTop(this.rect2, 240);                Canvas.SetLeft(this.rect2, 462);            }            else            {                Canvas.SetTop(this.rect1, 88);                Canvas.SetLeft(this.rect1, 88);                Canvas.SetTop(this.rect2, 268);                Canvas.SetLeft(this.rect2, 155);            }        }

看看效果。看看效果。

 

縱向。

 

 

橫向。