做過android開發的同學們應該都知道有個ActionBar的頭部操作欄，而wp也有類似的一個固定在app頁面里通常擁有的內部屬性，就是應用欄。以前叫做ApplicationBar,現在wp和win統一稱AppBar，以后Win10一統手機和桌面相信Api將會高度統一。

　　廢話不多說了，從wp8.1開始，系統提供了AppBar和CommandBar兩種控件，CommandBar集成了很多功能，但是是系統指定的模板，如果要高度自定義（如顯示進度條，搜索框等等）應用欄就需要使用AppBar了。其中AppBar有兩種，一種是TopAppBar，一種是BottomAppBar，一個在頂部一個在底部。只有windows才支持TopAppBar,wp只支持BottomAppBar。而CommandBar也分兩種，一種是PrimaryCommands，另一種是SecondaryCommands，在windows上的區別是PrimaryCommands靠右邊，SecondaryCommands靠左邊；而在wp上的區別是PrimaryCommands是底部可見區域，SecondaryCommands是默認隱藏的。CommandBar還有個ClosedDisplayMode該屬性有兩個狀態可供選擇，Minimal是迷你模式僅顯示右邊三個點，并且AppBar的高度也縮減到僅包括三個點的高度，Compact就是默認模式。

　　應用欄主要包含兩種元素，一種是按鈕一種是分割線。所以系統為我們提供了AppBarButton、AppBarToogleButton和AppBarSeperator三個控件，而普通AppBarButton主要是三個屬性需要我們更改，一個是Lable文本，一個是Icon，還有Click點擊事件也比較常用，還有一個是IsCompact是否收起，如果為True就會隱藏文本僅顯示圖標，反之兩者都會顯示，但是在wp上這個屬性貌似不會起作用。

其中Icon?屬性設置為從?IconElement?類派生而來的元素。共提供了 4 種圖標元素：

• FontIcon?- 此類圖標基于指定字體系列的字形。
• BitmapIcon?- 此類圖標基于指定了?Uri?的位圖圖像文件。
• PathIcon?- 此類圖標基于?Path?數據。
• SymbolIcon?- 此類圖標基于 Segoe UI Symbol 字體中的預定義字形列表。

一、靜態示例

　　xaml示例：

<Page.BottomAppBar><CommandBar x:Name="cm" ClosedDisplayMode="Minimal"><CommandBar.PrimaryCommands ><AppBarButton Label="確定" Click="AppBarButton_Click" IsCompact="False" Icon="Accept"/><AppBarButton x:Name="abb" Label="搜索" Icon="Find"/><AppBarButton Label="收藏" Icon="Favorite"/><AppBarButton Label="附件" Icon="Attach"/></CommandBar.PrimaryCommands><CommandBar.SecondaryCommands><AppBarButton Label="關于"/><AppBarButton Label="使用幫助"/><AppBarButton Label="反饋"/></CommandBar.SecondaryCommands></CommandBar></Page.BottomAppBar>

如下圖，上面一排就是PrimaryCommands，下面一列就是SecondaryCommands

?

靜態的AppBar應該都沒什么好說的，選擇Icon資源時我們可以利用系統提供的很多規范的圖標，按下圖即可找到系統資源。

二、動態控制

　　市場上眾多的教程書上只會叫你做靜態的AppBar,但現實中可能需要對AppBar的動態控制，接下來將會講解怎么對AppBar動態控制。這個示例的流程是：打開程序將會有一個WebView來加載網頁，一開始AppBar是迷你狀態的，當網頁加載完后將會把AppBar恢復到標準狀態，底部四個按鈕可見。并且當網頁加載完，AppBar的背景色將設置為系統的背景色。然后點擊第一個按鈕的時候將隱藏掉第二個按鈕，再次點擊第一個按鈕將會把第二個按鈕恢復為可見。

　　

　　　　/// <summary>/// 當網頁加載完畢后觸發/// </summary>/// <param name="sender"></param>/// <param name="args"></param>private void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args){if (cm.ClosedDisplayMode == AppBarClosedDisplayMode.Minimal){//如果是迷你模式將切換至標準模式cm.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;//嘗試把四個按鈕的文字顯示出來，但是沒有任何效果for (int i = 0; i < cm.PrimaryCommands.Count; i++){((AppBarButton)cm.PrimaryCommands.ElementAt(i)).IsCompact = false;}//設置為系統主題this.BottomAppBar.Background = (Brush)Application.Current.Resources["PhoneAccentBrush"];}}/// <summary>/// 按下第一個按鈕，動態控制第二個按鈕/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void AppBarButton_Click(object sender, RoutedEventArgs e){if (this.cm.PrimaryCommands.Contains(abb)){this.cm.PrimaryCommands.Remove(abb);}else{this.cm.PrimaryCommands.Insert(1, abb);}}

上圖

加載中，AppBar是迷你模式，并且背景色也是黑色。加載完之后背景色就變成系統顏色了。

點擊第一個勾，第二個搜索按鈕就隱藏了，再次點擊又變回來了，而且還是在第二個位置。

總結

以上是生活随笔為你收集整理的WP8.1学习系列(第一章)——添加应用栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。