Windows phone 7之工具列(ApplicationBar)

工具列（ApplicationBar）被定義在” Microsoft.Phone.Shell”命名空間下，主要包括工具列按鈕（ApplicationBarIconButton）和工具列菜單（ApplicationBarMenuItem），其中每個ApplicationBar最多隻能放置4個ApplicationBarIconButton，但是ApplicationBarMenuItem可以多於4個。

建立一個windows phone項目，開啟MainPage.xaml，看到一本分代碼被注釋掉了，那部分就是ApplicationBar的xaml代碼，將注釋標記去掉，並填寫正確IconUri(一會解釋)，代碼如下

<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="/Images/dark/appbar.check.rest.png" Text="cancel" Click="ApplicationBarIconButton_Click"/>            <shell:ApplicationBarIconButton IconUri="/Images/dark/appbar.cancel.rest.png" Text="ok"/>            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>

運行效果

ApplicationBarIconButton就是中圓圈樣式的button，ApplicationBarMenuItem就是豎排的文字菜單。

ApplicationBarIconButton

ApplicationBarIconButton兩個重要屬性是Text和IconUri，Text是文字格式設定，string類型，而IconUri是Uri類型的屬性，一般是是相對路徑，指向一個圖片資源。這圖片有嚴格的要求，整體大小是48*48，中心映像地區（如的對號表徵圖地區）為26*26，並建議北京透明，大於48*48，就會超出ApplicationBar的顯示範圍，這是不允許的，映像地區大於26*26就會超出圓圈的範圍，這是任何人不想看到的。其中對號和錯號是表徵圖，圓圈不屬於表徵圖，是ApplicationBar中的元素，只要在ApplicationBar中添加了ApplicationBarIconButton，就會顯示圓圈，但是表徵圖顯示與否要看設定的IconUri正確與否，錯誤將顯示預設的錯誤表徵圖，例如將"ok"ApplicationBarIconButton的IconUri這是成一個錯誤的路徑，效果如

如果只是學習，您不用自己去製作ApplicationBarIconButton表徵圖，只要安裝了開發windows phone 7.1SDK，那麼一些預設的表徵圖將被複製到您的電腦裡面，開啟C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons，看到dark和light檔案夾了嗎，這是兩套系統內建的ApplicationBarIconButton表徵圖，分別適用於dark和light主題（設定主題："設定"->"主題"->"背景"）。

我們在項目中建立檔案夾Images並在其下建立dark和light兩個子檔案夾，從C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons的dark和light中分別將appbar.cancel.rest.png、appbar.check.rest.png（兩份）拷貝到項目中的dark和light檔案夾中，並將圖片添加到項目中，屬性設定為Content。想上面代碼一樣，將路徑填寫正確就能顯示了，上面只是用了dark檔案架下的圖片，沒有用light下的，如果切換到light主題背景，按鈕顏色顯示貌似沒問題，這隻是湊巧，其實是有問題的，在light背景下ApplicationBar預設的ForegroundColor是黑色的，而light檔案夾中表徵圖是黑色的，dark檔案夾中的表徵圖是透明的，透明加黑就是黑，所以在light背景下，無論使用light或是dark問價夾下的圖片，都不出問題，都是黑，現在改變IconUri為light檔案夾下的圖片，在dark背景下顯示為

看，出問題了吧，馬上告訴你如何解決，先看下面內容。

不光可以使用xaml聲明ApplicationBar,還可以使用代碼建立

string darkRight = "/Images/dark/appbar.check.rest.png";ApplicationBarIconButton btn = new ApplicationBarIconButton(new Uri(darkRight, UriKind.Relative));            btn.Text = "ok";            btn.Click += new EventHandler(btn_Click);            this.ApplicationBar.Buttons.Add(btn);

<shell:ApplicationBarIconButton IconUri="/Images/light/appbar.check.rest.png" Text="cancel" Click="ApplicationBarIconButton_Click"/>

兩種方式效果是一樣的，代碼中想要操作ApplicationBar，先要將其擷取，如果是用代碼建立的AplicationBar元素，則直接操作那變數就行了，如果是xaml聲明的用下面的方法擷取，0,1,2,3分別表示第一個到第四個按鈕

var appbtn = this.ApplicationBar.Buttons[0] as ApplicationBarIconButton;

ApplicationBarMenuItem

ApplicationBarMenuItem是相當於菜單，只顯示文本資訊，操作方式和ApplicationBarIconButton類似，代碼建立和擷取的方式如下

ApplicationBarMenuItem menu = new ApplicationBarMenuItem();            menu.Text = "menu from code";            menu.Click += new EventHandler(menu_Click);            this.ApplicationBar.MenuItems.Add(menu);            var getMenu = this.ApplicationBar.MenuItems[0] as ApplicationBarMenuItem;

ApplicationBarMenuItem和ApplicationBarIconButton都有一個Clcik事件，當被點擊時觸發。這個事件沒什麼好說的，就和Button控制項的Click事件一樣。

ApplicationBar的主要屬性和事件

只有一個事件就是StateChanged，這個事件在ApplicationBar狀態改變時觸發，點擊ApplicationBar右上方的類似省略符號的三個點，將會顯示或隱藏MenuItem，這個事件傳遞第二個參數是ApplicationBarStateChangedEventArgs類型的，參數只有一個屬性IsMenuVisible，是bool型的，表示是否顯示了MenuItem。我們可以根據狀態來做一些事情，範例程式碼如下

 private void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)        {            if (e.IsMenuVisible)                MessageBox.Show("opened");            else                MessageBox.Show("colsed");        }

ApplicationBar比較好玩的屬性是ForegroundColor和BackgroundColor，ForegroundColor是值button上面的顏色，ForegroundColor是整個ApplicationBar的背景色，有人會說這個沒必要說，是個人就會，我只能說哥們您誤會了，我是告訴不清楚的童鞋，這個需要配合IconButton的圖片使用，特別是透明圖片，一定要注意。設定ForegroundColor="Blue" BackgroundColor="Green"配合dark檔案夾下的透明圖片，效果如下

最後說一下上面提到的改變主題背景後，ApplicationBar樣式問題，我們可以裡利用系統資源"PhoneDarkThemeVisibility"判斷當前是否使用Dark背景，如果不是那肯定是light背景，因為WP7隻有這兩種背景。如果是dark背景就給IconUri設定dark檔案夾下的圖片路徑圖和是light背景，就設定為light檔案夾下的圖片路徑，這樣就沒問題了，代碼如下

string darkRight = "/Images/dark/appbar.check.rest.png";        string darkCancel = "/Images/dark/appbar.cancel.rest.png";        string lightRight = "/Images/light/appbar.check.rest.png";        string lightCancel = "/Images/light/appbar.cancel.rest.png";        void MainPage_Loaded(object sender, RoutedEventArgs e)        {            Visibility darkBackgroundVisibility =           (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];            if (darkBackgroundVisibility == System.Windows.Visibility.Visible)            {                (this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(darkRight, UriKind.Relative);                (this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(darkCancel, UriKind.Relative);            }            else            {                (this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(lightRight, UriKind.Relative);                (this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(lightCancel, UriKind.Relative);            }        }

上面只是一個簡單的解決原理，實際代碼肯定不這麼寫，會使用規範的聲明方式，或者換資源檔(以後講解，只要關注我，你會知道的)的方式，這裡只是拋磚引玉，請諒解。另外，如果為軟體做了很多皮膚，再切換皮膚時記得改變ApplicationBar的BackgroundColor和ForegroundColor。