注:本系列学习帖子我在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演示与代码下载
更多内容请查看下面的帖子
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,如下图所示
![](https://img-my.csdn.net/uploads/201208/10/1344589470_1184.png)
在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的颜色了
![](https://img-my.csdn.net/uploads/201208/10/1344589526_8803.png)
下载示例代码: