Windows 8 Metro App开发[3]应用程序栏(AppBar)的使用

注：本系列学习帖子我在DevDiv.com移动开发社区原创首发

转载请注明出处：BeyondVincent(破船)@DevDiv.com

如果你有什么问题也可以前往交流

下面是首发地址：

[DevDiv原创]Windows 8 Metro App开发Step by Step---(13个学习帖子)

今天我们来学习一下Windows 8 AppBar的使用。本次主题会包含以下内容：

1、Windows 8AppBar介绍

2、Windows 8AppBar定义[预定义和自定义按钮风格的使用]

3、AppBar中按钮事件的处理

4、Demo演示与代码下载

更多内容请查看下面的帖子

Windows 8 Metro App开发Step by Step

1、Windows 8AppBar介绍

在Windows 8设备上，当用户做一个向上滑动的手势或者点击鼠标右键，应用程序栏(AppBar)会出现在屏幕的底部，Metro Ui强调在主布局中尽量少出现控件，主要依托AppBar进行交互。如下图所示，就是开始程序的AppBar。

注意，在这里体现了Metro App UI设计风格：选中项对应的操作按钮放在AppBar的左边，其它的按钮则放在右边。

如下图，我选中了Video程序。左边出现了对应的从“开始”屏幕取消固定，卸载，缩小，右边则是所有应用。

提示：在屏幕的顶部也有相似的控件——导航栏(NavBar)，用于Metro程序中不同画面的导航。在后面的学习系列中，我会进行介绍。

2、Windows 8AppBar定义[预定义和自定义按钮风格的使用]

创建AppBar最简单的方法就是在XAML文件中声明AppBar。在这里我使用Blank App模版创建了一个程序，如下图：

在其中的MainPage.xaml中，我添加了如下代码

代码添加在</Grid>之后

<Grid Background ="PaleGoldenrod">

</Grid>
<Page.BottomAppBar>
  <AppBar>
  <Grid Background="Firebrick" HorizontalAlignment="Left" Width="1346">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="425*">
      </ColumnDefinition>
      <ColumnDefinition Width="248*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
      <Button x:Name="AppBarSearchButton" Style="{StaticResource SearchAppBarButtonStyle}" Click="AppBarButtonClick" AutomationProperties.Name="搜索"/>
      <Button x:Name="AppBarMoreButton" Style="{StaticResource MoreAppBarButtonStyle}" Click="AppBarButtonClick" AutomationProperties.Name="更多"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
      <Button x:Name="AppBarHomeButton" Style="{StaticResource DoneAppBarButtonStyle}" Click="AppBarButtonClick"/>
    </StackPanel>
  </Grid>
  </AppBar>
</Page.BottomAppBar>

从上面的代码中，看出，我在Page.BottomAppBar属性中声明了AppBar控件。也就是说，通过上面的代码，创建了一个AppBar和相关内容，并把AppBar赋值给了MainPage页面的BottomAppBar属性。
提示：在Page.TopAppBar属性里面可以通过声明AppBar来创建NavBar，当然，在后面的学习系列中，我会详细讲解。

为了遵循Metro App Ui关于 AppBar的设计准则，我在AppBar控件里面添加了一个一行两列的网格(Grid),每列包含一个栈面板(StackPanel)。
下面我们来看看栈面板里面的内容，也就是按钮的添加。按钮的风格添加有两种方法，这里我会进行使用讲解。

第一种方法：我在第一个栈面板中定义的两个按钮搜索和更多。他们使用了StandardStyles.xaml里面系统提供的风格。StandardStyles.xaml为我们的程序提供了许多风格，如下是定义了搜索按钮的风格：

<Style x:Key="SearchAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
  <Setter Property="AutomationProperties.AutomationId" Value="SearchAppBarButton"/>
  <Setter Property="AutomationProperties.Name" Value="Search"/>
  <Setter Property="Content" Value=""/>
</Style>

