Windows Phone 7 開發之：工具欄

來源: IT168 發布時間: 2011-01-27 10:48 閱讀: 1070 次推薦: 0 原文鏈接 [收藏]

摘要：今天，我們來看看另一個可以用Expression Blend輕松實現的主題。如果你看到在各個地方比如YouTube(或我的個人網站，Blankensoft)展示過的應用程序后，你會發現它們基本都使用了一個漂亮的工具欄。

　　前我們討論了系統主題以及如何通過鼠標使用Expression Blend來設置系統值。今天，我們來看看另一個可以用Expression Blend輕松實現的主題。如果你看到在各個地方比如YouTube(或我的個人網站，Blankensoft)展示過的應用程序后，你會發現它們基本都使用了一個漂亮的工具欄。

　　Windows Phone 7工具欄是應用程序底部的一排圓形圖標。下面是我制作的游戲TapScotch中的工具欄演示。

　　可以從上例中看到我放置了4個用于與用戶交互的圖標。Play, Best Times, Badges和Help。在程序中任何時候點擊任何其中任何一個都可以跳轉到相應的頁面去。那么，怎么來實現呢?

　　添加工具欄

　　如果你打開一個新項目，實際上在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名稱空間，即這些代碼(確認你沒有刪除對這些程序集的引用)：

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

　　xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

　　一旦你在程序中添加了工具欄，你就應該能看到Visual Studio很智能地將程序的DesignHeight屬性調整了72個像素。那正是工具欄的高度。現在來說說系統托盤。

　　Windows Phone系統托盤

　　你可能已經注意到當你運行程序時，你可以看到時鐘，WiFi信號強度，電池續航時間，等等。這是因為默認情況下，系統托盤是打開的。如果你不關注那些信息(或者你正好需要那32個像素的空間)，那你可以將它的IsVisible屬性設置為false。

shell:SystemTray.IsVisible="False"

　　在工具欄中添加圖標

　　如果你看過工具欄的代碼，你可能會注意到它指向了兩個當前不在你的項目中的圖片。如果你運行程序，你會看到每個ApplicationBarIconButton都顯示一個X圖標。我們可以很簡單地去為每個按鈕創建幾個圖片，然后添加到項目中，再在那些代碼中引用它們，對嗎?當然。不過還有一個更簡單的方法，還是Expression Blend。在Expression Blend中打開你的項目，導航到Objects and Timeline樹直到你找到那些ApplicationBarIconButton對象。

　　 Windows Phone 7 開發之：工具欄

　　當你選中任何一個ApplicationBarIconButton時，看一下屬性標簽。你會看到一種設置每個圖標和文字的簡便方法。如下：

　　 Windows Phone 7 開發之：工具欄

　　如果你打開IconUri下拉框，你會看到很多可以用在程序中的標準圖標。除非你有一套自定義的圖標否則你肯定離不開它們，這些圖標可以滿足你大多數的需求(當然你可以自己創建圖標并手動添加)。選中一個后，它會自動將白色版本添加到你的項目中。Jeff，為什么只有白色的?好問題。我馬上就會說到。如果你沒有在Blend中演練，那么來看一下圖標列表：

　　 Windows Phone 7 開發之：工具欄

　　為什么只有白色圖標?

　　Windows Phone產品組讓你的生活變得如此簡單。你只需創建一個版本的圖標，其他的會被自動處理。所以，當你提供一個用于深色主題的白色圖標后，在用戶使用淺色圖標時它會自動將其轉換成黑色。你可以試一下!選擇列表中的一個圖標，看看你的項目結構。現在在你的項目中只有一個圖片。操作系統會在你需要的時候自動將白圖標變為黑色的。

　　讓這些按鈕真正有效

　　好了，現在，你的程序中已經有了漂亮的按鈕，但在你點擊它們時它不會做任何事情。此時，它們和你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"/>　

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();
　　}

　　這些帶文字的菜單項是什么?

　　另一個好問題。如果你運行了程序，可能會發現在省略號圖標上點擊時，工具欄展開并顯示了一些菜單選項。如果你使用上面的默認代碼，寫的是MenuItem 1和MenuItem 2。它們的工作原理和圖標按鈕類似，用戶點擊時可以觸發事件處理程序。下面是示例程序中工具欄展開時的樣子(在兩種主題下)：

　　 Windows Phone 7 開發之：工具欄