Language: HTML | XAML

快速入門:在頁面之間瀏覽 (XAML)

這個主題討論瀏覽的基本概念,並說明如何建立可以在兩個頁面之間瀏覽的應用程式。

為協助您的應用程式選擇最佳的瀏覽模式,請參閱瀏覽模式

如需了解此功能的運作情形,請參閱應用程式功能,從開始到完成系列中的單層瀏覽階層式瀏覽模式。

藍圖: 這個主題與其他主題的相關性?請參閱:

您可以為您的應用程式建立多個頁面,並支援使用者在應用程式內的頁面之間瀏覽,就類似於在一個網站的網頁之間瀏覽一樣。Microsoft Visual Studio 中有頁面範本,能夠對使用 C# 或 Microsoft Visual Basic 開發的 Windows 執行階段應用程式提供基本瀏覽的支援。 在這個主題中,我們會使用頁面範本來建立支援瀏覽的簡單應用程式。

注意  

在討論 Windows 執行階段應用程式的瀏覽時,意思是指在應用程式內的頁面之間瀏覽,而不是在應用程式之間瀏覽。

先決條件

這個主題假設您可以使用 C# 或 Visual Basic 建立基本的 Windows 執行階段應用程式。如需建立第一個 Windows 執行階段應用程式的指示,請參閱使用 C# 或 Visual Basic 建立您的第一個 Windows 執行階段應用程式

建立瀏覽應用程式

Hh771188.wedge(zh-tw,WIN.10).gif建立空白應用程式

  1. 在 Visual Studio 功能表,選擇 [檔案] > [新增專案]
  2. 在 [新增專案] 對話方塊的左窗格中,選擇 [Visual C#]、[Visual Basic] 或 [Visual C++] 節點。
  3. 在中央窗格中,選擇 [空白應用程式]
  4. 在 [名稱] 方塊中,輸入 BlankApp,然後選擇 [確定] 按鈕。

    隨即建立您的方案,而且專案檔案會出現在 [方案總管] 中。如需專案檔案的詳細資訊,請參閱 Windows 執行階段應用程式的 C#、VB 及 C++ 專案範本

    重要  第一次執行 Visual Studio 時,會提示您取得開發人員授權。如需詳細資訊,請參閱取得開發人員授權
  5. 若要執行程式,在 Visual Studio 功能表上,選擇 [偵錯] > [開始偵錯],或按 F5。

    隨即顯示空白頁面。

  6. 按 Shift+F5 停止偵錯並返回 Visual Studio。

接下來,將兩個頁面新增到專案。 它們就是我們要在之間瀏覽的頁面。 執行下列步驟兩次,新增兩個頁面。

Hh771188.wedge(zh-tw,WIN.10).gif新增基本頁面

  1. 在 [方案總管] 中,開啟 [BlankApp] 專案節點的捷徑功能表,然後選擇 [加入] > [新增項目]
  2. 在 [加入新項目] 對話方塊中,選擇中間窗格中的 [空白頁]
  3. 在 [名稱] 方塊中,輸入 page1 (或 page2),然後選擇 [加入] 按鈕。

完成前面的步驟兩次後,下列檔案就會新增到您的專案。

  • BasicPage1.xaml
  • BasicPage1.xaml.cs 或 BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs 或 BasicPage2.xaml.vb

現在我們需要使用應用程式中新增的頁面。 在 BasicPage1.xaml 進行下列變更。

  • 找到名稱為 pageTitleTextBlock 元素,然後將 Text 屬性變更成 Page 1。XAML 看起來應該像這樣 ("..." 代表您沒有變更的其他屬性):

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • 新增以下 XAML 當作根 Grid 的次要子元素。 StackPanel 元素應該是 Grid 的同層級,後者包含返回按鈕以及頁面標題。

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

在 BasicPage2.xaml 進行下列變更。

  • 找到名稱為 pageTitleTextBlock 元素,然後將 Text 屬性變更成 Page 2。XAML 看起來應該會像這樣:

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • 新增以下 XAML 當作根 Grid 的次要子元素。 StackPanel 元素應該是 Grid 的同層級,後者包含返回按鈕以及頁面標題。

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

將下列程式碼新增至 BasicPage1.xaml.cs 或 BasicPage1.xaml.vb 中的 BasicPage1 類別。


Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)
	Me.Frame.Navigate(GetType(BasicPage2))
End Sub	

