Windows phone開發初體驗之(四)-處理Windows Phone 中的方向更改

在手機應用程式開發過程中我們時常的要面對著這樣的一個問題：就是程式的橫豎屏的問題，我們要讓我們的應用程式獲得更好的使用者體驗就必須在使用者無論是豎屏還是橫屏顯示的一些效果還是完好的，沒有變樣，我們知道在Android裡我們可以通過Activity的android:orientations來強制的設定應用程式顯示的方式是為橫屏還是豎屏，同樣在Windows phone7也存在著類似的這樣的屬性：SupportedOrientations

設定應用螢幕顯示的方式有兩種：

1.        可以在.xaml檔案中添加如下的屬性：

    SupportedOrientations="PortraitOrLandscape"

其值還有：

屬性值	含義
Portrait	表明應用程式可能支援的方向是豎屏
Landscape	表明應用程式可能支援的方向是橫屏
PortraitOrLandscape	兩種都支援

 

2.        可以在頁面的載入事件中指定屬性

private voidPhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)        {            this.SupportedOrientations= SupportedPageOrientation.PortraitOrLandscape;        } 

樣本：通過屬性來設定

在MainPage.xaml中用如下的代碼，其中SupportedOrientations的值設定為PortraitOrLandscape

<phone:PhoneApplicationPage     x:Class="OrientationsDemo.MainPage"    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"    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">    <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <!--TitlePanel 包含應用程式的名稱和網頁標題-->        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">            <TextBlock x:Name="ApplicationTitle" Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}"/>            <TextBlock x:Name="PageTitle" Text="方向改變" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>        </StackPanel>        <ScrollViewer Grid.Row="1"  Name="scrollViewer1"   VerticalScrollBarVisibility="Auto">            <StackPanel Background="Transparent" >                <!--Adding various controls and UI elements.-->                <Button Content="This is a Button" />                <Rectangle Height="100" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="116" Fill="#FFBE2C2C" HorizontalAlignment="Left" />                <Rectangle Fill="#FF762A2A" Height="100" Name="rectangle2" Stroke="Black" StrokeThickness="1" Width="121" HorizontalAlignment="Center" />                <Rectangle Height="100" Name="rectangle3" Stroke="Black" StrokeThickness="1" Width="134" Fill="#FF3C8ABA" HorizontalAlignment="Right" />                <TextBox Height="71" Name="textBox1" Text="TextBox" Width="460" />                <TextBox Height="71" Name="textBox2" Text="TextBox" Width="460" />                <TextBox Height="71" Name="textBox3" Text="TextBox" Width="460" />            </StackPanel>        </ScrollViewer>    </Grid>     <!--示範 ApplicationBar 用法的範例程式碼-->    <!--<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="按鈕 1"/>            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按鈕 2"/>            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="功能表項目 1"/>                <shell:ApplicationBarMenuItem Text="功能表項目 2"/>            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>--></phone:PhoneApplicationPage>

實現的效果為：

      

 

樣本：通過代碼動態來改變布局方式從而來達到同樣的效果

在MainPage.xaml檔案中放入以下的代碼：

<phone:PhoneApplicationPage    x:Class="OrientationsDemo.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}"    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True"OrientationChanged="PhoneApplicationPage_OrientationChanged">     <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot" Background="Transparent">       <Grid.RowDefinitions>           <RowDefinition Height="Auto"/>           <RowDefinition Height="*"/>       </Grid.RowDefinitions>        <!--TitlePanel包含應用程式的名稱和網頁標題-->       <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">           <TextBlock x:Name="ApplicationTitle" Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}"/>           <TextBlock x:Name="PageTitle" Text="頁面名稱" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>       </StackPanel>        <!--ContentPanel- 在此處放置其他內容-->       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">           <Grid.RowDefinitions>                <RowDefinition Height="Auto"/>                <RowDefinition Height="*"/>           </Grid.RowDefinitions>           <Grid.ColumnDefinitions>                <ColumnDefinition Width="Auto"/>                <ColumnDefinition Width="*"/>           </Grid.ColumnDefinitions>           <Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" Source="/OrientationsDemo;component/images/image01.jpg" Height="300" Width="500"/>             <!--Add aStackPanel with buttons to the row beneath the image.-->           <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" >                <Button Content="Action1" />                <Button Content="Action2" />                <Button Content="Action3" />                <Button Content="Action4" />           </StackPanel>       </Grid>    </Grid>     <!--示範 ApplicationBar 用法的範例程式碼-->    <!--<phone:PhoneApplicationPage.ApplicationBar>       <shell:ApplicationBar IsVisible="True"IsMenuEnabled="True">           <shell:ApplicationBarIconButtonIconUri="/Images/appbar_button1.png" Text="按鈕 1"/>           <shell:ApplicationBarIconButtonIconUri="/Images/appbar_button2.png" Text="按鈕 2"/>           <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItemText="功能表項目 1"/>               <shell:ApplicationBarMenuItem Text="功能表項目 2"/>           </shell:ApplicationBar.MenuItems>       </shell:ApplicationBar>   </phone:PhoneApplicationPage.ApplicationBar>--> </phone:PhoneApplicationPage>  

然後在MainPage.xaml.cs檔案中寫下如下的代碼：

這裡是做了判斷的  用於來擷取螢幕的方向，我們來設定Grid裡旋轉的控制項的位置

if((e.Orientation & PageOrientation.Portrait)== (PageOrientation.Portrait))            {                Grid.SetRow(buttonList, 1);                Grid.SetColumn(buttonList, 0);             }            // If not in the portrait mode, move buttonList content toa visible row and column.             else            {                Grid.SetRow(buttonList, 0);                Grid.SetColumn(buttonList, 1);             } 

實現的效果：

          

為了一個對比的學習方法，我們知道在Android中螢幕方向的改變會導致Activity的生命週期函數會發生一些改變，而在Windows phone是講的應用程式生命週期，所以經過測試，其應用程式生命週期函數並未發生什麼大的變化

如需轉載引用請註明出處：http://blog.csdn.net/jiahui524