【細說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;
}

即可！