Windows Phone 8.1新特性：控制項之應用程式欄

2014年4月3日的微軟Build 2014 大會上，Windows Phone 8.1 正式發布。相較於Windows Phone 8，不論從使用者還是開發人員的角度，都產生了很大的變化。接下來我們會用幾篇文章來瞭解一下這些變化給開發人員帶來的影響，以及我們如何更好的利用WP8.1 的新特性。

WP8.1 最大的變化就是與Windows Store App 的結合，我們把它們統稱為Windows RunTime apps。WP8.1 中的控制項位於Windows.UI.XAML.Controls 命名空間下，這和Windows Store App是一致的。

本篇我們先來介紹第一個 WP8.1 的新控制項：應用程式欄

應用程式欄想必大家都不陌生，它在WP8 中有很重要的應用，我們也把它叫做ApplicationBar。ApplicationBar 中可以添加按鈕和功能表項目，我們來看看簡單的實現代碼：

<phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar>            <shell:ApplicationBar.Buttons>                <shell:ApplicationBarIconButton Text="Btn1" IconUri="***.png" />                <shell:ApplicationBarIconButton Text="Btn2" IconUri="***.png">            </shell:ApplicationBar.Buttons>            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="Menu Item 1" />                <shell:ApplicationBarMenuItem Text="Menu Item 2" />            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>

這個例子裡，ApplicationBar 包含了兩個按鈕和兩個功能表項目。下面我們來看在WP8.1 中如何?應用程式欄：

在Windows Store App 中，應用程式欄分為兩種，TopAppBar 和 BottomAppBar，分別用做頂部導覽列和底部命令欄。而在WP8.1 中只有BottomAppBar，它起到的作用跟WP8 中的ApplicationBar是相同的。BottomAppBar 可以包含CommandBar, 而CommandBar 中可以使用兩種命令元素，主命令元素和輔助命令元素。這兩種元素在作用上類似於WP8 中的按鈕和功能表項目。來看看代碼：

<Page.BottomAppBar>        <CommandBar IsSticky="True">            <CommandBar.PrimaryCommands>                <AppBarButton Icon="ZoomOut" IsCompact="False" Label="ZoomOut" />                <AppBarButton IsCompact="True">                    <AppBarButton.Icon>                        <PathIcon Data="F1 M 20, 10L 10,30L 30,30" />                    </AppBarButton.Icon>                </AppBarButton>                <AppBarButton IsCompact="True">                    <AppBarButton.Icon>                        <BitmapIcon UriSource="Assets/setting.png" />                    </AppBarButton.Icon>                </AppBarButton>                <AppBarToggleButton IsCompact="False" Label="Omega" IsChecked="True">                    <AppBarToggleButton.Icon>                        <FontIcon FontFamily="Candara" Glyph="&#x03A9;" />                    </AppBarToggleButton.Icon>                </AppBarToggleButton>            </CommandBar.PrimaryCommands>            <CommandBar.SecondaryCommands>                <AppBarButton Label="Test01" />                <AppBarButton Label="Test02" />            </CommandBar.SecondaryCommands>        </CommandBar>    </Page.BottomAppBar>

我們為CommandBar定義了兩種集合元素，PrimaryCommands 和 SecondaryCommands，集合中的元素可以是AppBarButton 或 AppBarToggleButton。

來看看AppBarButton中幾個重要的屬性：

* Icon：用於顯示應用程式欄按鈕的圖形內容。它有幾種表現方式：

SymbolIcon - 基於Segoe UI Symbol 字型的字型預定義列表

FontIcon - 基於指定字型系列的字型

BitmapIcon - 基於指定Uri的位元影像影像檔

PathIcon - 基於路徑資料

* Label：程式欄上顯示的文字說明

* IsCompact：布爾值，指示是否顯示不帶標籤且邊距已縮小的按鈕

再來看看AppBarToggleButton， 它與AppBarButton 的不同在於他可以有選中狀態：

* IsChecked - 布爾值，選中為True，未選中為False，否則為null。預設為False。