Windows Phone 7實戰 第一天 設計啟動頁面和應用程式圖示

每一個 Windows Phone 7 應用程式在啟動時多少會花上一些時間，在這個等待的時刻經常都會擺放一些啟動畫面 (Splash screen) 先來充充場面，以免載入時間過長而導致使用者不耐煩，而在這個啟動螢幕裡是一個很好的宣傳頁面，可以把產品的廣告，作者介紹在這裡顯示、品牌資訊都顯示在這個頁面裡，當然時間不能太長、也不能太短，否則若這個啟動螢幕跑得太快，那就沒有出現的必要性了，有時後這種必要的“慢”也是一種藝術。

首先我們建立一個預設的Silverlight For windows  Phone的項目

 

我們就是要製作一個二維碼產生器應用程式啦，選用芒果應用程式 Windows Phone OS 7.1。

然後新增一個頁面  Windows Phone Portrait Page 頁面，並取名為 SplashScreen.xaml， 方法是右擊工程，選擇Add→New Item→Windows Phone Portait Page，把頁面裡面的所有介面元素刪除，添加一個Image控制項到SplashScreen.xaml頁面。

由於 Windows Phone 7 的螢幕大小目前都固定為 480 (寬) x 800 (高)，而且我們希望這個啟動畫面能夠佔滿整個畫面，所以我們必須調整 Image 控制項的屬性，這是通過過拖曳的方式並不精準，直接修改屬性會比較快些。

接著準備一張 480 x 800 的圖片（注意：不能使用 GIF 格式的圖檔），在此我的圖檔案名稱為 SplashScreen.png 並把它放到一個 Images 目錄裡 。

然後調整 Image 控制項的屬性，設定Source 屬性到這張圖片。我們也可以將 SplashScreen.png 檔案的 Build Action 項目屬性從 Embedded Resource 調整為 Content，此舉的主要目的是為了降低 WP7 組件的大小，以加快整體應用程式的載入速度。不過修改了檔案的項目屬性後，你的 Image 控制項的 Source 屬性也要跟著調整，且必須調整為相對於項目根目錄的絕對路徑，用文字描述比較難懂，看圖吧：

我們之所以要做“啟動畫面”，目的可能有兩種：

1. 因為應用程式需要初始化的時間太長，所以需要先顯示一個簡單的等待頁面。而這也是 Windows Phone Application Certification Requirements 的要求之一（請參見 Technical Certification Requirements 頁面的 5.2.1 Launch Time 這一條規則），而這也是學會設計啟動畫面如此重要的原因之一。
2. 程式執行的太快，使用者沒有 感覺，但要慢也要慢的優雅而從容。

要讓 MainPage.xaml 正式開始執行之前，我們希望能先跳 SplashScreen.xaml 頁面出來，我們使用的技巧是透過一個 Popup 視窗擋住 MainPage.xaml 頁面，而這個 Popup 視窗裡就是包裹著 SplashScreen.xaml 頁面，以下是程式的寫法：

     private BackgroundWorker backroungWorker;  
     private Popup myPopup; 

      // Constructor
      public MainPage()
      {
          InitializeComponent();
          myPopup = new Popup() { IsOpen = true, Child = new SplashScreen() };

          backroungWorker = new BackgroundWorker();
          RunBackgroundWorker();

      }

      private void RunBackgroundWorker()
      {
          backroungWorker.DoWork += ((s, args) =>
          {
              Thread.Sleep(3000);
          });

          backroungWorker.RunWorkerCompleted += ((s, args) =>
          {
              this.Dispatcher.BeginInvoke(() =>
              {
                  this.myPopup.IsOpen = false;
              });
          });

          backroungWorker.RunWorkerAsync();
      }

我們讓啟動畫面顯示3秒鐘，然後自動關閉。F5 就可以看到效果了。

啟動頁面做好了，接著我們進行下一項任務就是設定應用程式圖示。

WMAppManifest.xml檔案還定義了表徵圖，背景映像和應用程式標題，你可以用PNG位元影像檔案作為表徵圖，預設表徵圖檔案是 ApplicationIcon.png，預設背景映像是Backgroud.png，你可以編輯XML代碼或在項目屬性的“應用程式”標籤頁修改這些屬 性的值。

今天我學到了如何有時後 GUI 介面不見得最方便，有時後手動修改 XAML 或調整屬性值比用圖形介面來拖曳來的方便。WP7 並不支援 GIF 圖檔（這是有專利的圖形格式），使用時應該避免使用 GIF 圖檔案，否則看不到圖片你還會覺得是 WP7 的 Bug。也學到可以將 SplashScreen.png 圖檔案的 Build Action 項目屬性從 Embedded Resource 調整為 Content，這樣可以降低 WP7 組件 (assembly) 的大小，以加快整體應用程式的載入速度。學到了如何正確的使用 Popup 來顯示啟動畫面，並通過 BackgroundWorker 的後台作業來設定固定時間後自動關閉啟動畫面。最後後面還學習了如何設定應用程式圖示和背景圖等。