Getting Started: Navigation

Adding navigation

iOS provides the UINavigationController class to help with navigation: you can push and pop view controllers to get the desired effect.

In Windows 8, navigation should blend into your app's content. This follows from one of the principles of Windows Store app design, "content before chrome". For more info, see Navigation design for Windows Store apps.

With Windows Store apps, one of the ways to manage navigation is with the Frame class. The following walkthrough shows you how to try this out.

You can either continue to use the MyApp project that you created earlier, or you can create a new project. If you create a new project, you can name it something like "App1". Open the MainPage.xaml file if it isn't already visible. Add a button to the MainPage.xaml file in Design view. Change the button's Content property from "Button" to "Go To Page". 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 preceding section "Adding controls, setting their properties, and responding to events".

Adding a button and its Click event in Visual Studio

Let's add a new page: tap the Project menu, and then tap Add New Item. Tap Blank Page as shown in the following figure, and then tap Add.

Adding a new page in Visual Studio

Next, add a button to the BlankPage1.xaml file. Let's give the button a back arrow image: in the XAML view, add Style="{StaticResource BackButtonStyle}" to the <Button> element.

Now let's add an event handler to the button: in the Properties pane, tap the lightning bolt button, and then press and hold the box next to the Click label. Microsoft Visual Studio adds the text "Button_Click_1" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage1.xaml.cs file.

Adding a back button and its Click event in Visual Studio

If you return to the BlankPage1.xaml file's XAML view, the <Button> element's Extensible Application Markup Language (XAML) code should now look like this. (Line breaks have been added for code readability.)


<Button 
    Content="Button" 
    HorizontalAlignment="Left" 
    Style="{StaticResource BackButtonStyle}"  
    Margin="10,10,0,0" 
    VerticalAlignment="Top" 
    Click="Button_Click_1"
/>

Return to the BlankPage1.xaml.cs file, and add this code to go to the previous page after the user taps the button.


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

Finally, open the MainPage.xaml.cs file and add this code. It opens BlankPage1 after the user taps the button.



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

Now run the program. 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.

Page navigation is managed by the Frame class. Similar to the UINavigationController class in iOS, which has pushViewController and popViewController methods, the Frame class for Windows Store apps has Navigate and GoBack methods. The Frame class also has a method called GoForward, which does what you might expect.

This walkthrough creates a new instance of BlankPage1 each time you navigate to it. (The previous instance will be freed, or released, automatically by the garbage collector). If you don't want a new instance to be created each time, add the following code to the BlankPage1 class's constructor in the BlankPage1.xaml.cs file. This will enable the NavigationCacheMode behavior.


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

You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

For more info about navigation, see Quickstart: Navigating between pages and XAML personality animations sample.

Note  For info about navigation for Windows Store apps using JavaScript and HTML, see Quickstart: Using single-page navigation.

Next step

Getting started: Animation

 

 

Show:
© 2014 Microsoft. All rights reserved.