11.1 页面间的导航

可以为Metro风格的应用程序创建多个页面,并且可以支持用户在多个页面中进行导航,类似于在一个简单网站上进行的导航。Visual studio 11拥有页面模板,可以提供基本的导航支持。

注意,当在Metro风格的应用程序中说到导航时,我们指的是在一个应用程序的不同页面的导航,而不是在不同的应用程序之间的导航。

11.1.1 创建导航应用程序

1)创建一个新的Metro风格的项目

1)启动Visual Studio 2008

1.选择 File > New Project.(New Project对话框会打开)

2.Installed窗口中,展开Visual C#

3.选择Windows Metro style 模板类型

4.在center pane中,选择Blank Application

5.为项目输入一个名字,将会调用NavigationQuickstart对象

6.单击OK按钮完成对象文件创建

2)为应用程序添加页面

1. 选择 File > New Project.(New Project对话框会打开)

2. 在Installed窗口中,展开Visual C#

3. 选择Windows Metro style 模板类型

4. 在center pane中,选择Basic Page

5. 单击ADD完成添加

当完成前面执行前面的步骤两次后,下面的文件就会添加到用户创建的项目中。

q BasicPage1.Xaml

q BasicPage1.Xaml.cs

q BasicPage2.Xaml

q BasicPage2.Xaml.cs

下面需要使用添加的两个页面,对BasicPage1.xaml页面做如下改动:

1) 找到TextBlock的元素并命名为pageTile,改变page 1的Text属性值,下面是XAML代码:

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 1"

Style="{StaticResource PageHeaderTextStyle}"/>

2) 为Grid添加下面的代码作为第二个子元素,StackPanel元素应该是包含Back button和page title的Grid子元素。

<StackPanel Grid.Row="1"

Margin="120,0,120,60">

<HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click_1"/>

</StackPanel>

对BasicPage2.xaml做如下改动:

1) 找到TextBlock的元素并命名为pageTile,改变page 2的Text属性值,下面是XAML代码:

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2"

Style="{StaticResource PageHeaderTextStyle}"/>

2) 为Grid添加下面的代码作为第二个子元素,StackPanel元素应该是包含Back button和page title的Grid子元素。

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2"

Style="{StaticResource PageHeaderTextStyle}"/>

 

在BasicPage1.Xaml.cs中将下面的代码添加到BasicPage1类中

private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)

{

this.Frame.Navigate(typeof(BasicPage2));

}

由于之前已经创建新的页面,需要设置当程序启动时BasicPage1自动显示。打开app.xaml.cs文件,改变OnLaunched方法,使用BasicPage1而不是BlankPage调用Frame.Navigate。整个的OnLaunched方法必须跟下面代码一致:

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

// 创建Frame执行导航,并将其导航到第一个页面

var rootFrame = new Frame();

rootFrame.Navigate(typeof(BasicPage1));

// 将Frame放在当前的窗口中确保其是可用的

Window.Current.Content = rootFrame;

Window.Current.Activate();

}

现在已经为测试应用程序做好了准备。启动应用程序,单击可以名为Click to go to page 2的链接。注意在页面标题的左侧有一个 Back 按钮,单击此按钮可以返回第一个页面。

posted on 2013-01-13 09:20  冯瑞涛  阅读(314)  评论(0编辑  收藏  举报