現在我們已經準備好新的頁面,我們必須讓 BasicPage1 成為應用程式啟動時顯示的第一個頁面。 開啟 app.xaml.cs/vb,使用 BasicPage1 (不是 BlankPage) 將 OnLaunched 方法變更為呼叫 Frame.Navigate。 相關的一行程式碼看起來像這樣:


    If Not rootFrame.Navigate(GetType(BasicPage1), e.Arguments) Then
...

注意  如果瀏覽到應用程式的初始視窗框架失敗,這裡的程式碼就會使用傳回值 Navigate 來擲回應用程式例外狀況。當 Navigate 傳回 true 時,表示已在瀏覽。

現在您已經準備好測試應用程式了。 啟動應用程式,然後按一下 [Click to go to page 2] 連結。 第二頁的最上方應該會顯示 "Page 2"。 在 Windows 市集應用程式中,請注意頁面標題的左邊有一個 [返回] 按鈕。 按一下這個按鈕即可返回第一頁。在 Windows Phone 市集應用程式中,按一下手機的 [返回] 按鈕即可返回第一頁。

Frame 和 Page 類別

將更多功能新增到應用程式前,我們先來看看前面新增的頁面如何為應用程式提供瀏覽支援。

如果沒有 Frame,檔案 App.xaml.cs/vb/cpp 會建立一個 Frame,並將它做為目前視窗的內容。 如果框架內容為 null,應用程式會根據程式碼後置 App.xaml 的指示,瀏覽到首頁。例如,在格線應用程式中,程式碼為 rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") )

Frame 類別主要用於執行瀏覽,以及實作 NavigateGoBack 以及 GoForward 之類的方法。 您使用 Navigate 方法來顯示 Frame 中的內容。 在前面的範例中,App.OnLaunched 方法會建立一個 Frame 類別,並將 BasicPage1 傳送給 Navigate 方法。 接著,這個方法會將應用程式目前視窗的內容設成 Frame。結果就是應用程式的視窗會包含一個 Frame (其中包含了 BasicPage1)。

BasicPage1Page 類別的子類別。 Page 類別具有 Frame 屬性,這個唯讀屬性會取得包含 PageFrame。 當 HyperlinkButtonClick 事件處理常式呼叫 Frame.Navigate(typeof(BasicPage2)) 時,應用程式視窗中的 Frame 會顯示 BasicPage2 的內容。

暫停管理員

重要  

以下專案範本提供 SuspensionManager 協助程式類別:

Windows 應用程式中樞應用程式、格線應用程式、分割應用程式
Windows Phone 應用程式中樞應用程式、樞紐分析應用程式
通用應用程式中樞應用程式

 

「空白應用程式」範本不提供 SuspensionManager 協助程式類別。

在設定期間,SuspensionManager 會登錄 FrameSuspensionManager 是範本中 Common 資料夾提供的協助程式類別,而且會提供應用程式終止時用來儲存和載入狀態的實作。

所有應用程式會依照作業系統的規定執行應用程式週期。 每當應用程式因資源限制、關機、重新啟動等原因遭系統終止時,身為開發人員的您必須在應用程式繼續時還原資料。 提供 SuspensionManager 的目的是為了協助您進行這項工作。

SuspensionManager 會擷取全域工作階段狀態以簡化應用程式的處理程序生命週期管理。 工作階段狀態會在各種狀況下自動清理,而且只應該用來儲存可以在工作階段間方便移動的資訊,但這些資訊在應用程式當機或升級時應被捨棄。 這基本上會包含暫時性 UI 資料。

SuspensionManager 有兩個屬性:SessionState 和 KnownTypes。

  • SessionState 提供目前工作階段之全域工作階段狀態的存取權。 SaveAsync 方法會序列化這個狀態,而 RestoreAsync 方法則會還原這個狀態。 所有資料都由 DataContractSerialization 加以儲存和還原,而且應該要盡可能地簡化。 字串是另一種獨立的資料類型,強烈建議您使用。
  • KnownTypes 會儲存要提供給 DataContractSerializer 的自訂類型清單,SaveAsync 和 RestoreAsync 方法會在讀取和寫入工作階段狀態時加以使用。 一開始是空的,您可以新增其他類型來自訂序列化程序。

SuspensionManager 會在字典 SessionState 儲存狀態。 字典會依繫結到 Frame 的唯一索引鍵儲存 FrameState。 每個 FrameState 字典會針對特定框架保留瀏覽狀態中每個頁面的狀態。 每個頁面都會儲存瀏覽參數以及使用者決定新增的任何其他狀態。

