windows phone 7 31天学习笔记:6 程序栏

时间：2011-01-03 来源：MagicShui

上一篇我们讨论了系统主题，以及在blend中如何通过简单的点击按钮就可以改变颜色值。这一次，我们将讨论blend让开发容易的另一个主题。如果你看在YouTube中被开发出来的Demo，你将会注意到程序都有一个简单漂亮的程序栏。

windows phone 7 的程序栏是在底部的一系列圆形图标，如下，这是我的程序TapScotch界面设计图

你会看到我有四个普通的图标来进行用户交互。play,best times ,badges以及help.按热河图标都会将用户导到相应的页面。所以，这些事如何工作的呢？

添加程序栏

如果你已经开始了一个新工程，这里有一些简单的代码被注释在你的MainPage.xaml文件中。如果你已经删除了这些，你需要重新写这些，如下是默认的代码：

<?xml:namespace prefix = phone />
        <?xml:namespace prefix = shell />

如果你同样删除了需要的XML的命名空间，下面是原始的代码：

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

一旦你添加了程序栏到应用中，你应该同样会注意到visual studio会聪明的将程序的DesignHeight属性调整到72pixel。这是程序栏的高度。现在可以讨论系统条了。

Windows Phone系统条

也许你已经注意到了当你开始运行程序的时候，你可以看到时间，Wifi信号强度，电池等。这是因为默认情况下系统条是可见的。如果你不关心这些信息，你可以通过设置Visible属性为false来隐藏。

shell:SystemTray.IsVisible="False"

给应用栏添加按钮

如果你看下程序栏的代码，你将会看到他只想两张不存在于系统中的图片。如果你运行程序，每个按钮都是现实一个x。我们可以很简单就创建一些按钮图片，添加到系统中，然后将让他们引用到程序中，是吗？的确如此。但是有更简单的方法，那就是使用Blend。打开你的Blend，然后转向到“Objects and Timeline”直到你找到ApplicationBarIconButton。

当你单击一个ApplicationBarIconButton以后，检查属性标签。你将会看到设置icon以及字符的行。如下：

如果你下啦IconUrl选择框，你将会一系列标准图标。除非你有依赖的自定义图标，这些图标包含了大部分你的需要。通过选择，将会自动添加白色系列到工程中。“为什么只有白色的？”不错的问题。稍后回答，如果你对于Blend不熟悉，这是图标的列表：

为什么只有白色图标？

windows phone团队让你的开发更加容易，你只需要创建一个版本的图标，剩下的就交给他们了。所以，如果你给了他一个白色图标，他将会在白色主题下为你自动创建响应系列图标。这就是自适应吧。

让这些按钮工作

现在有了漂亮的图标，下面就是让他们起作用。你需要一些背后的代码来实现。下面是我的程序代码：

XAML

<?xml:namespace prefix = shell />

private void AddButton_Click(object sender, EventArgs e)
{
        Counter.Text = (Int32.Parse(Counter.Text.ToString()) + 1).ToString(); 
}

private void SubtractButton_Click(object sender, EventArgs e)
{
        Counter.Text = (Int32.Parse(Counter.Text.ToString()) - 1).ToString(); 
}

哪些文字按钮怎么办？

另一个好问题。如果你已经运行了程序，你将会注意到通过点击按钮图标，程序栏滑动显示一些列的按钮。如果你使用默认的代码，将会显示“MenuItem1”以及“MenuItem2”。这些和图标按钮工作原理相同，即在点击以后出发响应事件。下面是我的程序展开以后效果：