[Silverlight] 當麻許的Phone7筆記 - 7.裝置方向(Device Orientation)
昨天我們敘述有關於 在Windows Phone 7 上面製作樞紐應用程式(Pivot Application) …
今天我們來談談有關於硬體裝置方向的功能。
其實微軟在模擬器上面很貼心(當然還是有很多地方尚顯不足),他有做到手機模擬轉方向時的狀態…
讓開發者可以在進行處理在裝置不同轉向的時候,需要做的處理。
網路上看到文獻,XNA開發預設是用橫向的,而Silverlight 則是直向的(看過去範例也知道..XD)…
當然接下來我只會用Silverlight 這邊的方式..因為我目前也只會Silverlight…(殘念
首先我們先開啟一個專案來觀察一下…
打開 Windows Phone Application 類型專案,並且取個名字,範例名稱為 : SampleDeviceOrientation
觀察一下預設的XAML Code(預設註解的Code我先刪除) :
其中有兩個屬性跟方向有關一個是 SupportedOrientations 另外一個是 Orientation
預設皆為 Portrait(直式) …
SupportedOrientations 的屬性有三個,此屬性你可以想說是你的APP頁面是支援哪一種方向擺放的顯示方式
Portrait 直式/預設的
Landscape 橫式
PortraitOrLandscape 上面兩者皆支援
Orientation 的屬性如下:
None | 沒有指定方向 |
Portrait | 直向 |
Landscape | 橫向 |
PortraitUp | 直向 |
PortraitDown | 橫向(似乎目前無效) |
LandscapeLeft | 橫向且頁面的頭旋轉到左邊 |
LandscapeRight | 橫向且頁面的頭旋轉到右邊 |
此屬性是指你的APP啟動時是用何種方式呈現,如果您是用橫式呈現,就必須要配合
SupportedOrientations 一起調整
如果沒有一起調整在Visual Studio 會這樣提醒你…

接下來我們來實做一個例子,在APP轉向時,我們來改變 TextBlock 裡面的字,顯示現在使用者的手持裝置的Orientation狀態
首先:
1.先得把 SupportedOrientations 屬性改成直向/橫向 都支援的 PortraitOrLandscape
2.我在ContentPanel 內加入一個 TextBlock 命名為 Orientation 選轉時的變化…
3.我在 PhoneApplicationPage 中加入 OrientationChanged 的事件

C# Code :
using Microsoft.Phone.Controls; namespace SampleDeviceOrientation { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { this.txtOrient.Text = (e.Orientation.ToString()); } } }
執行結果:
橫向,頁面頂部向左 :

橫向,頁面頂部向右:

直向:

這樣可以觀察初期變化跟 Orientation 的狀態,當然一般設計APP很少設計都支援的…
但是有時候如果有這樣的設計或是需求,可以靠這方法去偵測並且做出最好的呈現給使用者…
快要天亮了,晚安先睡了…
讚一下:
檔案下載:
標籤:
教學,
Silverlight,
Windows Phone 7
|
This entry was posted on 下午2:35
and is filed under
教學
,
Silverlight
,
Windows Phone 7
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 意見:
張貼留言