Windows Phone - ApplicationBar 控制器
4.93/5 (4投票s)
一个Windows Phone应用栏控制器。
本文也发表在我的博客。
介绍
在进行一些很棒的Windows Phone副项目时，我需要一种更好地控制应用程序栏的方法。我希望能够动态添加、删除、显示/隐藏或启用/禁用应用程序栏图标按钮和菜单项，并为特定的图标按钮或菜单项挂接事件。
背景
什么是Windows Phone中的应用程序栏以及如何使用它？
在Windows桌面开发中，我们有一个名为工具栏的控件，可以在其中添加按钮、下拉菜单、标签、文本框或进度条，还可以为按钮或标签添加图标。
您可以根据需要添加任意数量的按钮，在窗体周围定位控件，还可以在窗体的各个侧面添加工具栏。
在Windows Phone中，它也有一些类似工具栏的东西，但它被称为“应用程序栏”。
应用程序栏可以包含一组圆形白色图标，如果处于纵向模式，则位于屏幕底部；如果将手机旋转到横向模式，则位于右侧。应用程序栏只能包含两种控件：图标按钮和菜单项。就像你在下面看到的这样（来自微软的图片）
不幸的是，它受到限制，因为你基本上只能最多使用4个图标按钮，但另一方面，菜单项却很幸运，你可以添加尽可能多的菜单项。
但我们主要关注的是图标按钮的可用性，因为如果你考虑一个大型项目，你很可能需要不同的方法来让你的最终用户轻松浏览你的应用程序，其中一种方法是使用应用程序栏，但最多只有4个图标按钮是不够的。
那么我们如何解决这个问题呢？两种方法，要么创建多个应用程序栏，要么让你的图标按钮在运行时动态变化。你会选择哪一个？
让我们花一点时间展示创建多个应用程序栏的示例。在Windows Phone DevCenter中，他们写了一种方法来做到这一点
如何：为Windows Phone在代码中创建应用程序栏
http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394036(v=vs.92).aspx
正如你从他们的示例中看到的，他们在XAML中定义了两个应用程序栏。
现在的问题是，由于存在重复的菜单项（就像你看到的那样），它很快就会变得非常冗长且难以管理，如果我有4个不同的应用程序栏，并且我需要一个特定的图标按钮始终出现在这些应用程序栏上怎么办？所以我必须做的就是将该图标按钮的XAML定义复制并粘贴到每个应用程序栏中。可能，随着时间的推移，我必须更改图标和文本，所以我必须检查每个应用程序栏并再次更改它。在运行时操作这些应用程序栏上的图标按钮会再次带来另一个难题。
那么，如果我们可以创建一个简单的方法来在一个应用程序栏中控制我们的图标按钮呢？
我编写了一个名为ApplicationBarController的类来解决这个问题，我们可以通过它更平滑地控制一个应用程序栏中的图标按钮和菜单项。在这个类中，我们可以轻松地显示特定任务所需的图标按钮或菜单项，如果不再需要，也可以隐藏它们，就像上面的动画图像中演示的一样。
使用代码
ApplicationBarController 类
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Microsoft.Phone.Shell;
namespace CAPPLOUD.WP.Controllers
{
public class ApplicationBarController
{
IApplicationBar _appbar;
public ApplicationBarController(IApplicationBar appbar)
{
this._appbar = appbar;
}
Dictionary<string, IApplicationBarIconButton> Buttons { get; set; }
Dictionary<string, IApplicationBarMenuItem> MenuItems { get; set; }
/// <summary>
/// Add new Menu Item to the collection.
/// Must call ShowMenuItems or ShowMenuItem to show the menu
/// </summary>
/// <param name="Text">Name of the menu item</param>
/// <param name="isEnabled"></param>
/// <param name="e">Delegated event</param>
public void AddNewMenuItem(string Text, bool isEnabled, EventHandler e)
{
if (MenuItems == null)
{
MenuItems = new Dictionary<string, IApplicationBarMenuItem>();
}
if (MenuItems.ContainsKey(Text)) { return; }
ApplicationBarMenuItem menuitem = new ApplicationBarMenuItem()
{
Text = Text,
IsEnabled = isEnabled
};
menuitem.Click += e;
MenuItems.Add(Text, menuitem);
}
/// <summary>
/// Add new Icon Button to the collection.
/// Must call ShowButtons or Showbutton to show the icon button
/// </summary>
/// <param name="Text">Text of the icon button</param>
/// <param name="IconUri">Relative image url</param>
/// <param name="isEnabled"></param>
/// <param name="e">Delegated event</param>
public void AddNewButton(string Text, string IconUri, bool isEnabled, EventHandler e)
{
if (Buttons == null)
{
Buttons = new Dictionary<string, IApplicationBarIconButton>();
}
if (Buttons.ContainsKey(Text)) { return; }
ApplicationBarIconButton btn = new ApplicationBarIconButton()
{
Text = Text,
IconUri = new Uri(IconUri, UriKind.Relative),
IsEnabled = isEnabled
};
btn.Click += e;
Buttons.Add(Text, btn);
}
/// <summary>
/// Replace and show selected buttons in the application bar
/// </summary>
/// <param name="ButtonText">Icon Button texts to show</param>
public void ShowButtons(params string[] ButtonText)
{
this._appbar.Buttons.Clear();
foreach (string text in ButtonText)
{
if (!_appbar.Buttons.Contains(Buttons[text]))
{
_appbar.Buttons.Add(Buttons[text]);
}
}
}
/// <summary>
/// Append the icon button in the application bar
/// </summary>
/// <param name="ButtonText">Icon Button texts to show</param>
public void ShowButton(params string[] ButtonText)
{
foreach (string text in ButtonText)
{
if (!_appbar.Buttons.Contains(Buttons[text]))
{
_appbar.Buttons.Add(Buttons[text]);
}
}
}
/// <summary>
/// Remove selected buttonsin the application bar
/// </summary>
/// <param name="ButtonText">Icon Button texts to show</param>
public void RemoveButtons(params string[] ButtonText)
{
foreach (string text in ButtonText)
{
if (_appbar.Buttons.Contains(Buttons[text]))
{
_appbar.Buttons.Remove(Buttons[text]);
}
}
}
/// <summary>
/// Clear all Icon Buttons in the application bar
/// </summary>
public void RemoveButtons()
{
this._appbar.Buttons.Clear();
}
/// <summary>
/// Enable or Disable selected buttons
/// </summary>
/// <param name="Enabled"></param>
/// <param name="ButtonText">Icon Button texts to Enable or Disable</param>
public void EnableButtons(bool Enabled, params string[] ButtonText)
{
foreach (string text in ButtonText)
{
Buttons[text].IsEnabled = Enabled;
}
}
/// <summary>
/// Replace and show selected menu items in the application bar
/// </summary>
/// <param name="MenuItemText">menu items texts to show</param>
public void ShowMenuItems(params string[] MenuItemText)
{
this._appbar.MenuItems.Clear();
foreach (string text in MenuItemText)
{
if (!_appbar.MenuItems.Contains(MenuItems[text]))
{
_appbar.MenuItems.Add(MenuItems[text]);
}
}
}
/// <summary>
/// Append the menu items in the application bar
/// </summary>
/// <param name="MenuItemText">menu items texts to show</param>
public void ShowMenuItem(params string[] MenuItemText)
{
foreach (string text in MenuItemText)
{
if (!_appbar.MenuItems.Contains(MenuItems[text]))
{
_appbar.MenuItems.Add(MenuItems[text]);
}
}
}
/// <summary>
/// Remove selected menu items in the application bar
/// </summary>
/// <param name="MenuItemText">menu items texts to show</param>
public void RemoveMenuItems(params string[] MenuItemText)
{
foreach (string text in MenuItemText)
{
if (_appbar.MenuItems.Contains(MenuItems[text]))
{
_appbar.MenuItems.Remove(MenuItems[text]);
}
}
}
/// <summary>
/// Clear all menu items in the application bar
/// </summary>
public void RemoveMenuItems()
{
_appbar.MenuItems.Clear();
}
/// <summary>
/// Enable or Disable selected menu items
/// </summary>
/// <param name="Enabled"></param>
/// <param name="MenuItemText">menu items texts to Enable or Disable</param>
public void EnableMenuItems(bool Enabled, params string[] MenuItemText)
{
foreach (string text in MenuItemText)
{
MenuItems[text].IsEnabled = Enabled;
}
}
/// <summary>
/// Show or Hide application bar
/// </summary>
/// <param name="Show"></param>
public void ShowAppBar(bool Show)
{
if (this._appbar.IsVisible != Show)
{
this._appbar.IsVisible = Show;
}
}
}
}
这个ApplicationBarController类几乎可以做任何你想做的事情。你可以：
- 添加或删除图标按钮或菜单项
- 显示或隐藏图标按钮或菜单项
- 启用或禁用图标按钮或菜单项。
这是一个你可以实现ApplicationBarController类的简单方法。
首先，你必须挂钩当前页面的ApplicationBar。
// Hook the ApplicationBar in the current page
ApplicationBarController appbar = new ApplicationBarController(this.ApplicationBar);
接下来，准备你将在项目中需要的图标按钮和菜单项。
void InitializeApplicationBar
{
// prepare all Icon Buttons and Menu Items
this.appbar.AddNewButton("add", "/icons/appbar.add.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("save", "/icons/appbar.save.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("cancel", "/icons/appbar.close.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("delete", "/icons/appbar.delete.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("clear", "/icons/appbar.close.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("ff", "/icons/appbar.transport.ff.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("play", "/icons/appbar.transport.play.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("pause", "/icons/appbar.transport.pause.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("rew", "/icons/appbar.transport.rew.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("add menu", "/icons/appbar.add.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewButton("clear menus", "/icons/appbar.close.rest.png",
true, ApplicationBarIconButton_Click);
this.appbar.AddNewMenuItem("Message", true, ApplicationBarMenuItem_Click);
}
private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
ApplicationBarIconButton btn = (ApplicationBarIconButton)sender;
string text = btn.Text.ToLower();
// your conditions here
if (text == "add")
{
MessageBox.Show("Add button was clicked");
}
// add more conditions here
}
private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
{
ApplicationBarMenuItem menu = (ApplicationBarMenuItem)sender;
string text = menu.Text.ToLower();
// your conditions here
}
然后，在运行时，你可以简单地显示当前页面任务所需的图标按钮或菜单项。
this.appbar.ShowButtons(new string[] { "add", "delete", "clear" });
// or the same as
this.appbar.ShowButtons("add", "delete", "clear");
// or
this.appbar.ShowButtons("add", "clear");
菜单项也是同样的方法。
重要的一点是，你赋予图标按钮或菜单项的文本充当区分大小写的键。
结束
我希望通过这个类，能够帮助你进行Windows Phone开发。
干杯