Windows 8 应用的页面导航（1）

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 按钮，单击此按钮可以返回第一个页面。