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

標籤：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）：處理螢幕方向的改變