Windows Phone 7 開發 31 日談——第2日：頁面間導航

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談”系列的第2日。

    今天，我們來探討如何在Silverlight for Windows Phone中進行頁面間導航。這非常重要，原因有二：首先，你不會願意在一個XAML檔案中構建整個應用程式。第二，因為下面的原則，你的程式會自動利用手機內建的返回按鍵。這允許你的使用者想返回到之前的操作時可以向前置航。明天我們來深入討論返回按鍵。

    在頁面間導航有很多種方法，但是我打算只講一種。我更喜歡叫它簡單Web導航。正如其名，這裡採取的方式正如你在HTML頁面中導航相似。當然還有一些其他的架構可用（像MVVM），但是本篇文章的目的是講解這個簡單的方法。

簡單Web導航

    假設我們有很多頁面，並且我們想給使用者能在它們之間穿梭的一種方式。先來構建一個簡單的導航UI讓我們能做以上的事情，現在開始：

1)建立一個新的Windows Phone Application。

 

 2)添加幾個Windows Phone縱向頁面。

我們將在第4日討論頁面方向（縱向和橫向）。現在只談縱向。我建立了3個縱向頁面：Pasta.xaml, Sauce.xaml和Cheese.xaml。我將用幾種不同的方法把它們聯絡在一起。

3)改變頁面的標題，以便在頁面變更後可以知道所在的位置。

    當你建立一個新頁面時，有一個叫“PageTitle”的XAML元素它預設被設定為“page name”。在每個頁面中都更改這個元素以便於知道你當前處於哪個頁面。我喜歡這樣做是因為可以減少出錯的幾率。你會發現當你投入精力製作一個項目時起初的代碼看起來都很相似，所以讓他們看起來有所區別（至少在編碼時）會有很大協助。

4)在MainPage.xaml中建立幾個超連結（hyperlink）。

在頁面間建立連結，有幾種不同的方式。第一種是全XAML解決方案。為此，我們可以使用超連結按鈕（HyperlinkButton）控制項。以下是代碼：

代碼<HyperlinkButton Content="Pasta" NavigateUri="/Pasta.xaml" Height="30" HorizontalAlignment="Left"   
   Margin="10,10,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />

<HyperlinkButton Content="Sauce" NavigateUri="/Sauce.xaml" Height="30" HorizontalAlignment="Left" 
  Margin="10,10,0,0" Name="hyperlinkButton2" VerticalAlignment="Top" Width="200" />

<HyperlinkButton Content="Cheese" NavigateUri="/Cheese.xaml" Height="30" HorizontalAlignment="Left" 
  Margin="10,10,0,0" Name="hyperlinkButton3" VerticalAlignment="Top" Width="200" />

 

當你運行項目時，你可以點擊任何一個超連結按鈕然後跳轉到相應的頁面中。使用返回鍵同樣可以使你回到上一個介面。如果你返回多次，你會發現一旦越過了程式的第一頁你就離開了當前的應用程式。

5)通過代碼導航到頁面。

如果你喜歡通過代碼而非完全使用XAML，你可以僅僅用一些XAML元素來實現。在本例中，我們使用按鈕。我建立了3個按鈕，每一個都指向相同的事件處理常式。在下面的C#代碼中，你會看到我實際上檢測了是哪個按鈕被點擊了，然後導航到相應的頁面。返回鍵的所有功能仍然可用。

XAML

代碼<Button x:Name="PastaButton" Content="Pasta" Click="Button_Click" Width="200" Height="75" />

<Button x:Name="SauceButton" Content="Sauce" Click="Button_Click" Width="200" Height="75" />

<Button x:Name="CheeseButton" Content="Cheese" Click="Button_Click" Width="200" Height="75" />

 C#

代碼        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button clickedButton = sender as Button;
            switch (clickedButton.Name)
            {
                case "PastaButton":
                    NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));
                    break;
                case "SauceButton":
                    NavigationService.Navigate(new Uri("/Sauce.xaml", UriKind.Relative));
                    break;
                case "CheeseButton":
                    NavigationService.Navigate(new Uri("/Cheese.xaml", UriKind.Relative));
                    break;
            }
        }

正如你看到的，僅僅使用了NavigationService就將使用者的動作記錄了下來，同時使用返回鍵就可以使它沿著決策樹返回。

下載範例程式碼

明天，我們探索如何利用返回按鍵來實現更多的功能。

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-2-Page-Navigation.aspx