Windows Phone 7 開發 31 日談——第16日：全景檢視

By Jeff Blankenburg

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

昨天，我們討論了獨立儲存以及如何在程式中將資料儲存至裝置上。今天，我將完全變換視角，來介紹一個我們可以使用的相對較新的（但十分強大的）控制元件：全景檢視控制元件。

什麼是全景檢視控制元件？

如果你看過Windows Phone 7“HUB”的視訊或是截圖，全景檢視是被廣泛運用的。簡而言之，它就是選項，導航和資料的多螢幕滾動選單。下面是一些示例：

 

好了，現在我們知道全景檢視長什麼樣了，來看看如何實現吧。

 

建立一個全景檢視專案

在這個系列的前15日中，每個專案都是基於預設的Windows Phone Application模板的。對於全景檢視來說，如果你喜歡，可以使用Windows Phone Panorama Application模板。它在下面的列表中：

 

然而，很重要的一點是你不是隻能使用這個模板來建立一個全景檢視。這個專案模板利用了MVVM框架（一種很好的方法），為你預先寫好了很多內容。如果想簡單一些，全景檢視控制元件 是我們可以使用的另一種控制元件，我們可以將它新增到任意的頁面中去。這正是本文想要向你展示的內容。

 

從工具箱中新增一個全景檢視

新增全景檢視到你的頁面中的第一件事就是它不是可用的預設控制元件（這就是它沒有顯示在你的Visual Studio 2010工具箱中的原因）。在使用之前你必須在頁面中新增特定的名稱空間。簡單的做法是將它新增到工具箱中，然後從中重用它。

首先開啟你的工具箱，右擊“Windows Phone controls”標籤。從列表中選擇“Choose Items…”。

 

在出現的對話方塊中，它自動載入併為你開啟Windows Phone Components標籤。你會看到有很多已經勾選了的控制元件，這些就是當前在你工具箱中的。向下滾動直到找到Panorama，並新增它（明天我們會講解樞軸控制元件，所以你也可以將它一併新增進來）。

一旦你在工具箱中新增了這些，你就可以很簡單地在頁面中加入全景檢視控制元件了。

 

在頁面中新增全景檢視

做完前面的步驟會讓你在後面更加輕鬆。刪除掉頁面中的所有XAML元素，然後新增你的全景檢視。通過從工具箱中拖拽一個全景檢視控制元件，一切就都被設定好了。預設的語法看起來如下：

 

哈，開始時的內容不多。你還應該注意，在頁面中新增一個新的XML名稱空間：

既然我們在頁面中使用了最少量的程式碼，讓我們來看看現在這個全景檢視控制元件長什麼樣。下圖展示了全景檢視控制元件每個不同部分的樣子：

 

設定全景檢視的背景和標題

全景檢視控制元件最酷的一個特色就是可以用一張很大的圖片當做背景，它比其餘的內容滾動的要慢。找一張絢麗的，有代表性的圖片用在程式中。這是我的圖片（我的應用程式是用於你在飯館等吃的的時候消磨時間的。哦，這是在bowling Green的Corner Grill餐館）：

想將它用於全景檢視控制元件的背景，我需要將圖片新增到專案中，然後建立一個ImageBrush，用此圖作為源。你會注意到我將圖片的透明度設為了50%。這是因為白色文字在這種亮圖上顯示的效果不太好。

 

 

 

 

 

在電話上看起來像這樣：

好了，現在有背景圖了。讓我們來新增一些內容吧。

 

建立PanoramaItem（全景檢視的項）

現在，我們的程式還不能很好的工作。它僅僅顯示了背景圖片，還不能滾動，或者顯示任何東西。通過新增PanoramaItem，我們可以建立全景檢視中獨立的項，在這些PanoramaItem中，我們可以新增XAML來顯示這些項。

 

每個PanoramaItem是完全獨立於另一個的，所以你可以從技術上讓每個項完全不同。我會向你展示PanoramaItem的程式碼，並且我們會在下一節討論自定義內容。你會在下面注意到我定義了3個PanoramaItem，併為每一個都設定了標題。這樣在截圖中可以更好地顯示，所以我在程式碼中包含了它們。

 

 

 

 

 

 

 

 

 

 

 

  

注意背景和標題是如何滾動的，但實際上它們並不是同一速度的。這樣當使用者用手劃過時程式可以為使用者提供非常好的視覺深度。但它現在還是空的。讓我們新增一些內容，使它看起來像這樣：

 

向PanoramaItem中新增內容

你完全可以不用，但我還是建議你以ListBox開始。如果有很多內容的話它能讓這些內容垂直滾動。說到佈局你可以有很多很多選項，但一個ListBox可能會給你帶來最大的便利。（另外，在程式碼中繫結一個列表的資料項是一種很簡單的方法。參見來自Scott Guthrie的教程 ）

 

我的這個例子，提供了5個你可以從這個螢幕中啟動的應用程式。我建立了一些自定義XAML，並放到了ListBox中。下面是XAML程式碼，以及模擬器中“Play”這個項的截圖：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

好了，就這些！這裡的每個圖示都連結到它們自己的獨立XAML檔案，但這個全景檢視為使用者提供了在實際玩兒任何遊戲之前都能從我的應用程式導航的能力。

下載示例程式碼

這個示例程式碼包含了我所講的所有內容。快下載下來並親自學習全景檢視控制元件吧！

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-16-The-Panorama-Control.aspx