Windows Phone 7的全景視圖控件
我們介紹了獨(dú)立存儲(chǔ)以及如何在程序中將數(shù)據(jù)保存至設(shè)備上。我將完全變換視角，利用Windows Phone 7開(kāi)發(fā)工具中的UI設(shè)計(jì)新特性介紹一個(gè)我們可以使用的相對(duì)較新的(但十分強(qiáng)大的)控件：全景視圖控件。
什么是全景視圖控件?
如果你看過(guò)Windows Phone 7“HUB”的視頻或是截圖，全景視圖是被廣泛運(yùn)用的。簡(jiǎn)而言之，它就是選項(xiàng)，導(dǎo)航和數(shù)據(jù)的多屏幕滾動(dòng)菜單。下面是一些示例：
什么是全景視圖
好了，現(xiàn)在我們知道全景視圖長(zhǎng)什么樣了，來(lái)看看如何實(shí)現(xiàn)吧。
創(chuàng)建一個(gè)全景視圖項(xiàng)目
在這個(gè)系列的前15日中，每個(gè)項(xiàng)目都是基于默認(rèn)的Windows Phone Application模板的。對(duì)于全景視圖來(lái)說(shuō)，如果你喜歡，可以使用Windows Phone Panorama Application模板。它在下面的列表中：
創(chuàng)建全景視圖
然而，很重要的一點(diǎn)是你不是只能使用這個(gè)模板來(lái)創(chuàng)建一個(gè)全景視圖。這個(gè)項(xiàng)目模板利用了MVVM框架(一種很好的方法)，為你預(yù)先寫(xiě)好了很多內(nèi)容。如果想簡(jiǎn)單一些，全景視圖控件是我們可以使用的另一種控件，我們可以將它添加到任意的頁(yè)面中去。這正是本文想要向你展示的內(nèi)容。#p#
從工具箱中添加一個(gè)全景視圖
添加全景視圖到你的頁(yè)面中的第一件事就是它不是可用的默認(rèn)控件(這就是它沒(méi)有顯示在你的Visual Studio 2010工具箱中的原因)。在使用之前你必須在頁(yè)面中添加特定的名稱空間。簡(jiǎn)單的做法是將它添加到工具箱中，然后從中重用它。
首先打開(kāi)你的工具箱，右擊“Windows Phone controls”標(biāo)簽。從列表中選擇“Choose Items…”。
從列表中選擇“Choose Items…”
在出現(xiàn)的對(duì)話框中，它自動(dòng)載入并為你打開(kāi)Windows Phone Components標(biāo)簽。你會(huì)看到有很多已經(jīng)被勾選的控件，這些就是當(dāng)前在你工具箱中的。向下滾動(dòng)直到找到Panorama，并添加它(明天我們會(huì)講解樞軸控件，所以你也可以將它一并添加進(jìn)來(lái))。
在工具箱中添加全景視圖控件
一旦你在工具箱中添加了這些，你就可以很簡(jiǎn)單地在頁(yè)面中加入全景視圖控件了。
在頁(yè)面中添加全景視圖
做完前面的步驟會(huì)讓你在后面更加輕松。刪除掉頁(yè)面中的所有XAML元素，然后添加你的全景視圖。通過(guò)從工具箱中拖拽一個(gè)全景視圖控件，一切就都被設(shè)置好了。默認(rèn)的語(yǔ)法看起來(lái)如下：
- <controls:Panorama />
哈，開(kāi)始時(shí)的內(nèi)容不多。你還應(yīng)該注意，在頁(yè)面中添加一個(gè)新的XML名稱空間：
- xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
既然我們?cè)陧?yè)面中使用了最少量的代碼，讓我們來(lái)看看現(xiàn)在這個(gè)全景視圖控件長(zhǎng)什么樣。下圖展示了全景視圖控件每個(gè)不同部分的樣子：
全景視圖控件的每一部分
#p#
設(shè)置全景視圖的背景和標(biāo)題
全景視圖控件最酷的一個(gè)特色就是可以用一張很大的圖片當(dāng)做背景，它比其余的內(nèi)容滾動(dòng)的要慢。找一張絢麗的，有代表性的圖片用在程序中。這是我的圖片(我的應(yīng)用程序是用于你在飯館等吃的時(shí)消磨時(shí)間的。哦，這是在bowling Green的Corner Grill餐館)：
全景背景圖
想將它用于全景視圖控件的背景，我需要將圖片添加到項(xiàng)目中，然后創(chuàng)建一個(gè)ImageBrush，用此圖作為源。你會(huì)注意到我將圖片的透明度設(shè)為了50%。這是因?yàn)榘咨淖衷谶@種亮圖上顯示的效果不太好。
- <controls:Panorama Title="waiter">
- <controls:Panorama.Background>
- <ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" />
- </controls:Panorama.Background>
- </controls:Panorama>
在電話上看起來(lái)像這樣：
背景圖
好了，現(xiàn)在有背景圖了。讓我們來(lái)添加一些內(nèi)容吧。
創(chuàng)建PanoramaItem(全景視圖的項(xiàng))
現(xiàn)在，我們的程序還不能很好的工作。它僅僅顯示了背景圖片，還不能滾動(dòng)，或者顯示任何東西。通過(guò)添加PanoramaItem，我們可以創(chuàng)建全景視圖中獨(dú)立的項(xiàng)，在這些PanoramaItem中，我們可以添加X(jué)AML來(lái)顯示這些項(xiàng)。
每個(gè)PanoramaItem是完全獨(dú)立于另一個(gè)的，所以你可以從技術(shù)上讓每個(gè)項(xiàng)完全不同。我會(huì)向你展示PanoramaItem的代碼，并且我們會(huì)在下一節(jié)討論自定義內(nèi)容。你會(huì)在下面注意到我定義了3個(gè)PanoramaItem，并為每一個(gè)都設(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>
滑動(dòng)的界面
注意背景和標(biāo)題是如何滾動(dòng)的，但實(shí)際上它們并不是同一速度的。這樣當(dāng)用戶用手劃過(guò)時(shí)程序可以為用戶提供非常好的視覺(jué)深度。但它現(xiàn)在還是空的。讓我們添加一些內(nèi)容，使它看起來(lái)像這樣：
空的截圖
#p#
向PanoramaItem中添加內(nèi)容
你完全可以不用，但我還是建議你以ListBox開(kāi)始。如果有很多內(nèi)容的話它能讓這些內(nèi)容垂直滾動(dòng)。說(shuō)到布局你可以有很多很多選項(xiàng)，但一個(gè)ListBox可能會(huì)給你帶來(lái)最大的便利。(另外，在代碼中綁定一個(gè)列表的數(shù)據(jù)項(xiàng)是一種很簡(jiǎn)單的方法。參見(jiàn)來(lái)自Scott Guthrie的教程)
我的這個(gè)例子，提供了5個(gè)你可以從這個(gè)屏幕中啟動(dòng)的應(yīng)用程序。我創(chuàng)建了一些自定義XAML，并放到了ListBox中。下面是XAML代碼，以及模擬器中“Play”這個(gè)項(xiàng)的截圖：
- <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>
添加“Play”的截圖
好了，就這些!這里的每個(gè)圖標(biāo)都鏈接到它們自己的獨(dú)立XAML文件，但這個(gè)全景視圖為用戶提供了在實(shí)際玩兒任何游戲之前都能從我的應(yīng)用程序?qū)Ш降哪芰Α?/p>
這個(gè)示例代碼包含了我所講的所有內(nèi)容。
【編輯推薦】
