開始使用:瀏覽Getting started: Navigation

新增瀏覽Adding navigation

iOS 提供 UINavigationController 類別來協助 app 內瀏覽:您可以推入及彈出檢視控制項來建立 UIViewControllers 的階層以定義您的 app。iOS provides the UINavigationController class to help with in-app navigation: you can push and pop views to create the hierarchy of UIViewControllers that define your app.

相反地,包含多個檢視的 Windows 10 app 會採取類似網站的方式進行瀏覽。In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. 您可以想像您的使用者透過不斷點按控制項,從一個頁面跳至不同的頁面來使用 app。You can imagine your users hopping from page to page as they click on controls to work their way through the app. 如需詳細資訊,請參閱瀏覽設計基本知識For more info, see Navigation design basics.

在 Windows 10 app 中管理這類瀏覽的其中一種方式是使用 Frame 類別。One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. 下列逐步解說會說明如何嘗試使用這種方式。The following walkthrough shows you how to try this out.

讓我們繼續之前開始的方案,開啟 MainPage.xaml 檔案,然後在 [設計] 檢視中新增一個按鈕。Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. 將按鈕的 [Content] 屬性從「Button」變更為「Go To Page」。Change the button's Content property from "Button" to "Go To Page". 然後為按鈕的 Click 事件建立一個處理常式,如下圖中所示。Then, create a handler for the button's Click event, as shown in the following figure. 如果您不記得怎麼做,請檢閱上一節中的逐步解說 (提示:按兩下 [設計] 檢視中的按鈕)。If you don't remember how to do this, review the walkthrough in the previous section (Hint: double-click the button in the Design view).

在 Visual Studio 中新增按鈕及其 Click 事件

讓我們開始新增頁面。Let's add a new page. 在 [方案] 檢視中,依序點選 [專案]功能表和 [加入新項目]。In the Solution view, tap the Project menu, and tap Add New Item. 點選 空白頁 (如下圖所示),然後點選 新增Tap Blank Page as shown in the following figure, and then tap Add.

在 Visual Studio 中新增頁面

接下來,將按鈕新增到 BlankPage.xaml 檔案。Next, add a button to the BlankPage.xaml file. 讓我們使用 AppBarButton 控制項,並為它提供一個返回箭頭影像:在 [XAML] 檢視中,於 <Grid> </Grid> 元素之間新增 <AppBarButton Icon="Back"/>Let's use the AppBarButton control, and let's give it a back arrow image: in the XAML view, add <AppBarButton Icon="Back"/> between the <Grid> </Grid> elements.

現在,讓我們將事件處理常式新增至按鈕:在 設計 視圖中按兩下控制項,然後 Microsoft Visual Studio 將文字 "icon _ click" 加入至 按一下 方塊(如下圖所示),然後在 BlankPage.xaml.cs 檔案中加入並顯示對應的事件處理常式。Now, let's add an event handler to the button: double-click the control in the Design view and Microsoft Visual Studio adds the text "AppBarButton_Click" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage.xaml.cs file.

在 Visual Studio 中新增上一頁按鈕及其 Click 事件

如果您返回檔案的 [XAML] 檢視,<AppBarButton> 元素的 Extensible Application Markup Language (XAML) 程式碼現在應該看起來像這樣:If you return to the BlankPage.xaml file's XAML view, the <AppBarButton> element's Extensible Application Markup Language (XAML) code should now look like this:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

返回 BlankPage.xaml.cs 檔案並新增這個程式碼,讓使用者點選按鈕之後返回到上一個頁面。Return to the BlankPage.xaml.cs file, and add this code to go to the previous page after the user taps the button.

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

最後,開啟 MainPage.xaml.cs 檔案並新增下列程式碼。Finally, open the MainPage.xaml.cs file and add this code. 它會在使用者點選按鈕之後開啟 BlankPage。It opens BlankPage after the user taps the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

現在執行程式。Now, run the program. 點選「Go To Page」按鈕移至其他頁面,然後點選上一頁箭頭按鈕返回上一個頁面。Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

頁面瀏覽是由 Frame 類別來管理的。Page navigation is managed by the Frame class. 當 iOS 中的 UINavigationController 類別使用 pushViewControllerpopViewController 方法時,UWP 應用程式的 Frame 類別會提供 導覽GoBack 方法。As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. Frame 類別也有名為 GoForward 的方法,可執行您期待的動作。The Frame class also has a method called GoForward, which does what you might expect.

這個逐步解說會在您每次瀏覽到 BlankPage 時,建立新的 BlankPage 執行個體。This walkthrough creates a new instance of BlankPage each time you navigate to it. (系統會自動釋出或釋放之前的執行個體)。(The previous instance will be freed, or released, automatically). 如果您不想要每次都建立新的執行個體,請將下列程式碼新增到 BlankPage.xaml.cs 檔案中的 BlankPage 類別建構函式。If you don't want a new instance to be created each time, add the following code to the BlankPage class's constructor in the BlankPage.xaml.cs file. 這會啟用 NavigationCacheMode 行為。This will enable the NavigationCacheMode behavior.

public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

您也可以取得或設定 Frame 類別的 CacheSize 屬性,以管理瀏覽記錄可以快取的頁面數。You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

如需瀏覽的詳細資訊,請參閱瀏覽XAML 個人特質動畫範例For more info about navigation, see Navigation and XAML personality animations sample.

注意   如需使用 JavaScript 和 HTML 流覽 UWP 應用程式的詳細資訊,請參閱快速入門:使用單頁流覽Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

後續步驟Next step

開始使用:動畫Getting started: Animation