手把手玩转win8开发系列课程（14）

这节的议程就是——添加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，我将会在下面的篇幅中介绍。