修炼九阴真经Windows Phone开发 (5)：ApplicationBar最佳实践

本文和大家重点学习一下Windows Phone开发中ApplicationBar用法，ApplicationBar就是所谓的菜单栏，它包括Iconbutton和Menu两种类型。Iconbutton就相当于菜单栏里的工具栏，可以带图标；Menu就是菜单了，但是没有二级菜单。

Windows Phone开发中ApplicationBar用法

对于WindowsPhone7程序来说，UI是用Sliverlight来开发的，但是并不完全是Sliverlight的全集，与子集的关系，因为Phone7上有的API或功能PC上是没有的（比如这个applicationbar），那PC上的sliverlight就更不用说了。

ApplicationBar就是所谓的菜单栏，它包括Iconbutton和Menu两种类型。Iconbutton就相当于菜单栏里的工具栏，可以带图标；Menu就是菜单了，但是没有二级菜单。在创建之前一定要先在Reference里加入Microsoft.Phone.shell,并且在xaml页面加上xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell".

Windows Phone ApplicationBar包含了ApplicationBarIconButton和ApplicationBarMenuItem，最多只能添加四个按钮，菜单通过ApplicationBar右边的省略号来展开，都继承自Microsoft.Phone.Shell命名空间，所以在引用时前面都有shell的标志，如：

应用程序栏不是SL控件，所以不支持数据绑定。

 

一、在XAML前台中创建应用程序栏

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="appbarbutton1" IconUri="/icons/appbar.save.rest.png" Text="Save" Click="appbarbutton1_Click"/>
            <shell:ApplicationBarIconButton x:Name="appbarbutton2" IconUri="/icons/appbar.delete.rest.png" Text="Delete"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="appbarmenuitem1" Text="Open"/>
                <shell:ApplicationBarMenuItem x:Name="appbarmenuitem2" Text="Exit"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

应用程序栏不是SL控件，所以不支持数据绑定，这意味着用XAML来实现的话，按键标签文字串值必须在XAML中的硬编码，并且不能本地化

 

      ApplicationBarIconButton的图标可以使用自己设计的图标(尺寸48 x 48)，也可以使用系统的图标，系统的图标通过Blend 4.0来添加，如下图

Windows Phone开发中要创建IconBar，就一定要有Icon，Phone7对Icon的要求比较严：大小一定是48X48相素的png图，图型居中，前景色一般为白色，大小为26X26.有了图片就可以创建了，如果没有也没有关系，微软给提供了一套图标http://www.microsoft.com/downloads/details.aspx?familyid=369B20F7-9D30-4CFF-8A1B-F80901B2DA93&displaylang=en。

 

二、通过代码访问ApplicationBar

从XAML页面中可以看出，ApplicationBarIconButton和ApplicationBarMenuItem是继承自ApplicationBar，ApplicationBar又继承自PhoneApplicationPage命名空间，而其他SilverLight页面控件是直接继承自PhoneApplicationPage命名空间的。

      所以访问ApplicationBar的控件不能像访问Page内容一样，首先添加命名空间Microsoft.Phone.Shell，如

using System;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            appbarbutton1 = ApplicationBar.Buttons[0] as ApplicationBarIconButton;
            appbarmenuitem1 = ApplicationBar.MenuItems[0] as ApplicationBarMenuItem;            
        }

        private void appbarbutton1_Click(object sender, EventArgs e)
        {
            appbarbutton1.IconUri = new Uri("/icons/appbar.stop.rest.png", UriKind.RelativeOrAbsolute);
            appbarmenuitem1.Text = "Close";
        }
    }
}

 

三、在代码中创建应用程序栏

使用代码来实现菜单栏

1. 新建一个项目，命名为ApplicatonBarByCode，新建文件夹Images，并导入相关资源文件，对appbar.add.rest.png 设置其Build Action的值为Content，也可以点F4快捷键的。打开MainPage.xaml.cs文件，首先我们要引入一些shell，所以增加如下代码：      

using Microsoft.Phone.Shell;

      

    2.  在构造函数里输入如下代码：

public MainPage()
        {
            InitializeComponent();

            //声明一个菜单栏,并且设置它可见和Menu可以使用
            ApplicationBar = new ApplicationBar();
            ApplicationBar.IsVisible = true;
            ApplicationBar.IsMenuEnabled = true;
        }

   3.  增加三个菜单按钮和两个MenuItem，如下：

  

public MainPage()
        {
            InitializeComponent();

            //初始化一个菜单栏,并且设置它可见和Menu可以使用
            ApplicationBar = new ApplicationBar();
            ApplicationBar.IsVisible = true;
            ApplicationBar.IsMenuEnabled = true;

            //设置三个菜单按钮
            ApplicationBarIconButton btnAdd = new ApplicationBarIconButton(new Uri("/Images/appbar.add.rest.png", UriKind.Relative));
            btnAdd.Text = "add";
            ApplicationBarIconButton btnSave = new ApplicationBarIconButton(new Uri("/Images/appbar.save.rest.png", UriKind.Relative));
            btnSave.Text = "save";
            ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new Uri("/Images/appbar.delete.rest.png", UriKind.Relative));
            btnDelete.Text = "delete";

            //将这三个菜单按钮加入到菜单栏中
            ApplicationBar.Buttons.Add(btnAdd);
            ApplicationBar.Buttons.Add(btnSave);
            ApplicationBar.Buttons.Add(btnDelete);

            //设置两个MenuItem
            ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem("Menu Item1");
            ApplicationBarMenuItem menuItem2 = new ApplicationBarMenuItem("Menu Item2");

            ApplicationBar.MenuItems.Add(menuItem1);
            ApplicationBar.MenuItems.Add(menuItem2);
        }