這節的議程就是——添加appbar
appbar是出現在哪兒了，出現在屏幕的底部。他能使用戶能用手勢或者使用鼠標操作程序。metro UI 重點是在主要的控件使用許多控件，使其用戶使用win8電腦更加的方便。而appBar使其用戶體驗更好。在這節中，我將告訴你如何定義和填充app Bar。
在界面的頂部有一個類似的控件，叫做navbar。這使其程序中，能夠互相導航。 至于如何創建 使用navbar ,我將在后續文章詳細的介紹。
定義一個appBar
我將用最簡單的方法創建一個AppBar.下面源代碼就是創建一個appBar：
1 <Page2 x:Class="MetroGrocer.Pages.ListPage"3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"5 xmlns:local="using:MetroGrocer.Pages"6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"8 mc:Ignorable="d">9 <Grid Background="{StaticResource AppBackgroundColor}">
10 <Grid.RowDefinitions>
11 <RowDefinition/>
12 <RowDefinition/>
13 </Grid.RowDefinitions>
14 <Grid.ColumnDefinitions>
15 <ColumnDefinition/>
16 <ColumnDefinition/>
17 </Grid.ColumnDefinitions>
18 <StackPanel Grid.RowSpan="2">
19 <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
20 Text="Grocery List"/>
21 <ListView x:Name="groceryList" Grid.RowSpan="2"
22 ItemsSource="{Binding GroceryList}"
23 ItemTemplate="{StaticResource GroceryListItemTemplate}"
24 SelectionChanged="ListSelectionChanged" />
25 </StackPanel>
26 <StackPanel Orientation="Vertical" Grid.Column="1">
27 <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
28 Text="Item Detail"/>
29 <Frame x:Name="ItemDetailFrame"/>
30 </StackPanel>
31 <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1">
32 <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
33 Text="Store Detail"/>
34 </StackPanel>
35 </Grid>
36 <!--一個appbar控件定義的源代碼-->
37 <Page.BottomAppBar>
38 <AppBar>
39 <Grid>
40 <!--Column 的定義-->
41 <Grid.ColumnDefinitions>
42 <ColumnDefinition />
43 <ColumnDefinition />
44 </Grid.ColumnDefinitions>
45 <!--垂直的顯示-->
46 <StackPanel Orientation="Horizontal" Grid.Column="0"
47 HorizontalAlignment="Left">
48 <!--AppBar Button 控件 AppBarButtonClick 事件 -->
49 <Button x:Name="AppBarDoneButton"
50 Style="{StaticResource DoneAppBarButtonStyle}"
51 IsEnabled="false"
52 Click="AppBarButtonClick"/>
53 </StackPanel>
54 <StackPanel Orientation="Horizontal" Grid.Column="1"
55 HorizontalAlignment="Right">
56 <Button x:Name="AppBarAddButton"
57 Style="{StaticResource AddAppBarButtonStyle}"
58 AutomationProperties.Name="New Item"
59 Click="AppBarButtonClick"/>
60 <Button x:Name="AppBarStoresButton"
61 Style="{StaticResource StoresAppBarButton}"
62 Click="AppBarButtonClick"/>
63 <Button x:Name="AppBarZipButton"
64 Style="{StaticResource HomeAppBarButtonStyle}"
65 AutomationProperties.Name="Zip Code"
66 Click="AppBarButtonClick"/>
67 </StackPanel>
68 </Grid>
69 </AppBar>
70 </Page.BottomAppBar>
71 </Page> 為了創建appBar,我不得不創建一個appBar控件。因此，這創造appbar及其內容和屬性包含了bottom Bar.
你可以創建一個通過類似方法在底部創建一個NavBar.
appbar工具條包含buttons按鈕，這么做的規定是有按鈕， 當前選擇的顯示在appBar左邊，無選擇的項目顯示在右邊。（也就是說，在win8的Consumer Preview版本中，這個用戶體驗的原則不完全，這將會正式版本會改變這個用戶體驗的原則）。
接下來的篇幅，我將會在AppBar 控件中添加Grid布局控件。這個Grid控件有1行2列。每列有一個stackpanel。 在appBar添加Button有兩種方法。你可以選擇在standardstyles.xaml定義，或者直接添加。
如何添加appBarButton，我將會在下面的篇幅中介紹。
)
