Windows phone 7之工具栏(ApplicationBar)

beckham79

工具栏（ApplicationBar）被定义在” Microsoft.Phone.Shell”命名空间下，主要包括工具栏按钮（ApplicationBarIconButton）和工具栏菜单（ApplicationBarMenuItem），其中每个ApplicationBar最多只能放置4个ApplicationBarIconButton，但是ApplicationBarMenuItem可以多于4个。

创建一个windows phone项目，打开MainPage.xaml，看到一本分代码被注释掉了，那部分就是ApplicationBar的xaml代码，将注释标记去掉，并填写正确IconUri(一会解释)，代码如下

　　运行效果

　　ApplicationBarIconButton就是上图中圆圈样式的button，ApplicationBarMenuItem就是竖排的文字菜单。
　　ApplicationBarIconButton
　　ApplicationBarIconButton两个重要属性是Text和IconUri，Text是文本格式，string类型，而IconUri是Uri类型的属性，一般是是相对路径，指向一个图片资源。这图片有严格的要求，整体大小是48*48，中心图像区域（如上图的对号图标区域）为26*26，并建议北京透明，大于48*48，就会超出ApplicationBar的显示范围，这是不允许的，图像区域大于26*26就会超出圆圈的范围，这是任何人不想看到的。其中对号和错号是图标，圆圈不属于图标，是ApplicationBar中的元素，只要在ApplicationBar中添加了ApplicationBarIconButton，就会显示圆圈，但是图标显示与否要看设置的IconUri正确与否，错误将显示默认的错误图标，例如将"ok"ApplicationBarIconButton的IconUri这是成一个错误的路径，效果如下图

　　如果只是学习，您不用自己去制作ApplicationBarIconButton图标，只要安装了开发windows phone 7.1SDK，那么一些默认的图标将被复制到您的电脑里面，打开C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons，看到dark和light文件夹了吗，这是两套系统自带的ApplicationBarIconButton图标，分别适用于dark和light主题（设置主题："设置"->"主题"->"背景"）。
　　我们在项目中新建文件夹Images并在其下建立dark和light两个子文件夹，从C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons的dark和light中分别将appbar.cancel.rest.png、appbar.check.rest.png（两份）拷贝到项目中的dark和light文件夹中，并将图片添加到项目中，属性设置为Content。想上面代码一样，将路径填写正确就能显示了，上面只是用了dark文件架下的图片，没有用light下的，如果切换到light主题背景，按钮颜色显示貌似没问题，这只是凑巧，其实是有问题的，在light背景下ApplicationBar默认的ForegroundColor是黑色的，而light文件夹中图标是黑色的，dark文件夹中的图标是透明的，透明加黑就是黑，所以在light背景下，无论使用light或是dark问价夹下的图片，都不出问题，都是黑，现在改变IconUri为light文件夹下的图片，在dark背景下显示为

　　看，出问题了吧，马上告诉你如何解决，先看下面内容。
　　不光可以使用xaml声明ApplicationBar,还可以使用代码创建



string darkRight = "/Images/dark/appbar.check.rest.png";
ApplicationBarIconButton btn = new ApplicationBarIconButton(new Uri(darkRight, UriKind.Relative));
btn.Text = "ok";
btn.Click += new EventHandler(btn_Click);
this.ApplicationBar.Buttons.Add(btn);



　　两种方式效果是一样的，代码中想要操作ApplicationBar，先要将其获取，如果是用代码创建的AplicationBar元素，则直接操作那变量就行了，如果是xaml声明的用下面的方法获取，0,1,2,3分别表示第一个到第四个按钮



var appbtn = this.ApplicationBar.Buttons[0] as ApplicationBarIconButton;
　　ApplicationBarMenuItem
　　ApplicationBarMenuItem是相当于菜单，只显示文本信息，操作方式和ApplicationBarIconButton类似，代码创建和获取的方式如下



ApplicationBarMenuItem menu = new ApplicationBarMenuItem();
menu.Text = "menu from code";
menu.Click += new EventHandler(menu_Click);
this.ApplicationBar.MenuItems.Add(menu);
var getMenu = this.ApplicationBar.MenuItems[0] as ApplicationBarMenuItem;
　　ApplicationBarMenuItem和ApplicationBarIconButton都有一个Clcik事件，当被点击时触发。这个事件没什么好说的，就和Button控件的Click事件一样。
　　ApplicationBar的主要属性和事件
　　只有一个事件就是StateChanged，这个事件在ApplicationBar状态改变时触发，点击ApplicationBar右上角的类似省略号的三个点，将会显示或隐藏MenuItem，这个事件传递第二个参数是ApplicationBarStateChangedEventArgs类型的，参数只有一个属性IsMenuVisible，是bool型的，表示是否显示了MenuItem。我们可以根据状态来做一些事情，示例代码如下



private void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)
{
if (e.IsMenuVisible)
MessageBox.Show("opened");
else
MessageBox.Show("colsed");
}
　　ApplicationBar比较好玩的属性是ForegroundColor和BackgroundColor，ForegroundColor是值button上面的颜色，ForegroundColor是整个ApplicationBar的背景色，有人会说这个没必要说，是个人就会，我只能说哥们您误会了，我是告诉不清楚的童鞋，这个需要配合IconButton的图片使用，特别是透明图片，一定要注意。设置ForegroundColor="Blue" BackgroundColor="Green"配合dark文件夹下的透明图片，效果如下

　　最后说一下上面提到的改变主题背景后，ApplicationBar样式问题，我们可以里利用系统资源"PhoneDarkThemeVisibility"判断当前是否使用Dark背景，如果不是那肯定是light背景，因为WP7只有这两种背景。如果是dark背景就给IconUri设置dark文件夹下的图片路径图和是light背景，就设置为light文件夹下的图片路径，这样就没问题了，代码如下



string darkRight = "/Images/dark/appbar.check.rest.png";
string darkCancel = "/Images/dark/appbar.cancel.rest.png";
string lightRight = "/Images/light/appbar.check.rest.png";
string lightCancel = "/Images/light/appbar.cancel.rest.png";
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Visibility darkBackgroundVisibility =
(Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
if (darkBackgroundVisibility == System.Windows.Visibility.Visible)
{
(this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(darkRight, UriKind.Relative);
(this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(darkCancel, UriKind.Relative);
}
else
{
(this.ApplicationBar.Buttons[0] as ApplicationBarIconButton).IconUri = new Uri(lightRight, UriKind.Relative);
(this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IconUri = new Uri(lightCancel, UriKind.Relative);
}
}
　　上面只是一个简单的解决原理，实际代码肯定不这么写，会使用规范的声明方式，或者换资源文件(以后讲解，只要关注我，你会知道的)的方式，这里只是抛砖引玉，请谅解。另外，如果为软件做了很多皮肤，再切换皮肤时记得改变ApplicationBar的BackgroundColor和ForegroundColor。