Windows Phone 7 開發 31 日談——第4日：裝置方向

l_serein發表於2012-10-30
Windows

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談” 系列的第4日。

 

    昨天我們討論了Windows Phone的一個專用硬體按鈕——返回鍵.今天我們聚焦另一個硬體特性:裝置方向。

 

縱向和橫向

    這兩個術語區別並不太明顯，縱向是裝置的垂直方向，橫向是水平方向。這兩種方向在Windows Phone 7中都支援，但預設情況下，Silverlight程式以縱向開始，XNA程式以橫向開始（遊戲通常在寬屏下表現會更好）。本篇文章中，我們只討論Silverlight程式，以及方向改變後如何去做，因為在使用者使用程式時方向的變化是不可避免的。

 

預設專案是“只支援縱向的”

    如果你看一下MainPage.xaml檔案的頭部資訊，會發現兩個屬性：SupportedOrientations="Portrait" Orientation="Portrait"

    可以將SupportedOrientations想象成你準備在程式中支援的可能發生的情況的列表。你可以將SupportedOrientations設定成以下3個值中的任意一個：

  • Portrait (預設值)
  • Landscape
  • PortraitOrLandscape

Orientation屬性是想讓你的程式在啟動時以何種方式呈現。它有更多的值可選，但記住如果想要以 橫向 模式啟動，你需要將橫向包含到SupportedOrientations中。下面是Orientation值的列表：

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

你可以看到在上表中不僅可以指定縱向或橫向，還可以指定這些方向的排列方式。這允許你用你喜歡的方向開始你的應用程式。

 

改變方向

    有兩種方式可以改變裝置的方向。第一將SupportedOrientation設定為“PortraitOrLandscape”讓作業系統為你實現。在大多數情況下，並不推薦這樣做，因為你的應用程式介面可能不再適應螢幕了。第二種方式是通過程式碼實現。我們來看一個例子。

這個簡單的介面佔據了整個豎直方向的螢幕。

clip_image001

clip_image002

    你可以看到在橫向時，很多按鈕不在螢幕之中。這不是理想的使用者體驗。簡單解決方法是去掉標題。我確信我們的使用者可以看出這是一個計算器。我們可以對按鈕進行重新佈局，如果對於程式來說有意義，那就去做！本篇文章的目的是告訴你如何 改變你的程式，而不是告訴你應該改變什麼 。我用了以下的程式碼來使標題欄消失和重現（這是MainPage.xaml.cs檔案的全部內容）：

[c-sharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Documents;  
  8. using System.Windows.Input;  
  9. using System.Windows.Media;  
  10. using System.Windows.Media.Animation;  
  11. using System.Windows.Shapes;  
  12. using Microsoft.Phone.Controls;  
  13. namespace Day4_DeviceOrientation  
  14. {  
  15.     public partial class MainPage : PhoneApplicationPage  
  16.     {  
  17.         // Constructor  
  18.         public MainPage()  
  19.         {  
  20.             InitializeComponent();  
  21.             this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);  
  22.         }  
  23.         void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)  
  24.         {  
  25.             if ((e.Orientation == PageOrientation.LandscapeRight)||(e.Orientation == PageOrientation.LandscapeLeft))  
  26.             {  
  27.                 TitlePanel.Visibility = Visibility.Collapsed;  
  28.             }  
  29.             else if ((e.Orientation == PageOrientation.PortraitDown) || (e.Orientation == PageOrientation.PortraitUp))  
  30.             {  
  31.                 TitlePanel.Visibility = Visibility.Visible;  
  32.             }  
  33.         }  
  34.     }  
  35. }  

    因為我只關注程式是橫向還是縱向（而不是所有的方向），所以同時檢測這兩個狀態並相應地調整介面。你可以將每種情況分開處理使介面看起來不同。

    注意我為OrientationChanged事件建立的處理程式。這是一個在方向改變時最簡單的識別方法，通常你可以使用將在第11天介紹的加速計。看一下使用新程式碼後最終的例子：

clip_image003

下載示例程式碼

這不是一個可以使用的計算器，但作為一個初學者專案你可以試試。歡迎下載這個專案，並新增缺失的功能。

clip_image004

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-4-Device-Orientation.aspx

相關文章