【细说windows8开发——UI篇】页面导航

本篇的的主要内容

****本篇的代码为添加的代码，不是完整的，直接在现成的文件中添加即可，均通过测试。

****欢迎问题反馈和交流  : [email protected]

这个还是直接通过一个例子给大家讲清楚。

建立一个工程，要选择空白工程，当然是windows商店应用哈！有不会建项目的给我留言。

项目建好后，添加两个基本页面，就是BasicPage

这个时候应该有如下文件

• BasicPage1.Xaml
• BasicPage1.Xaml.cs
• BasicPage2.Xaml
• BasicPage2.Xaml.cs

如果建立的时候出现错误，就右键项目名选择重新生成。可能就会好。

对BasicPage1.xaml做如下更改

1.找到   TextBlock 元素，将Text属性更改为Page1，代码如下

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 1" 
           Style="{StaticResource PageHeaderTextStyle}"/>
           

2.添加以下代码作为Grid的的子元素，也就是在<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元素，改Text属性为Page2

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
           Style="{StaticResource PageHeaderTextStyle}"/>
           

2.添加以下代码作为Grid的的子元素，也就是在<Grid>里边添加如下代码，包含了返回按钮

<StackPanel Grid.Row="1"
            Margin="120,0,120,60">
    <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
</StackPanel>
           

添加以下代码到BasicPage1.Xaml.cs中，也就是超链接的响应事件，（右键xaml中的这个Click属性，选择定位到事件处理程序，也可自动生成）

private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2));
}
           

跳转的时候其实用的就是Frame的Navigate函数，这个时候我们去app.xaml.cs里边，找到OnLanched，将代码改为如下：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    // Create a Frame to act navigation context and navigate to the first page
    var rootFrame = new Frame();
    rootFrame.Navigate(typeof(BasicPage1));

    // Place the frame in the current window and ensure that it is active
    Window.Current.Content = rootFrame;
    Window.Current.Activate();
}
           

我们发现只要把页面的名字放在typeof中即可实现跳转。

测试我们能发现跳转正常。

Frame类主要负责跳转，主要方法有Navigate 、GoBack、GoForward，Frame也是Page的一个属性，我们创建的BasicPage1就是Page的一个子类。

在页面间传递数据：

在页面之间有时候我们会传递一些数据，比如在第一个页面我们输入一些信息，这些信息跳转到新的页面的时候可能我们还是要用的，所以我们要用下面的方法来实现数据传递。

在BasicPage1.xaml中，用下面代码替换刚刚创建的StackPanel,

<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click_1"/>
</StackPanel>
           

同样在BasicPage1.xaml.cs中替换刚才的消息处理函数。

private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2), tb1.Text);
}
           

在BasicPage2.xaml.cs中我们替换一个空的函数为

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string name = e.Parameter as string;

    if (!string.IsNullOrWhiteSpace(name))
    {
        tb1.Text = "Hello, " + name;
    }
    else
    {
        tb1.Text = "Name is required.  Go back and enter a name.";
    }
}
           

这样就能实现数据的传递。

缓存一个页面

有时候我们希望页面跳转过去再跳回来的时候，当时的内容还在，我们需要用到缓存，这个其实很简单的哈，在BasicPage1的构造函数中完成如下代码

public BasicPage1()
{
    this.InitializeComponent();

    this.NavigationCacheMode = 
        Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}
           

即可！