windows phone7 學習筆記08——螢幕方向

　　wp7支援豎屏和橫屏，但是預設情況下，Silverlight程式以縱向開始，XNA程式以橫向開始（遊戲通常在寬屏下表現會更好）。我們可以通過修改SupportedOrientations="Portrait" Orientation="Portrait"來更改螢幕支援和啟動的方向。

　　SupportedOrientations：支援螢幕的方向。有三種可選：

• Portrait (預設值)
• Landscape
• PortraitOrLandscape

　　Orientation：啟動螢幕的方向：

• Landscape
• LandscapeLeft (將電話向左翻轉，頭部在左)
• LandscapeRight (將電話向右翻轉，頭部在右)
• Portrait
• PortraitDown (正常的豎直方向)
• PortraitUp (倒置)

　　如果支援的方向為SupportedOrientations，那麼當翻轉螢幕時，系統會自動翻屏。但是一般系統自動翻轉處理的都不好，那麼就需要我們來重新布局，這是就要重寫OrientationChanged。

public About()        
{           
 　　InitializeComponent();    
 　　OrientationChanged += new EventHandler<OrientationChangedEventArgs>(About_OrientationChanged);        
}

 void About_OrientationChanged(object sender, OrientationChangedEventArgs e)       
 {           
 　　if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation== PageOrientation.LandscapeRight)           
 　　{                
　　 　　TitlePanel.Visibility = Visibility.Collapsed;      //橫屏不可見           
 　　}            
　　 else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation== PageOrientation.PortraitUp)           
 　　{                
 　　　　TitlePanel.Visibility = Visibility.Visible;       //豎屏可見
　　 }
 }

　　下面提兩個布局的技巧，如何是頁面翻轉後仍然好看。

　　1、使用自動調整大小和滾動

　　這個技巧需要在ScrollViewer控制項中使用StackPanel，適用於需要顯示列表資料或者一個控制項接著一個控制項顯示的情況。StackPanel允許將其內部的控制項一個接一個地顯示，ScrollViewer控制項允許轉屏的過程中當控制項超出螢幕的時候在StackPanel中顯示捲軸。

　　步驟是替換(不是在Grid下面添加)Grid為ScrollViewer和StackPanel。如：

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
　　<!--You must apply a background to the StackPanel control or you will be unable to pan the contents.-->
　　<StackPanel Background="Transparent" >
　　　　<!--Adding various controls and UI elements.-->
　　　　<Button Content="This is a Button" />
　　　　<Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<Rectangle Width="100" Height="100" HorizontalAlignment="Center" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
　　　　<TextBlock Text="This is a line of text that will wrap in portrait orientation but not landscape orientation." TextWrapping="Wrap" />
　　　　<CheckBox Content="A CheckBox"/>
　　　　<RadioButton Content="A RadioButton" />
　　</StackPanel>
</ScrollViewer>

 

　　2、使用Grid布局

　　這個技巧的元素布局在Grid中。當方向改變的時候，通過編程的方式對元素的在Grid中的行和列重新置放(即更改子項目的Grid.Row和Grid.Column屬性)。

　　XAML

            <!--Create a 2 x 2 grid to store an image and button layout.-->
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!--Add an image to the grid. Ensure that the image height and width are set to 300 and 500, respectively, for this example.-->           
<Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" Source="TestImage.jpg" Height="300" Width="500"/>


            <!--Add a StackPanel with buttons to the row beneath the image.-->
            <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" >
                <Button Content="Action 1" />
                <Button Content="Action 2" />
                <Button Content="Action 3" />
                <Button Content="Action 4" />
            </StackPanel>

　　C#

　　(1)在 MainPage.xaml 檔案的 XAML 代碼中，將以下代碼添加到頁面頂部的 phone:PhoneApplicationPage 下。

OrientationChanged="PhoneApplicationPage_OrientationChanged"

　　(2)轉到 MainPage.xaml.cs 並找到事件處理常式。下面的代碼根據方向更改來切換按鍵列表的位置。

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
// Switch the placement of the buttons based on an orientation change.

if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
            {
                Grid.SetRow(buttonList, 1);
                Grid.SetColumn(buttonList, 0);

            }

// If not in the portrait mode, move buttonList content to a visible row and column.

else
            {
                Grid.SetRow(buttonList, 0);
                Grid.SetColumn(buttonList, 1);

            }

        }

 

　　還有一篇文章是講解使用VisualState布置螢幕方向處理的，這個有需要的童鞋可以去看下：http://www.cnblogs.com/kiminozo/archive/2012/02/12/2347903.html

 

　　參考文章：http://msdn.microsoft.com/zh-cn/library/ff769553(VS.92).aspx