#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:


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:

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):

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Main Page" Style="{StaticResource HeaderTextStyle}"
        <Button Style="{StaticResource BackButtonStyle}" Margin="403,0,0,668"
                RenderTransformOrigin="0.5, 0.5" Tapped="OnNextButtonTapped">
                <RotateTransform Angle="180"/>


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.


Main Page


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.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Secondary Page" Style="{StaticResource HeaderTextStyle}" 
        <Button Style="{StaticResource BackButtonStyle}" Margin="29,0,0,674" 


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.


Secondary Page


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)


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.

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.


  1. Genегаlly I don't refer article on blogs instead I read eBooks, but when I searched for this topic today, I checked it out in the top list. I wish to say that this write-up very forced me to check out and do so! Your writing style has been surprised me. Thanks, quite great post and will do visit regularly. Keep it up.

  2. Hey

    I think as part of the blog post you need to talk about the tenets of navigation in store apps. The Navigation bar should be used for any navigational buttons. I think what you have shown in the blog post is how to do navigation in the code. It will be a nice addition to talk about the guideline i.e. what if your app has multi pages and how will you enable the user to navigate to all. Using a navigation button. But these navigation button have their own place and thats the navigation bar. Just my 2 cents here :)

  3. Yes Lohith, I will cover them once I introduce the readers with the Navigational Apps template. This is the beginner level post to cover the basic navigation. I already mentioned in the post as "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".

    Thanks for your feedback but I will cover that very soon in the next chapters of this series.

  4. please help me to navigate in html5 windows 8 app

  5. Hi Kunal,

    I gone through navigation post it really worth!!!. But my requirement is, I have GroupedDetails page and there is Forward Button on grouped page. When I gonna click it should show me the next groups with Items associated with that groups.
    Details: I am using Tapped event. I am getting all Groups and ItemsDetails with unique Id and I am storing in the list, grouped details should be open one by one according to list grouped unique id when i clicks on the forward button next.
    Your help would be great.


© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top