这节的议程就是——添加appbar
appbar是出现在哪儿了，出现在屏幕的底部。他能使用户能用手势或者使用鼠标操作程序。metro UI 重点是在主要的控件使用许多控件，使其用户使用win8电脑更加的方便。而appBar使其用户体验更好。在这节中，我将告诉你如何定义和填充app Bar。
在界面的顶部有一个类似的控件，叫做navbar。这使其程序中，能够互相导航。 至于如何创建 使用navbar ,我将在后续文章详细的介绍。
定义一个appBar
我将用最简单的方法创建一个AppBar.下面源代码就是创建一个appBar：
1 <Page
2 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，我将会在下面的篇幅中介绍。