下列為運作的方法:建立 Frame 後,如果想要儲存該框架的狀態,應該要立即進行登錄。 它們會使用下列呼叫 (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")) 進行登錄。 每個框架應該要有一個關聯的唯一索引鍵。 大部分應用程式通常只有單一框架。 如果您宣告第二個框架,該框架也需要進行登錄。 當框架登錄時,會在框架上設定兩個附加屬性。 第一個是與框架關聯的索引鍵,第二個則是將與框架關聯的工作階段狀態字典。 之前已登錄的框架會立即還原其瀏覽和狀態。 框架也可以解除登錄,這樣會造成所有瀏覽狀態和歷程記錄都會捨棄。

現在來介紹重要的呼叫:SaveAsyncRestoreAsyncSaveAsync 可用來儲存整個 SessionState。 透過 SuspensionManager.RegisterFrame 登錄的所有框架也會保留它們目前的瀏覽堆疊,這樣可以讓它們的使用中頁面有機會可以儲存資料。 然後,SessionState 會使用 DataContractSerializer 進行序列化,根據 ApplicationData 的定義寫入儲存在本機資料夾的檔案。

RestoreAsync 是用來讀取之前儲存的 SessionState。 透過 RegisterFrame 登錄的所有框架也會還原它們之前的瀏覽狀態,這樣可以讓它們的使用中頁面有機會可以還原狀態。 跟在 SaveAsync 中一樣,會使用 DataContractSerializer 還原序列化儲存在應用程式本機資料夾檔案的狀態。

使用者嘗試儲存應用程式狀態時,最常遇到兩個錯誤。

  • 在 C# 和 VB 中,個別頁面儲存的類型必須能夠由 DataContractSerializer 進行序列化。 為了這樣做,所有自訂類型都必須先登錄才能進行儲存和還原。 SuspensionManager 提供 KnownTypes 集合,可以將集合中的類型傳送到 DataContractSerializer。 在呼叫 SuspensionManager 以還原 App.xaml 程式碼後置 OnLaunched 覆寫狀態時,登錄類型最好的地方就是應用程式建構函式。
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • 使用瀏覽傳入的參數必須能夠經由平台進行序列化。 當我們儲存和還原瀏覽堆疊時,會呼叫 Frame.GetNavigationState()Frame.SetNavigationState()。 這兩個呼叫都會使用內部序列化格式,而且在 Frame.Navigate() 中以參數形式傳送的所有類型都必須能夠經由平台進行序列化。
SuspensionManager 的用法包裝在 NavigationHelper 實作中。

NavigationHelper 這是頁面的實作,可提供下列方便的重要功能:

  • 適用於 NavigateGoBackGoForward 的事件處理常式。
  • 用於瀏覽的滑鼠和鍵盤快速鍵。
  • 瀏覽狀態管理以及處理程序生命週期管理。

除了提供所描述的實作外,也必須從在每個頁面上實作的 OnNavigatedTo()OnNavigatedFrom() 事件處理常式呼叫 NavigationHelper。 當這些事件發生時,NavigationHelper 會呼叫頁面特定的 LoadState() 與 SaveState() 實作。 您可在每個頁面上自訂這些函式的實作。這兩個事件應該用來分別取代 OnNavigatedTo()OnNavigatedFrom()

注意  在 Windows Phone 市集應用程式中,當應用程式暫停時會呼叫 OnNavigatedFrom()。應用程式繼續時,則不會呼叫 OnNavigatedTo()

當頁面即將在 Frame 顯示時,會呼叫 OnNavigatedFrom()。 我們瀏覽到新頁面時,會載入與頁面關聯的狀態。 如果還原頁面,會還原之前儲存的頁面狀態。 然後會以每個頁面可以反應的方式呼叫 LoadState。 LoadState 有兩個參數;原始瀏覽參數會傳送到 OnNavigatedTo 和之前的頁面狀態 (如果有的話)。

如果頁面不再顯示於 Frame,就會呼叫 OnNavigatedFrom()。 當我們瀏覽完離開頁面,頁面可以儲存目前的狀態。 空的字典會傳入 SaveState()。 每個頁面都可以覆寫 SaveState,並將物件儲存在索引字典 (字串到物件)。 接著,這個字典就會與頁面產生關聯,並新增到 SuspensionManager 在指定框架中追蹤的 SessionState。

注意  
  • 儲存在個別頁面的任何資料必須能夠讓 DataContractSerializer 加以序列化。
  • 只將暫時性 UI 資訊儲存在這裡也很重要,因為如果應用程式因終止以外的理由關閉,這個狀態就會遺失。

頁面範本中的瀏覽支援

建立瀏覽頁面時,我們使用 [基本頁面] 範本。 這個範本 (以及支援瀏覽的其他範本) 會建立一個頁面,並在頁面的左上角提供一個 [返回] 按鈕。 按鈕的樣式設定為僅在按鈕啟用時才看得到。 這就是為什麼您在第一頁上不會看到 [返回] 按鈕,但是會在第二頁上看到。

下列頁面範本也提供這種相同瀏覽的支援。

  • 基本頁面
  • 群組詳細資料頁面
  • 群組項目頁面
  • 項目詳細資料頁面
  • 項目頁面
  • 分割頁面
  • 中樞頁面
  • 搜尋結果頁面

在頁面之間傳送資訊

我們的應用程式可以在兩個頁面之間瀏覽,但這只是最基本的功能。 通常,當應用程式有多個頁面時,這些頁面需要共用資訊。 讓我們將一些資訊從第一頁傳送到第二頁。

在 BasicPage1.xaml 中,使用這個 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"/>
</StackPanel>


在 BasicPage1.xaml.cs 或 BasicPage1.xaml.vb 中,使用下列程式碼取代 HyperlinkButton_Click 事件處理常式。


    Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)

        Me.Frame.Navigate(GetType(BasicPage2), tb1.Text)

    End Sub
	

