Windows Phone 7 使用者體驗 – Panorama 你用明白了嗎？

要說 Windows Phone 7 裡哪個控制項最受開發人員歡迎，非 Panorama 莫屬了。這東西用得恰當，確實能夠給使用者帶來很好的使用者體驗。但……目前看來似乎有濫用之嫌。無論是在各大論壇中，還是在 Marketplace 上，都反覆撞見毫無新意的，甚至是完全不搭調的 Helloworld 版 Panorama 介紹及應用。

 

那麼，今天我們就來談一談 Panorama 比較新穎的用法，以及一些需要注意的地方。

 

Panorama 最大的特點，就是它“非同步滑行”的背景圖。前置內容和背景圖之間存在的滑行速度差異，給使用者造成一種空間層次感。然而絕大多數應用案例中都只是實現了“雙層”的 Panorama，即：Panorama 的背景圖算作第一層，前景內容算作第二層。

在本文中，我就向大家介紹“三層”Panorama 的實現方法。多出來一層，空間立體感增強了不少哦！

先來看一看運行結果：

  

歡迎下載源碼，實際在模擬器或手機上體驗一下，會有更直觀的感受。

下載代碼

 

該介面包含三個圖層，由內到外依次為：

第一層：彩虹、小號雲彩、火山、綠色波浪；

第二層：中號雲彩、藍色波浪；

第三層：大號雲彩、椰子樹、應用程式的資料和內容；

上述三層在 Panorama 滑動過程中產生相對位移，給使用者帶來明顯的層次感及空間感。

具體是如何?的呢？看一看下面的你就知道了：

 

說明一下：

中，LayoutRoot 就是頁面根節點下第一個 Grid 控制項（通常我們建立一個新的 Phone Page 時就會預設產生）。該控制項的背景圖大小應為 400X800 像素（如果顯示 SystemTray 則 400X768 像素）。該背景圖並不會移動。

處於中介層得 Panorama 的背景圖則隨著拖動發生一定的橫向位移。而處於最頂層的每個 PanoramaItem 分頁中所內嵌的一些圖片元素，其橫向位移速度及幅度都最大。這樣三個層次的映像元素隨著手勢的滑動而發生錯位位移，就會營造出比較明顯的層次感。

怎麼樣？其實很簡單吧。

 

針對該用法，還需要指出幾點：

1. 最底層的背景圖（即 LayoutRoot背景圖）應採用 .jpg 格式的圖片資源。原因是，Windows Phone 7 作業系統對不同格式圖片的解碼速度有所差別，對 .jpg 圖片的解碼遠快於對 .png 圖片的解碼。詳情參考：http://msdn.microsoft.com/en-us/library/ff967560(v=VS.92).aspx#BKMK_Images 

2. 靠前的兩層圖應採用 .png 格式圖片，因為只有 .png 格式的圖片才支援透明度。要想讓三個層面的映像都能讓使用者看見，就必須讓前兩層的空白地區變得透明。

 

另外，在這裡也順便提一下有關 Panorama 使用的一些注意事項：

1. Panorama 控制項中的分頁（即 PanoramaItem ）不宜超過四個，否則無論是效能上還是外觀上都會很糟糕；

2. Panorama 和 Pivot 在載入時初始化的邏輯有所不同。Pivot 在載入時僅初始化第一個需要顯示的分頁，而 Panorama 則會把所有的分頁都進行初始化。因此，即便是各個分頁的內容完全一致，Panorama 的載入速度也會比 Pivot 慢一些。而如果某一分頁包含比較耗時的初始化邏輯，則 Panorama 的載入會受到明顯的影響。此時，如果仍然堅持要使用 Panorama，則應該考慮將耗時的邏輯進行滯後處理。

有關 Panorama 使用上的最佳實務，請參考：http://msdn.microsoft.com/en-us/library/ff941107(v=vs.92).aspx 

 

好了，有關 Panorama 的話題就講到這裡吧。

非常感謝大家！