應用程式列 ( AppBar 或稱 Application Bar ) 是一個極常使用到的功能, 然而它在兩種平台也有些不一樣的表現.
開發環境版本：Visual Studio 2013 + Update 3
應用程式列 ( AppBar 或稱 Application Bar ) 是一個極常使用到的功能, 然而它在兩種平台也有些不一樣的表現.
1. Top AppBar :
在 Windows Apps 中是允許設定畫面上方的應用程式列的, 例如以下這樣
1: <Page.TopAppBar >
2: <CommandBar >
3: <AppBarButton Icon="Add"
4: Label="Add"
5: Click="AppBarAddButton_Click" />
6: </CommandBar>
7: </Page.TopAppBar>
但是在 Windows Phone 中不可使用 TopAppBar, 只能使用 BottomAppBar. 有趣的是在文件庫中 Page.TopAppBar property 的 Minimum supported phone 居然標示 Windows Phone 8.1 [Windows Runtime apps only], 如下圖 :
我在測試時發現很有趣的狀況是當你在 Windows Phone 頁面中硬加入 TopAppBar (雖然它不會出現在 Intellisense 中, 但可以硬寫), 在編譯時並不會出錯, 而是在執行時期會產生 'Windows.UI.Xaml.Markup.XamlParseException.
2. SecondaryCommands
SecondaryCommands 在兩個平台的表現也不同, 我們用以下的 xaml code 來觀察:
1: <Page.BottomAppBar >
2: <CommandBar >
3: <AppBarButton Icon="Accept" Label="Accept" />
4: <CommandBar.SecondaryCommands >
5: <AppBarButton Icon="Audio" Label="Audio"/>
6: </CommandBar.SecondaryCommands>
7: </CommandBar>
8: </Page.BottomAppBar>
在 Windows Phone 中 SecondaryCommands 會表現地和過去 Windows Phone Silverlight 中的 Menu Item 一個樣, 如下圖 :
而在 Windows App 中, SecondaryCommands 則會出現在畫面的左方 :
3. ClosedDisplayMode 屬性 :
這是 Windows Phone 特有的屬性, 主要是在設定在 AppBar 非開啟狀態中的外觀. 它的值型別是 AppBarClosedDisplayMode enumeration , 其值分別是 Compact 和 Minimal. 以前面有 SecondaryCommnads 的 xaml 為例, 分別得到以下的結果
| Compact | Minimal |
 |
 |
4. 自訂 AppBar 的內容
這有點像過去 Windows 8.0 時代設計應用程式列的作法, 而這種作法只有在 Windows Apps 是可用的, 在 Windows Phone 上並不支援這種作法. 在 Windows Apps 中我們可以不使用 CommandBar 而使用以下方式自訂:
1: <Page.BottomAppBar >
2: <AppBar>
3: <Grid>
4: <Grid.ColumnDefinitions>
5: <ColumnDefinition Width="2*"/>
6: <ColumnDefinition Width="*"/>
7: </Grid.ColumnDefinitions>
8: <TextBox Margin="12" PlaceholderText="請輸入" />
9: <Button Margin="12" Content="Click" Grid.Column="1"/>
10: </Grid>
11: </AppBar>
12: </Page.BottomAppBar>
結果如下 :
