本文是《Windows Phone 7開發31日談》系列的第十六篇文章。上一篇，我們討論了獨立存儲以及如何在程序中將數據保存至設備上。本文，完全變換視角，來介紹一個我們可以使用的相對較新的（但十分強大的）控件：全景視圖控件。

什么是全景視圖控件？

如果你看過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元素，然后添加你的全景視圖。通過從工具箱中拖拽一個全景視圖控件，一切就都被設置好了。默認的語法看起來如下：

<controls:Panorama /> 

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

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 

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

設置全景視圖的背景和標題

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

想將它用于全景視圖控件的背景，我需要將圖片添加到項目中，然后創建一個ImageBrush，用此圖作為源。你會注意到我將圖片的透明度設為了50%。這是因為白色文字在這種亮圖上顯示的效果不太好。

<controls:Panorama Title="waiter"> 
    <controls:Panorama.Background> 
        <ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" /> 
    </controls:Panorama.Background> 
</controls:Panorama> 

在電話上看起來像這樣：

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

創建PanoramaItem（全景視圖的項）

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

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

<controls:Panorama Title="waiter"> 
    <controls:Panorama.Background> 
        <ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" /> 
    </controls:Panorama.Background> 
    <controls:PanoramaItem Header="learn"> 
          
    </controls:PanoramaItem> 
    <controls:PanoramaItem Header="play"> 
          
    </controls:PanoramaItem> 
    <controls:PanoramaItem Header="all"> 
          
    </controls:PanoramaItem> 
</controls:Panorama> 

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

向PanoramaItem中添加內容

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

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

<controls:PanoramaItem Header="play"> 
    <ListBox Margin="0,0,-12,0"> 
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
            <Image Height="100" Width="100" Source="icons/tictactoe.png" Margin="12,0,9,0"/> 
            <StackPanel Width="311">                                      
                <TextBlock Text="tic tac toe"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                <TextBlock Text="the classic two player game" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
            </StackPanel> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
            <Image Height="100" Width="100" Source="icons/numbers.png" Margin="12,0,9,0"/> 
            <StackPanel Width="311"> 
                <TextBlock Text="numbers"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                <TextBlock Text="learn your digits from 1 - 20" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
            </StackPanel> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
            <Image Height="100" Width="100" Source="icons/wordsearch.png" Margin="12,0,9,0"/> 
            <StackPanel Width="311"> 
                <TextBlock Text="word search"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                <TextBlock Text="find as many words as you can" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
            </StackPanel> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
            <Image Height="100" Width="100" Source="icons/animals.png" Margin="12,0,9,0"/> 
            <StackPanel Width="311"> 
                <TextBlock Text="animals"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                <TextBlock Text="hear and learn your favorites" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
            </StackPanel> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
            <Image Height="100" Width="100" Source="icons/alphabet.png" Margin="12,0,9,0"/> 
            <StackPanel Width="311"> 
                <TextBlock Text="alphabet"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                <TextBlock Text="learn your letters" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
            </StackPanel> 
        </StackPanel> 
    </ListBox> 
</controls:PanoramaItem> 

好了，就這些！這里的每個圖標都鏈接到它們自己的獨立XAML文件，但這個全景視圖為用戶提供了在實際玩兒任何游戲之前都能從我的應用程序導航的能力。

下載示例代碼

這個示例代碼包含了我所講的所有內容。快下載下來并親自學習全景視圖控件吧！

原作者：Jeff Blankenburg    譯者：金山崟霸

中文來源：http://www.cnblogs.com/porscheyin/archive/2010/12/23/1914614.html

英文來源：http://www.jeffblankenburg.com/2010/10/16/31-days-of-windows-phone-day-16-the-panorama-control/