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