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。