用户使用微软的新Avalon UI框架组件和XAML(它是用于建立Avalon应用程序的语言)可以建立不同类型的应用程序。本文将介绍Avalon应用程序的导航特性。(请注重,从一开始起,微软就赋予Avalon一个永久的名称:Windows显示框架。在本文中,我们提及的WPF就是指Avalon)。
WPF应用程序可以被分成两种类型:
·独立的Windows应用程序
·包含一系列页面的应用程序
后一种类型(用户在一系列页面中导航)更加普遍。这种类型的应用程序中的导航元素是由Hyperlink(超链接)控件提供。但是Hyperlink控件也有一些缺点,例如向目标页面传递值困难、确定目标页面什么时候返回到调用页面的能力有限、给调用页面传递值也很困难。
因此,在本文中我将演示如何来处理这些问题;我将建立一个WPF应用程序,它从一个页面导航到另一个页面,在页面之间传递值。
导航的基础知识
在深入讲解WPF中的页面导航理论之前,我首先编写一个简单的应用程序,解释一些要害特性。首先,使用Visual Studio 2005建立一个新的WPF项目(我使用的是VB.NET),把这个应用程序命名为AvalonNavigation(图1所示)。
图1:在Visual Studio 2005中建立一个新的WPF应用程序
解决方案治理器如图2所示:
图2:解决方案治理器中的内容。你可以看到建立的新项目。
首先我查看项目中的MyApp.xaml文件。Avalon导航应用程序从<Navigationapplication> 根元素开始。StartupUri属性指定了应用程序执行时载入的页面;在例子中,启动页面是Page1.xaml:
<NavigationApplication x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
StartupUri="Page1.xaml"
>
<NavigationApplication.Resources>
</NavigationApplication.Resources>
</NavigationApplication>
Page1.xaml的内容如下所示:
<Page x:Class="Page1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<Grid>
</Grid>
</Page>
现在给项目添加一个Avalon PageFunction项:右键点击解决方案治理器中的项目名称,然后选择“添加新项…”,并选择Avalon PageFunction模板。把页面的名称改成Page2.xaml并点击“添加”(图3所示)。
图3:分页。给项目添加一个新的Avalon PageFunction项
Page2.xaml被加入项目之后,双击它来查看其内容:
<PageFunction x:Class="Page2" x:TypeArguments="String"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<Grid>
</Grid>
</PageFunction>
Avalon PageFunction是一个基本的WPF页面,只是它会给调用页面返回结果(因此称为页面函数)。图4显示了如何在Page1.xaml中使用Page2.xaml并获取Page2.xaml返回的结果。
图4:A到B。现在你可以从Page1.xaml导航到Page2.xaml。
PageFunction页面有四种类型:
·BooleanPageFunction——返回一个布尔型的值;<BooleanPageFunction>元素描述它。
·Int32PageFunction——返回一个整型的值;<Int32PageFunction>元素描述它。
·ObjectPageFunction——返回一个对象值;<ObjectPageFunction>元素描述它。
·StringPageFunction——返回一个字符串;<StringPageFunction>元素描述它。进入讨论组讨论。
在Page2.xaml中,根元素是<PageFunction>,它并不在上述的四种页面类型之中。<PageFunction>是PageFunction页面的通用版本,你需要用x:TypeArguments属性(在例子中被设置为“String”)来指定它的类型。假如你希望把该页面转换为上述四种类型中的任意一个(例如StringPageFunction),可以简单地改变根元素,如下所示(请注重,x:TypeArguments属性被删除了):
<StringPageFunction x:Class="Page2"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<Grid>
</Grid>
</StringPageFunction>
但是我现在还是使用原始的<PageFunction>根元素。
用下面的内容填充Page1.xaml:
<Page x:Class="Page1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<StackPanel>
<Button Click="ButtonClick"
HorizontalAlignment="Left"
Margin="10,5,10,5"
Width="120">Go to Page 2
</Button>
<TextBlock Margin="10,5,10,5">
<Inline Name="txtResult"></Inline>
</TextBlock>
</StackPanel>
</Page>
基本上,这个页面包含一个用于载入Page2.xaml的按钮控件(图5所示)和一个用于显示Page2.xaml返回值的TextBlock控件(请注重第一次载入的时候TextBlock控件不可见,因为它没有包含任何值)。
图5:Page1.xaml。按钮控件载入应用程序的第二个页面。
在Page1.xaml的后台代码——Page1.xaml.vb中加入的下面的内容:
Partial Public Class Page1
Inherits Page
PRivate WithEvents p2 As Page2
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
Dim myApp As NavigationApplication
Dim navWindow As NavigationWindow
myApp = CType(System.Windows.Application.Current, NavigationApplication)
navWindow = CType(myApp.MainWindow, NavigationWindow)
p2 = New Page2
p2.InitializeComponent()
navWindow.Navigate(p2)
End Sub
Private Sub return_handler(ByVal sender As Object, _
ByVal e As ReturnEventArgs(Of String)) _
Handles p2.Return
txtResult.Text = "Returned: " & e.Result.ToString
End Sub
End Class
在Page1.xaml.vb中,我添加了两个方法:
·ButtonClick——处理按钮控件点击事件。
·return_handler——检索Page2.xaml返回的结果。
假如要导航到某个PageFunction页面,你必须建立目标页面的实例,调用它的InitializeComponent()方法,接着使用Navigate()方法导航到该页面。当目标页面函数返回值的时候,你从该页面的Return(返回)事件中捕捉数据。返回的值可以通过ReturnEventArgs参数检索到。
现在我们填充Page2.xaml:
<PageFunction x:Class="Page2" x:TypeArguments="String"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<StackPanel HorizontalAlignment="Left">
<TextBlock Margin="10,5,10,5">
What is your name?</TextBlock>
<TextBox Name="txtName" Margin="10,5,10,5"
Width="200"></TextBox>
<Button Click="ButtonClick" Margin="10,5,10,5"
Width="60"
HorizontalAlignment="Left">Done</Button>
</StackPanel>
</PageFunction>
Page2.xaml将显示一个文本字符串,后面跟着一个文本框控件和按钮控件(图6所示)。它的目的是提示用户输入名字,接着把这个名字传递回Page1.xaml。
图6:Page2.xaml。应用程序的第二个页面将要求用户输入,内容会被传递回Page1.xaml。
Page2.xaml.vb后台的代码如下:
Partial Public Class Page2
Inherits PageFunction(Of String)
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
OnFinish(New ReturnEventArgs(Of String)(txtName.Text))
End Sub
End Class
请注重,Page2类继续自PageFunction类(在XAML页面中匹配了相应的<PageFunction>元素);你也可以指定普通类型(例子中是String)。
当我们点击Done(完成)按钮的时候,就使用OnFinish()方法返回输入的名字。OnFinish()方法把指定的字符串返回给调用页面(图7所示)。
图7:应用程序流程。从页面1到页面2,然后返回,这个过程得到一个名字。
在这个应用程序中,导航按钮的工作方式与浏览器中的导航按钮的工作方式相似,可以让你向前和向后访问页面(图8所示)。图8中的“untitled”指向Page2.xaml。
图8:前进和后退。你可以查看应用程序中页面导航的历史。
所有载入过的页面都会自动地存储在一个堆栈数据结构(就是journal,导航日志)中。在某些情况下,你可能不希望在导航日志中记录某些页面(例如,为了防止用户不小心导航到了某个作为事务部分的页面,从而破坏了应用程序的流程)。假如要手动从导航日志中删除某个页面,就把它的RemoveFromJournal属性设置为“true”:
' Page2.xaml
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
Me.RemoveFromJournal = True
OnFinish(New ReturnEventArgs(Of String)(txtName.Text))
End Sub
这样操作以后,Page2.xaml就不会显示在导航按钮中了(图9所示)。
图9:此处没有后退。你可以从导航日志中删掉一个页面。
进入讨论组讨论。
向页面传递数据
你已经看到了PageFunction页面是如何使用OnFinish()方法把值传递回调用页面。那么怎么把调用页面的值传递给PageFunction页面呢?在例子中,可以给目标PageFunction页面添加一个构造函数来实现。假设你需要给传递一个值,你就必须添加下面的构造函数:
Partial Public Class Page2
Inherits PageFunction(Of String)
Public Sub New()
End Sub
Public Sub New(ByVal data As String)
' 处理输入的数据
End Sub
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
Me.RemoveFromJournal = True
OnFinish(New ReturnEventArgs(Of String)(txtName.Text))
End Sub
End Class
请注重,你必须添加一个空的构造函数,否则在编译的时候就会碰到错误。同时,你可以根据自己的需要添加多个构造函数,只要它们的参数(信号)不同。
为了给目标页面传递数据,在调用页面中你必须简单地提供必要的参数。
p2 = New Page2("the string to pass into")
p2.InitializeComponent()
navWindow.Navigate(p2)
线性导航
现在你已经知道了WPF应用程序中页面导航的一些基础知识了,现在我们来看一些重要的细节信息。在WPF中有两种主要的导航类型:
·线性的(Linear)
·层次的(Hierarchical)
在线性导航中,所有的页面都串在一起,一个接一个地载入。图10显示了用线性方式链接在一起的三个页面。对于层次导航,页面链接的方式类似于树结构。在下一部分中我们会讨论层次导航的问题。
图10:线性导航。应用程序的这三个页面是线性关系。
我现在建立一个简单的应用程序,演示线性导航是如何工作的。使用Visual Studio 2005建立一个新的WPF(Avalon)导航应用程序。有了默认的Page1.xaml页面中之后,再添加两个PageFunction页面,分别是Page2.xaml和Page3.xaml。我同时还会演示不同的PageFunction页面类型。
填充Page1.xaml页面:
<Page x:Class="Page1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<DockPanel>
<StackPanel DockPanel.Dock="Left"
Background="LightBlue">
<TextBlock Margin="10,10,10,10">
Page 1</TextBlock>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="LightYellow">
<TextBlock Margin="10,10,10,10">
Enter your name</TextBlock>
<TextBox Name="txtName" Margin="10,10,10,10"
Width="200"
HorizontalAlignment="Left"></TextBox>
<Button Click="ButtonClick" Name="BTnNextPage"
Margin="10,10,10,10" Width="80"
HorizontalAlignment="Left">Next Page</Button>
<Button Click="ButtonClick" Name="btnExit"
Margin="10,10,10,10" Width="80"
HorizontalAlignment="Left">Exit</Button>
<TextBlock Margin="10,10,10,10">
<Inline Name="returnString" />
</TextBlock>
</StackPanel>
</DockPanel>
</Page>
图11显示了Page1.xaml载入时候的样子。
图11:Page1.xaml。新应用程序的第一个页面,它将使用线性导航。
在后台代码Page1.xaml.vb中添加下面的内容:
Partial Public Class Page1
Inherits Page
Public WithEvents nextPage As Page2
' 用于保存输入的名字
Private Shared _Name As String
Private Sub OnLoaded(ByVal sender As Object, _
ByVal e As RoutedEventArgs) Handles Me.Loaded
txtName.Text = _Name
End Sub
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
Dim myApp As NavigationApplication
Dim navWindow As NavigationWindow
myApp = CType(System.Windows.Application.Current, NavigationApplication)
navWindow = CType(myApp.MainWindow, NavigationWindow)
' 导航到下一个页面
If sender.Equals(btnNextPage) Then
' 保存输入的名字
_Name = txtName.Text
nextPage = New Page2
nextPage.InitializeComponent()
navWindow.Navigate(nextPage)
End If
' 退出应用程序
If sender.Equals(btnExit) Then
System.Windows.Application.Current.Shutdown()
End If
End Sub
Private Sub nextPage_Return(ByVal sender As Object, _
ByVal args As StringReturnEventArgs) Handles _
nextPage.Return
' 显示后一个窗体中输入的字符串
returnString.Text = "From Page 2: " & args.Result.ToString
End Sub
End Class
在这个页面中需要重点注重的是:
·点击Next Page(下一页)按钮或Exit(退出)按钮的时候会调用ButtonClick()方法。
·假如点击了Next Page按钮,应用程序将导航到Page2.xaml。假如点击了Exit按钮,应用程序将退出。
·在应用程序导航到Page2.xaml之前,用户输入的名字必须保存在一个共享(shared)变量中。这是因为在两个页面之间导航(无论是编程或使用导航按钮)的时候,页面的状态是不会保存的。因此你必须维护自己的状态信息。
·无论页面在什么时候载入都会调用OnLoaded()方法,因此这是设置控件初始值/状态的位置。
·当Page2.xaml返回值的时候调用nextPage_Return()方法。
填充Page2.xaml:
<StringPageFunction x:Class="Page2"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<DockPanel>
<StackPanel DockPanel.Dock="Left"
Background="LightBlue">
<TextBlock Margin="10,10,10,10">
Page 2</TextBlock>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="LightYellow">
<TextBlock Margin="10,10,10,10">
Enter your company name</TextBlock>
<TextBox Name="txtCompanyName"
Margin="10,10,10,10"
Width="200" HorizontalAlignment="Left">
</TextBox>
<DockPanel>
<Button DockPanel.Dock="Left"
Click="ButtonClick"
Name="btnPreviousPage"
Margin="10,10,10,10"
Width="80" HorizontalAlignment="Left">
Previous Page</Button>
<Button DockPanel.Dock="Right"
Click="ButtonClick"
Name="btnNextPage" Margin="10,10,10,10"
Width="80" HorizontalAlignment="Left">
Next Page</Button>
</DockPanel>
<Button Click="ButtonClick" Name="btnExit"
Margin="10,10,10,10" Width="80"
HorizontalAlignment="Left">Exit</Button>
<TextBlock Margin="10,10,10,10">
<Inline Name="returnString" />
</TextBlock>
</StackPanel>
</DockPanel>
</StringPageFunction>
请注重,Page2.xaml是一个StringPageFunction,这意味着它会给调用页面返回一个字符串值。图12显示了Page2.xaml页面载入时候的样子。
图12:Page2.xaml。应用程序的第二个页面,它给第一个页面返回一个字符串。
在后台代码Page2.xaml.vb中输入下面的内容:
Partial Public Class Page2
Inherits StringPageFunction
Public WithEvents nextPage As Page3
' 用于保存用户在页面中选择的公司名称
Private Shared _CompanyName As String
Private Sub OnLoaded(ByVal sender As Object, _
ByVal e As RoutedEventArgs) Handles Me.Loaded
txtCompanyName.Text = _CompanyName
End Sub
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
Dim myApp As NavigationApplication
Dim navWindow As NavigationWindow
myApp = CType(System.Windows.Application.Current, NavigationApplication)
navWindow = CType(myApp.MainWindow,NavigationWindow)
' 导航到下一页
If sender.Equals(btnNextPage) Then
_CompanyName = txtCompanyName.Text
nextPage = New Page3
nextPage.InitializeComponent()
navWindow.Navigate(nextPage)
End If
If sender.Equals(btnPreviousPage) Then
OnFinish(txtCompanyName.Text)
End If
' 退出应用程序
If sender.Equals(btnExit) Then
System.Windows.Application.Current.Shutdown()
End If
End Sub
Private Sub nextPage_Return(ByVal sender As Object, _
ByVal args As BooleanReturnEventArgs) Handles _
nextPage.Return
' 显示后一个窗体中输入的字符串
returnString.Text = "From Page 3: " & args.Result.ToString
End Sub
End Class
基本上,Page2.xaml.vb与Page1.xaml.vb非常相似,除了点击Previous Page(前一页)按钮的时候,它使用OnFinish()方法给调用页面返回输入的公司名称。Next Page按钮引起应用程序导航到Page3.xaml。
最后,填充Page3.xaml:
<BooleanPageFunction x:Class="Page3"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
>
<DockPanel>
<StackPanel DockPanel.Dock="Left"
Background="LightBlue">
<TextBlock Margin="10,10,10,10">
Page 3</TextBlock>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="LightYellow">
<TextBlock Margin="10,10,10,10">
Single?</TextBlock>
<RadioButtonList Margin="10,10,10,10">
<RadioButton Name="rbTrue">True</RadioButton>
<RadioButton Name="rbFalse">False
</RadioButton>
</RadioButtonList>
<DockPanel>
<Button DockPanel.Dock="Left"
Click="ButtonClick"
Name="btnPreviousPage"
Margin="10,10,10,10"
Width="80" HorizontalAlignment="Left">
Previous Page</Button>
</DockPanel>
<Button Click="ButtonClick" Name="btnExit"
Margin="10,10,10,10" Width="80"
HorizontalAlignment="Left">Exit</Button>
</StackPanel>
</DockPanel>
</BooleanPageFunction>
请注重Page3.xaml是一个BooleanPageFunction,它会给调用函数返回一个布尔型结果。图13显示了Page3.xaml载入时候的样子。
图13:Page3.xaml。这个应用程序的最后一个页面,它询问一个简单的布尔型值并返回第二个页面。
在后台代码Page3.xaml.vb中添加下面的内容:
Partial Public Class Page3
Inherits BooleanPageFunction
' 用于保存页面中选择的状态
Private Shared _Status As Boolean
' 示例事件处理程序
Private Sub OnLoaded(ByVal sender As Object, _
ByVal e As RoutedEventArgs) Handles Me.Loaded
If _Status = True Then
rbTrue.IsChecked = True
Else
rbFalse.IsChecked = True
End If
End Sub
Private Sub ButtonClick(ByVal sender As Object, _
ByVal e As RoutedEventArgs)
If sender.Equals(btnPreviousPage) Then
If rbTrue.IsChecked = True Then
_Status = True
Else
_Status = False
End If
OnFinish(_Status)
End If
' 退出应用程序
If sender.Equals(btnExit) Then
System.Windows.Application.Current.Shutdown()
End If
End Sub
End Class
现在你可以运行应用程序并跟踪工作流程(图14所示)。
图14:应用程序流程。这个线性应用程序的三个页面按页面1、2、3的次序进行,按相反的次序返回。
进入讨论组讨论。
层次导航
在带有层次导航的WPF应用程序中,用户可以根据自己的选择访问页面。图15显示了一个典型的层次导航应用程序。请注重,每个页面都可以分支出多个页面(根据需要),但是每个页面退出的时候,它将返回调用自己的那个页面。
图15:三个页面的层次。这个层次导航的应用程序的页面2和3返回页面1。
图16显示了图15所示的分层导航应用程序的一个示例实现。在第一个页面中,用户可以输入名字并选择国家,它可以点击“Select Country”(选择国家)按钮载入第二个页面。假如要选择行业,就点击“Select Industry”(选择行业)按钮载入第三个页面。选择国家和行业的页面都返回第一个页面(Page 1)。
图16:两个子页面。层次导航应用程序的一种实现。
在你作出选择之后,结果就显示在主页面上,它是整个应用程序的主页面(图17所示)。
图17:返回到开头。其它页面中输入的数据显示在Page1.xaml中了。
在本文中,你看到了Avalon分页应用程序的概述和两个简单的例子。同时你还看到了五种可供使用的PageFunction页面类型。进入讨论组讨论。