分享
 
 
 

Avalon应用程序中的导航技术分析

王朝other·作者佚名  2008-06-01
窄屏简体版  字體: |||超大  

用户使用微软的新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页面类型。进入讨论组讨论。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有