Windows Store App Development Tutorial - Part 6 : Navigate Between Page

Page Navigation :

It’s not at all difficult to implement the navigation in Windows Store applications but if you are a Silverlight and/or Windows Phone application developer and just moved to this field, you might find difficulty developing a navigation application. In Windows Phone, we use NavigationService.Navigate() to navigate to a different page from a page. Also, we pass a relative or absolute URL to the Navigate() method. Here it’s bit different. Let’s discuss on it more.

In Windows 8 Store applications, every page has a “Frame” object, which implements the following properties and methods to support easy navigations:

GoBack() : Navigates to the most recent item in back navigation history, if a Frame manages its own   navigation history.

GoForward() : Navigates to the most recent item in forward navigation history, if a Frame manages its own   navigation history.

Navigate(type,args) : Navigates to the page specified

BackStackDepth : The number of entries in the navigation back stack

CanGoBack :Gets a value that indicates whether there is at least one entry in back navigation history

CanGoForward : Gets a value that indicates whether there is at least one entry in forward navigation history.


Check out the parameters of Navigate(type, args) method. You can see that, you can’t pass navigation Uri like we did in Silverlight and Windows Phone. Instead of passing the relative/absolute Uri path here, we have to pass the type of the page.

Let’s suppose we want to navigate from MainPage.xaml to SecondaryPage.xaml. You have to call navigate method by passing the type of second page. For example:

// simple navigation

Frame.Navigate(typeof(SecondaryPage)); 

// navigation with query parameter

Frame.Navigate(typeof(SecondaryPage), obj);

Sample :

Once you created the project, you will find a page called “MainPage.xaml”. Open it and modify the XAML code with a Button and a TextBlock as shown below :

<Page
    x:Class="SimpleNavigation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleNavigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Main Page" Style="{StaticResource HeaderTextStyle}"
                   Margin="100,50"/>
        <Button Style="{StaticResource BackButtonStyle}" Margin="403,0,0,668"
                RenderTransformOrigin="0.5, 0.5" Tapped="OnNextButtonTapped">
            <Button.RenderTransform>
                <RotateTransform Angle="180"/>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Page>
  
This will change the MainPage UI as shown below. We will implement the next button tap event to handle the navigation to a different page later.

Now create another page named as “SecondaryPage.xaml” in the root folder and modify this page with the following code. This will have a back button and a TextBlock.

<Page
    x:Class="SimpleNavigation.SecondaryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleNavigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Secondary Page" Style="{StaticResource HeaderTextStyle}"
                   Margin="100,50"/>
        <Button Style="{StaticResource BackButtonStyle}" Margin="29,0,0,674"
               Tapped="OnBackButtonTapped"/>
    </Grid>
</Page>

The new page will look as below. Here the back button implementation will have logic to navigate to the previous page in the navigation stack.

This ends the basic design of our sample application.

Implementing Navigation Between Pages : 

To implement the navigation between those pages, you need to modify the code behind of both the pages. In both the cs file, you will find the Tap event. In the MainPage.xaml.cs implementation, call the Navigate() method and pass the other page type as shown below, which when called will navigate you to the secondary page:

// Next button tap implementation (in MainPage.xaml.cs)

private void OnNextButtonTapped(object sender, TappedRoutedEventArgs e)

{

Frame.Navigate(typeof (SecondaryPage));

}

// Back button tap implementation (in SecondaryPage.xaml.cs)

private void OnBackButtonTapped(object sender, TappedRoutedEventArgs e)

{

this.Frame.Navigate(typeof(MainPage));

}

As mentioned above, if you want to pass a query string parameter to the second page where you are navigating to, you can do so by passing the value or object as second parameter to the Navigate() method.

Hope this is useful. Thank You.