现在的位置: 首页 > 综合 > 正文

Windows Phone 开发系列之菜单栏(Application Bar)

2012年11月22日 ⁄ 综合 ⁄ 共 2631字 ⁄ 字号 评论关闭

通过代码创建菜单栏的示例

1. 创建一个新的Windows phone Application工程,命名为AppBarSample。

2. 添加用作图标按钮的图片。在Solution Explorer里右击AppBarSample工程,Add->New Folder, 添加一个新文件夹Images,在Images文件夹上右击,Add->Existed Items,在File name处输入C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons\dark,选择Add,然后选择appbar.add.rest.png, appbar.delete.rest.png, appbar.edit.rest.png, appbar.refresh.rest.png,选择Add将四张图片添加到工程中。

3. 改变图片属性。在Solution Explorer里选中上一步添加的四张图片。在Properties里将Build Action设置为Content,将Copy to Output Directory设置为Copy always。

4. 在Solution Explorer中找到MainPage.xaml并右击选择View Code(或按F7),将MainPage方法里添加如下代码:

public MainPage()
{
    InitializeComponent();

 

    // 重新定义菜单栏
    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";
    btnAdd.Click+=new EventHandler(btnAdd_Click);
    ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new Uri("/Images/appbar.delete.rest.png", UriKind.Relative));
    btnDelete.Text = "delete";
    ApplicationBarIconButton btnEdit = new ApplicationBarIconButton(new Uri("/Images/appbar.edit.rest.png", UriKind.Relative));
    btnEdit.Text = "edit";
    ApplicationBarIconButton btnRefresh = new ApplicationBarIconButton(new Uri("Images/appbar.refresh.rest.png", UriKind.Relative));
    btnRefresh.Text = "refresh";

 

    // 添加图标按钮
    ApplicationBar.Buttons.Add(btnAdd);
    ApplicationBar.Buttons.Add(btnDelete);
    ApplicationBar.Buttons.Add(btnEdit);
    ApplicationBar.Buttons.Add(btnRefresh);

 

    // 设置子菜单项
    ApplicationBarMenuItem menuitem1 = new ApplicationBarMenuItem("MENUITEM1");
    menuitem1.Click+=new EventHandler(menuitem1_Click);
    ApplicationBarMenuItem menuitem2 = new ApplicationBarMenuItem("Menuitem2");

 

    // 添加子菜单项
    ApplicationBar.MenuItems.Add(menuitem1);
    ApplicationBar.MenuItems.Add(menuitem2);
}

5. 按F5编译部署就会看到如下图所示界面。

image image

 

菜单栏设计最佳实践

在设计菜单栏时要考虑的有以下几点:

* 利用系统提供的菜单栏而非自己创建的菜单系统。这样能够使设备上所有应用程序保持统一的用户体验。而且系统提供的菜单栏支持动画和屏幕变换。

* 用系统默认的主题而非自定义的颜色。使用自定义颜色会影响图标按钮和菜单动画的效果,而且在某些显示设置下会更耗电。

* 菜单栏的透明度可以任意调整,但这里推荐只使用0,0.5和1。

* 如果菜单栏的透明度小于1,当前显示页面大小会和屏幕大小一样,菜单栏会遮在它上面。如果透明度为1,显示页面会自动改变大小以适应未被菜单栏遮住的区域。

 

图标按钮设计最佳实践

* 用作图标的图片应该是使用了a通道的图片,其背景色为透明,前景色为白色。菜单栏会根据系统主题样式来改变图标的颜色。如果使用了带有背景色的图片,会导致不可预知的问题。

* 图标按钮上的圆圈是在运行时由菜单栏加上去的,不需要在源图片里添加圆圈。

* 用作图标的图片大小应该是48x48像素。图片内容的大小应该不超出26x26像素的范围,这样才不会被菜单栏加上的圆圈遮住。

* 不要设置后退按钮。因为设备上的后退按钮就是专门指定用于页面后退的。

* 把最常用的功能设置在图标按钮上。如果某些功能用图标不容易理解,就考虑用菜单项。

* 图标按钮上的图片退便在转屏时不要有歧义。

* 可以直接用于你的程序中的图标可以从这里下载。

 

菜单项设计最佳实践

* 避免使用超过5个的菜单项,否则用户必须滚动屏幕才能看到。

* 在单个菜单项中避免使用过长的文字,否则会引起截断。推荐菜单项内容长度为14到20个英文字符之间。

* 为保证良好的用户体验,所有的菜单项和图标按钮的文字都会被变成小写字符。

 

示例代码下载

参考:http://msdn.microsoft.com/en-us/library/ff431806(v=VS.92).aspx

抱歉!评论已关闭.