#Win8Dev Tutorial: Navigate between Pages in Windows Store apps

Let’s begin with our fourth chapter of building Windows Store application development using Visual Studio 2012. In the previous chapters of this tutorial series, we got familiar with this project template and built a basic “Hello World” application.

Today in this chapter we will learn how to navigate from one page to another page in Windows 8 Store applications. So, continue reading.

Introduction to 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:

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:

Frame.Navigate(typeof(SecondaryPage)); // simple navigation

Frame.Navigate(typeof(SecondaryPage), obj); // navigation with query parameter

Let’s see a practical example. For this, we will need to create a basic blank Windows Store application. For more details, check out the previous chapter: “Begin with your First 'Hello World' app”, which will give you the basic idea.

Begin with XAML Screen

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 shared below (assuming you are familiar with XAML):

<Page

    x:Class="NavigationDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <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="NavigationDemo.SecondaryPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <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. You can do more with that but it is not require to complex this demo as you are reading it to know more about this implementation.

Implementing the Navigation between Pages

To implement the navigation between those pages, you need to modify the code behind of both the screens. 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:

// Forward 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)

{

    if (Frame.CanGoBack)

    {

        Frame.GoBack();

    }

}

In the SecondaryPage.xaml.cs implementation (as shown above), first check whether the navigation can go to the previous page and if it can go, call the GoBack() method from the Frame itself.

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.

End Note

I hope that, this post will help you to understand the navigation mechanism in Windows Store application. After reading this chapter, you will be able to navigate the user from one page to another and also you will be able to send message to the other page.

Stay tuned to my forthcoming tutorials on the same topic. To get updates, subscribe to my blog’s RSS feed and Email Newsletter. Drop a comment below if you have any queries or feedback. I am also available on Twitter, Facebook and Google+. Do connect with me there for technical discussions and updates. Happy Coding.