在 BasicPage2.xaml.cs 或 BasicPage2.xaml.vb 中,使用下列項目填入空的 navigationHelper_LoadState 方法:


    Private Sub navigationHelper_LoadState((e As NavigationHelper.LoadStateEventArgs)
        Dim name As String = TryCast(e.NavigationParameter, String)
        If Not String.IsNullOrWhiteSpace(name) Then
            tb1.Text = "Hello, " & name
        Else
            tb1.Text = "Name is required.  Go back and enter a name."
        End If
    End Sub

執行應用程式,在文字方塊中輸入您的名稱,然後按一下 [Click to go to page 2] 連結。 當您在 HyperlinkButtonClick 事件中呼叫 this.Frame.Navigate(typeof(BasicPage2), tb1.Text); 時,則在 BasicPage2 載入時就會傳送 tb1.Text 屬性。 接著,BlankPage2navigationHelper_LoadState 方法會從事件資料取得值,並用它來顯示訊息。

快取頁面

在您執行上一個範例時,您可能會注意到如果按一下 BasicPage2 上的 [返回] 按鈕,BasicPage1 上的 TextBox 顯示時是空的。 讓我們假設應用程式的使用者想要返回之前的頁面並進行變更。 如果 BasicPage1 有許多要填寫的欄位,那麼使用者在應用程式返回這個頁面時,可能不喜歡看到已重設的欄位。 您可以指定使用 NavigationCacheMode 屬性快取頁面。 在 BasicPage1 的建構函式中,將 NavigationCacheMode 設成 Enabled


Sub New()
    InitializeComponent()
    ...
    Me.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled
End Sub


現在當您執行應用程式並從 BasicPage2 瀏覽回 BasicPage1 時,BasicPage1 上的 TextBox 就會保留它的值。

摘要

在這個主題中,您將了解如何建立可以在頁面之間瀏覽的簡單應用程式。 您也了解如何將資訊從一個頁面傳送到另一個頁面,以及如何指定要快取頁面的狀態。

後續步驟

如需一起使用多個 PageFrame 功能的完整範例,請參閱 XAML 瀏覽範例。此範例包含此處未討論的功能,包括:

相關主題

在頁面之間瀏覽
適用於設計者
瀏覽模式
命令模式
配置
返回按鈕
Hub 控制項的指導方針
應用程式列的指導方針 (Windows 執行階段應用程式)
設計無障礙應用程式列
適用於開發人員 (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
您的第一個應用程式 - 第三部分:瀏覽、配置與檢視
您的第一個應用程式 - 在 C++ Windows 市集應用程式新增瀏覽和檢視 (教學課程四之三)
XAML Hub 控制項範例
XAML AppBar 控制項範例
XAML 瀏覽範例
新增應用程式列 (XAML)

 

 

顯示:
© 2015 Microsoft