Windows Phone 7 開發 31 日談——第6日：工具列

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談”系列的第6日。

    昨天，我們討論了系統主題以及如何通過滑鼠使用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對象。

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

如果你開啟IconUri下拉框，你會看到很多可以用在程式中的標準表徵圖。除非你有一套自訂的表徵圖否則你肯定離不開它們，這些表徵圖可以滿足你大多數的需求（當然你可以自己建立表徵圖並手動添加）。選中一個後，它會自動將白色版本添加到你的項目中。“Jeff，為什麼只有白色的？”好問題。我馬上就會說到。如果你沒有在Blend中演練，那麼來看一標列表（請原諒它很長）。

為什麼只有白色表徵圖？

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

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

}

這些帶文字的功能表項目是什嗎？

另一個好問題。如果你運行了程式，可能會發現在省略符號表徵圖上點擊時，工具列展開並顯示了一些菜單選項。如果你使用上面的預設代碼，寫的是“MenuItem 1”和“MenuItem 2”。它們的工作原理和表徵圖按鈕類似，使用者點擊時可以觸發事件處理常式。下面是樣本程式中工具列展開時的樣子（在兩種主題下）：

下載範例程式碼

來看一下完整的樣本程式，在這裡下載原始碼。加減按鈕對螢幕中央的0加1或減1。縮小和放大按鈕分別增加或減小那個數位字型大小。相信這個在Windows Phone 7中如何建立工具列的例子會很有協助的。

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-6-Application-Bar.aspx