Windows 8 Metro App開發[3]應用程式欄(AppBar)的使用

1.Appbar有Top和Bottom，一般建立的是BottomAppbar，建立代碼如下：

上面紅色標註了Top和Bottom的建立；

2.Button的樣式：

第一種;直接使用了StandardStyles.xaml裡面系統提供的風格。StandardStyles.xaml為我們的程式提供了許多風格，所有這些預定義的按鈕風格都是繼承自 AppBarButtonStyle，AppBarButtonStyle 定義了AppBar按鈕的基本特徵。在下一節中建立自訂按鈕也會繼承自這個風格。提示：在檔案 StandardStyles.xaml 中已經定義了 29 中應用程式按鈕風格，但是來自 XAML小組的微軟專案經理提供了非正式的替代檔案，該檔案定義了 150 種不同的風格。該檔案可以在下面的串連中看到：
XAML AppBar Button Styles for Windows 8

區分不同按鈕的兩個屬性是 AutomationProperties.Name 和 Content。
AutomationProperties.Name 屬性指定了按鈕顯示的文本
Content 屬性指定會被用到的 icon。這個屬性(Content)的值來自 Segoe UI Symbol 字型的編碼。可以通過 Windows 8 提供的字元表(Character Map)工具來查看這種字型定義的 icon。值 E10B對應的是一個勾號。

第二種；使用自訂的風格。
我在工程中添加了一個檔案夾：Resources，並添加了一個字典資源檔：MyDictionary.xaml，如所示

 

在MyDictionary.xaml檔案中，我定義了DoneAppBarButtonStyle風格，代碼如下所示：

<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:DevDiv_AppBar.Resources">    <ResourceDictionary.MergedDictionaries>        <ResourceDictionary Source="/Common/StandardStyles.xaml" />    </ResourceDictionary.MergedDictionaries>    <Style x:Key="DoneAppBarButtonStyle" TargetType="Button"            BasedOn="{StaticResource AppBarButtonStyle}">        <Setter Property="AutomationProperties.Name" Value="完成"/>        <Setter Property="Content" Value=""/>    </Style>    </ResourceDictionary>

定義了字典檔案之後，還需要在App.xaml檔案中把該字典檔案關聯起來，也就是還需要在App.xaml檔案中添加如下代碼

<ResourceDictionary Source="Resources/MyDictionary.xaml"/>

 

到這裡，我們的AppBar風格自訂就完成了，我們只需要在使用到的地方如同使用系統預定義好的一樣即可。之後和預設StandardStyles.xaml裡面的Style引用方法一樣；

最後添加Click事件；

 

 click方法前面加入async非同步，這樣就完成整個應用程式欄使用；

借鑒破船哥文章：http://www.devdiv.com/Windows_Metro-Windows_8_Metro_App%E5%BC%80%E5%8F%91_3_%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%A0%8F_AppBar_%E7%9A%84%E4%BD%BF%E7%94%A8-thread-130752-1-1.html