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

即可！