31天學(xué)會Windows Phone 7開發(fā)：工具欄
上一篇，我們討論了系統(tǒng)主題以及如何通過鼠標(biāo)使用Expression Blend來設(shè)置系統(tǒng)值。本文，我們來看看另一個可以用Expression Blend輕松實(shí)現(xiàn)的主題。如果你看到在各個地方比如YouTube（或我的個人網(wǎng)站，Blankensoft）展示過的應(yīng)用程序后，你會發(fā)現(xiàn)它們基本都使用了一個漂亮的工具欄。
Windows Phone 7工具欄是應(yīng)用程序底部的一排圓形圖標(biāo)。下面是我制作的游戲TapScotch中的工具欄演示。
可以從上例中看到我放置了4個用于與用戶交互的圖標(biāo)。Play, Best Times, Badges和Help。在程序中任何時候點(diǎn)擊任何其中任何一個都可以跳轉(zhuǎn)到相應(yīng)的頁面去。那么，怎么來實(shí)現(xiàn)呢？
添加工具欄
如果你打開一個新項(xiàng)目，實(shí)際上在MainPage.xaml文件中有段被注釋掉的代碼。如果你刪掉注釋，工具欄的代碼看起來就是這樣：
- <phone:PhoneApplicationPage.ApplicationBar>
- <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
- <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
- <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
- <shell:ApplicationBar.MenuItems>
- <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
- <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
- </shell:ApplicationBar.MenuItems>
- </shell:ApplicationBar>
- </phone:PhoneApplicationPage.ApplicationBar>
如果你還刪掉了頁面頭部的XML名稱空間，即這些代碼（確認(rèn)你沒有刪除對這些程序集的引用）：
- xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
- xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
一旦你在程序中添加了工具欄，你就應(yīng)該能看到Visual Studio很智能地將程序的DesignHeight屬性調(diào)整了72個像素。那正是工具欄的高度?，F(xiàn)在來說說系統(tǒng)托盤。
Windows Phone系統(tǒng)托盤
你可能已經(jīng)注意到當(dāng)你運(yùn)行程序時，你可以看到時鐘，WiFi信號強(qiáng)度，電池續(xù)航時間，等等。這是因?yàn)槟J(rèn)情況下，系統(tǒng)托盤是打開的。如果你不關(guān)注那些信息（或者你正好需要那32個像素的空間），那你可以將它的IsVisible屬性設(shè)置為false。
shell:SystemTray.IsVisible="False"
在工具欄中添加圖標(biāo)
如果你看過工具欄的代碼，你可能會注意到它指向了兩個當(dāng)前不在你的項(xiàng)目中的圖片。如果你運(yùn)行程序，你會看到每個ApplicationBarIconButton都顯示一個X圖標(biāo)。我們可以很簡單地去為每個按鈕創(chuàng)建幾個圖片，然后添加到項(xiàng)目中，再在那些代碼中引用它們，對嗎？當(dāng)然。不過還有一個更簡單的方法，還是Expression Blend。在Expression Blend中打開你的項(xiàng)目，導(dǎo)航到“Objects and Timeline”樹直到你找到那些ApplicationBarIconButton對象。
當(dāng)你選中任何一個ApplicationBarIconButton時，看一下屬性標(biāo)簽。你會看到一種設(shè)置每個圖標(biāo)和文字的簡便方法。如下：
如果你打開IconUri下拉框，你會看到很多可以用在程序中的標(biāo)準(zhǔn)圖標(biāo)。除非你有一套自定義的圖標(biāo)否則你肯定離不開它們，這些圖標(biāo)可以滿足你大多數(shù)的需求（當(dāng)然你可以自己創(chuàng)建圖標(biāo)并手動添加）。選中一個后，它會自動將白色版本添加到你的項(xiàng)目中。“Jeff，為什么只有白色的？”好問題。我馬上就會說到。如果你沒有在Blend中演練，那么來看一下圖標(biāo)列表。
為什么只有白色圖標(biāo)？
Windows Phone產(chǎn)品組讓你的生活變得如此簡單。你只需創(chuàng)建一個版本的圖標(biāo)，其他的會被自動處理。所以，當(dāng)你提供一個用于深色主題的白色圖標(biāo)后，在用戶使用淺色圖標(biāo)時它會自動將其轉(zhuǎn)換成黑色。你可以試一下！選擇列表中的一個圖標(biāo)，看看你的項(xiàng)目結(jié)構(gòu)?，F(xiàn)在在你的項(xiàng)目中只有一個圖片。操作系統(tǒng)會在你需要的時候自動將白圖標(biāo)變?yōu)楹谏摹?/p>
讓這些按鈕真正有效
好了，現(xiàn)在，你的程序中已經(jīng)有了漂亮的按鈕，但在你點(diǎn)擊它們時它不會做任何事情。此時，它們和你XAML文件中的其他東西一樣。需要給它們添加一個Click事件，以及后置代碼中的一個事件處理程序。下面是這個簡單程序的XAML和C#代碼：
XAML
- <shell:ApplicationBarIconButton x:Name="AddButton" IconUri="/icons/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>
- <shell:ApplicationBarIconButton x:Name="SubtractButton" IconUri="/icons/appbar.minus.rest.png" Text="Subtract" Click="SubtractButton_Click"/>
C#
- private void AddButton_Click(object sender, EventArgs e)
- {
- Counter.Text = (Int32.Parse(Counter.Text.ToString()) + 1).ToString();
- }
- private void SubtractButton_Click(object sender, EventArgs e)
- {
- Counter.Text = (Int32.Parse(Counter.Text.ToString()) - 1).ToString();
- }
這些帶文字的菜單項(xiàng)是什么？
另一個好問題。如果你運(yùn)行了程序，可能會發(fā)現(xiàn)在省略號圖標(biāo)上點(diǎn)擊時，工具欄展開并顯示了一些菜單選項(xiàng)。如果你使用上面的默認(rèn)代碼，寫的是“MenuItem 1”和“MenuItem 2”。它們的工作原理和圖標(biāo)按鈕類似，用戶點(diǎn)擊時可以觸發(fā)事件處理程序。下面是示例程序中工具欄展開時的樣子（在兩種主題下）：
來看一下完整的示例程序，在這里下載源代碼。加減按鈕對屏幕中央的0加1或減1。縮小和放大按鈕分別增加或減小那個數(shù)字的字號。相信這個在Windows Phone 7中如何創(chuàng)建工具欄的例子會很有幫助的。
原作者：Jeff Blankenburg 譯者：金山崟霸
中文來源：http://www.cnblogs.com/porscheyin/archive/2010/11/24/1887130.html
英文來源：http://www.jeffblankenburg.com/2010/10/06/31-days-of-windows-phone-day-6-application-bar/
【編輯推薦】