所有这些预定义的按钮风格都是继承自 AppBarButtonStyle，AppBarButtonStyle 定义了AppBar按钮的基本特征。在下一节中创建自定义按钮也会继承自这个风格。提示：在文件 StandardStyles.xaml 中已经定义了 29 中应用程序按钮风格，但是来自 XAML小组的微软项目经理提供了非正式的替代文件，该文件定义了 150 种不同的风格。该文件可以在下面的连接中看到：
XAML AppBar Button Styles for Windows 8

区分不同按钮的两个属性是AutomationProperties.Name和Content。
AutomationProperties.Name 属性指定了按钮显示的文本
Content 属性指定会被用到的 icon。这个属性(Content)的值来自 Segoe UI Symbol 字体的编码。可以通过 Windows 8 提供的字符表(Character Map)工具来查看这种字体定义的 icon。值 E10B对应的是一个勾号。

下面的代码给出了AppBar使用预定义的SearchAppBarButtonStyle风格：
[注：在StandardStyles.xaml文件定义的Name是Search，为了显示中文，我在这里修改为了搜索]

<Button x:Name="AppBarSearchButton" 
  Style="{StaticResource SearchAppBarButtonStyle}" 
  Click="AppBarButtonClick" 
  AutomationProperties.Name="搜索"/>

第二种方法：使用自定义的风格。
我在工程中添加了一个文件夹：Resources，并添加了一个字典资源文件：MyDictionary.xaml，如下图所示

在MyDictionary.xaml文件中，我定义了DoneAppBarButtonStyle风格，代码如下所示：

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:DevDiv_AppBar.Resources">
  
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/Common/StandardStyles.xaml" />
  </ResourceDictionary.MergedDictionaries>
  
<Style x:Key="DoneAppBarButtonStyle" TargetType="Button" 
   BasedOn="{StaticResource AppBarButtonStyle}">
  <Setter Property="AutomationProperties.Name" Value="完成"/>
  <Setter Property="Content" Value=""/>
  </Style>
  
</ResourceDictionary>

这里有个小插曲，代码中需要添加如下代码，才能够正确运行，否则运行时会出错。[为什么还不太清楚，高手来过招吧][搞明白了，原来DoneAppBarButtonStyle里面有BasedOn="{StaticResource AppBarButtonStyle}" ，就是说DoneAppBarButtonStyle 继承自AppBarButtonStyle ，AppBarButtonStyle定义了AppBar按钮的默认风格。破船@2012/07/26

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/Common/StandardStyles.xaml" />
  </ResourceDictionary.MergedDictionaries>

定义了字典文件之后，还需要在App.xaml文件中把该字典文件关联起来，也就是还需要在App.xaml文件中添加如下代码

<ResourceDictionary Source="Resources/MyDictionary.xaml"/>

到这里，我们的AppBar风格自定义就完成了，我们只需要在使用到的地方如同使用系统预定义好的一样即可。如下代码
在第二个栈面板中：

<Button x:Name="AppBarHomeButton" 
  Style="{StaticResource DoneAppBarButtonStyle}" 
  Click="AppBarButtonClick"/>

3、AppBar中按钮事件的处理
至此，我们的控件已经添加完毕，但是还需要响应事件才行。细心的读者可能已经在帖子刚开始给出代码的地方看到这样的语句：

Click="AppBarButtonClick"

没错，这就是通过xaml文件给按钮添加事件的处理方法。在这里声明之后，我们还需要到MainPage.xaml.cs文件中把AppBarButtonClick函数实现一下。如下代码，为了说明事件的处理，我只是简单的写了一个函数，并判断了一下发起者

private void AppBarButtonClick(object sender, RoutedEventArgs e)
{
  if (e.OriginalSource == AppBarDoneButton)
  {
  }
}

这样我们的程序代码就基本写完了。

4、Demo演示与代码下载
下面我运行一下程序，并把程序画面和代码附上，供大家参考。

大家可能看到颜色的不同，在这里我说明一下
在MainPage.xaml中有如下定义：
主布局：Grid Background ="PaleGoldenrod"
AppBar：Grid Background="Firebrick"
相信你应该知道如何设置 Grid的颜色了

下载示例代码：

DevDiv_AppBar.rar