Windows Phone 7的屏幕方向及變更處理

本文簡單介紹Windows Phone 7的屏幕方向,以及屏幕方向變更時所做的處理。

     Windows Phone 7的屏幕方向分爲垂直方向和水平方向,但與之前Windows Mobile可以旋轉4個角度不同,Windows Phone 7垂直方向只有一種方向。還是用圖說的比較清楚:

1.垂直方向:

垂直方向不支持180度的旋轉了,想想也是,沒幾個人習慣把手機倒着用。

image

2.水平方向:

水平方向需要注意一下,水平方向分爲左水平方向和右水平方向,這是由於屏幕下部的ApplicationBar(應用工具欄)會根據該方向改變,ApplicationBar緊挨着電話的三個按鍵一側:

                   左水平方向                                                     右水平方向

image image

注意,系統托盤的方向也改變了,即顯示時間的那一條。

一般情況下,程序都要考慮屏幕方向的頁面佈局,要做出響應的處理,更要注意左水平方向和右水平方向的差異。

在項目中,添加新的頁面時,就可以選擇屏幕的方向:

image

PhoneApplicationPage頁面屬性Orientation可以設置應用程序頁面初始的方向,不過該屬性不能在代碼中設置,我試了一下,在代碼中可以設置該屬性,但是屏幕的方向沒有改變。那怎樣讓UI適應屏幕旋轉呢?PhoneApplicationPage的SupportedOrientations屬性來設置,但不要根據代碼修改屏幕的顯示方式。

SupportedPageOrientation.Landscape 支持水平方向

SupportedPageOrientation.Portrait 支持垂直方向

SupportedPageOrientation.PortraitOrLandscape 支持水平和垂直方向(頁面會在電話旋轉時自動選擇相應的頁面視圖)

 

示例

 

下面的示例演示屏幕方向的設置及變更處理:

創建一個Windows Phone 7的應用程序,

首先在Page中放入一個TextBlock,將其Text屬性設置爲垂直。

 

1 <TextBlock Height="36" HorizontalAlignment="Left" Margin="150,127,0,0" Name="textBlock1" Text="垂直" VerticalAlignment="Top" TextAlignment="Center" FontSize="30" Width="152" />

編譯執行,界面如下:

image

點擊右側旋轉按鈕,屏幕發生旋轉,當前沒有做任何處理,界面當然不會自適應水平狀態,界面如下:

image

默認情況下,MainPagePage的SupportedOrientations屬性被設置爲Portrait。

在XAML中將SupportedOrientations屬性設置爲PortraitOrLandscape。

1 SupportedOrientations="PortraitOrLandscape"

 

 

再編譯執行試試,很簡單吧,就一行代碼,屏幕就能自適應屏幕旋轉了 :) 界面如下:

image

當前屏幕已經是水平狀態了,想要做些處理,比如在TextBlock中顯示“水平”,這時就需要處理旋轉事件了。

在Page中加入OrientationChanged事件的處理。

 

01 private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
02 {
03     if (PageOrientation.LandscapeLeft == e.Orientation)
04     {
05         textBlock1.Text = "水平(左)";
06     }
07     else if (PageOrientation.LandscapeRight == e.Orientation)
08     {
09         textBlock1.Text = "水平(右)";
10     }
11     else
12     {
13         textBlock1.Text = "垂直";
14     }
15 }

這樣屏幕旋轉,TextBlock中的文字就會做出相應的改變了。屏幕旋轉的相關操作,都可以在該事件響應中處理。

界面如下:

image image

代碼下載

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章