Windows Phone 7 开发 31 日谈——第2日:页面间导航
by jeff blankenburg
第2日。
今天,我们来探讨如何在silverlight for windows phone中进行页面间导航。这非常重要,原因有二:首先,你不会愿意在一个xaml文件中构建整个应用程序。第二,因为下面的原则,你的程序会自动利用手机内建的返回按键。这允许你的用户想返回到之前的操作时可以向前导航。明天我们来深入讨论返回按键。
在页面间导航有很多种方法,但是我打算只讲一种。我更喜欢叫它简单web导航。正如其名,这里采取的方式正如你在html页面中导航相似。当然还有一些其他的框架可用(像mvvm),但是本篇文章的目的是讲解这个简单的方法。
简单web导航
假设我们有很多页面,并且我们想给用户能在它们之间穿梭的一种方式。先来构建一个简单的导航ui让我们能做以上的事情,现在开始:
1)创建一个新的windows phone application。
2)添加几个windows phone纵向页面。
我们将在第4日讨论页面方向(纵向和横向)。现在只谈纵向。我创建了3个纵向页面:pasta.xaml, sauce.xaml和cheese.xaml。我将用几种不同的方法把它们联系在一起。
3)改变页面的标题,以便在页面变更后可以知道所在的位置。
当你创建一个新页面时,有一个叫“pagetitle”的xaml元素它默认被设置为“page name”。在每个页面中都更改这个元素以便于知道你当前处于哪个页面。我喜欢这样做是因为可以减少出错的几率。你会发现当你投入精力制作一个项目时起初的代码看起来都很相似,所以让他们看起来有所区别(至少在编码时)会有很大帮助。
4)在mainpage.xaml中创建几个超链接(hyperlink)。
在页面间建立链接,有几种不同的方式。第一种是全xaml解决方案。为此,我们可以使用超链接按钮(hyperlinkbutton)控件。以下是代码:
<hyperlinkbutton content="pasta" navigateuri="/pasta.xaml" height="30" horizontalalignment="left"
margin="10,10,0,0" name="hyperlinkbutton1" verticalalignment="top" width="200" />
<hyperlinkbutton content="sauce" navigateuri="/sauce.xaml" height="30" horizontalalignment="left"
margin="10,10,0,0" name="hyperlinkbutton2" verticalalignment="top" width="200" />
<hyperlinkbutton content="cheese" navigateuri="/cheese.xaml" height="30" horizontalalignment="left"
margin="10,10,0,0" name="hyperlinkbutton3" verticalalignment="top" width="200" />
当你运行项目时,你可以点击任何一个超链接按钮然后跳转到相应的页面中。使用返回键同样可以使你回到上一个界面。如果你返回多次,你会发现一旦越过了程序的第一页你就离开了当前的应用程序。
5)通过代码导航到页面。
如果你喜欢通过代码而非完全使用xaml,你可以仅仅用一些xaml元素来实现。在本例中,我们使用按钮。我创建了3个按钮,每一个都指向相同的事件处理程序。在下面的c#代码中,你会看到我实际上检测了是哪个按钮被点击了,然后导航到相应的页面。返回键的所有功能仍然可用。
xaml
<button x:name="pastabutton" content="pasta" click="button_click" width="200" height="75" />
<button x:name="saucebutton" content="sauce" click="button_click" width="200" height="75" />
<button x:name="cheesebutton" content="cheese" click="button_click" width="200" height="75" />
c#
private void button_click(object sender, routedeventargs e)
{
button clickedbutton = sender as button;
switch (clickedbutton.name)
{
case "pastabutton":
navigationservice.navigate(new uri("/pasta.xaml", urikind.relative));
break;
case "saucebutton":
navigationservice.navigate(new uri("/sauce.xaml", urikind.relative));
break;
case "cheesebutton":
navigationservice.navigate(new uri("/cheese.xaml", urikind.relative));
break;
}
}
下载示例代码
明天,我们探索如何利用返回按键来实现更多的功能。
推荐阅读
-
Windows Phone 7 开发探索笔记5——页面间导航
-
Windows Phone 7 开发 31 日谈——第19日:推送通知
-
Windows Phone 7 开发 31 日谈——第17日:枢轴控件
-
Windows Phone 7 开发 31 日谈——第24日:嵌入字体
-
Windows Phone 7 开发 31 日谈——第8日:选择器
-
Windows Phone 7 开发 31 日谈——第9日:调试技巧
-
Windows Phone 7 开发 31 日谈——第3日:返回键
-
Windows Phone 7 开发 31 日谈——第14日:墓碑机制(多任务)
-
Windows Phone 7 开发 31 日谈——第10日:输入范围和文本框
-
Windows Phone 7 开发 31 日谈——第13日:位置服务