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

什么是全景視圖控件？

如果你看過Windows Phone 7“HUB”的視頻或是截圖，全景視圖是被廣泛運用的。簡而言之，它就是選項，導(dǎo)航和數(shù)據(jù)的多屏幕滾動菜單。下面是一些示例：

好了，現(xiàn)在我們知道全景視圖長什么樣了，來看看如何實現(xiàn)吧。

創(chuàng)建一個全景視圖項目

在這個系列的前15日中，每個項目都是基于默認的Windows Phone Application模板的。對于全景視圖來說，如果你喜歡，可以使用Windows Phone Panorama Application模板。它在下面的列表中：

然而，很重要的一點是你不是只能使用這個模板來創(chuàng)建一個全景視圖。這個項目模板利用了MVVM框架（一種很好的方法），為你預(yù)先寫好了很多內(nèi)容。如果想簡單一些，全景視圖控件是我們可以使用的另一種控件，我們可以將它添加到任意的頁面中去。這正是本文想要向你展示的內(nèi)容。

從工具箱中添加一個全景視圖

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

首先打開你的工具箱，右擊“Windows Phone controls”標(biāo)簽。從列表中選擇“Choose Items…”。

在出現(xiàn)的對話框中，它自動載入并為你打開Windows Phone Components標(biāo)簽。你會看到有很多已經(jīng)被勾選的控件，這些就是當(dāng)前在你工具箱中的。向下滾動直到找到Panorama，并添加它（明天我們會講解樞軸控件，所以你也可以將它一并添加進來）。

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

在頁面中添加全景視圖

做完前面的步驟會讓你在后面更加輕松。刪除掉頁面中的所有XAML元素，然后添加你的全景視圖。通過從工具箱中拖拽一個全景視圖控件，一切就都被設(shè)置好了。默認的語法看起來如下：

<controls:Panorama /> 

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

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

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

設(shè)置全景視圖的背景和標(biāo)題

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

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

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

在電話上看起來像這樣：

好了，現(xiàn)在有背景圖了。讓我們來添加一些內(nèi)容吧。

創(chuàng)建PanoramaItem（全景視圖的項）

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

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

<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> 

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

向PanoramaItem中添加內(nèi)容

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

我的這個例子，提供了5個你可以從這個屏幕中啟動的應(yīng)用程序。我創(chuàng)建了一些自定義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> 

好了，就這些！這里的每個圖標(biāo)都鏈接到它們自己的獨立XAML文件，但這個全景視圖為用戶提供了在實際玩兒任何游戲之前都能從我的應(yīng)用程序?qū)Ш降哪芰Α?/p>

下載示例代碼

這個示例代碼包含了我所講的所有內(nèi)容?？煜螺d下來并親自學(xué)習(xí)全景視圖控件吧！

原作者：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/