31 Days of Windows Phone | Day #2: Page Navigation

This post is Day #2 in a series called the 31 Days of Windows Phone.

Today, we’re going to talk about how you navigate between pages in Silverlight for Windows Phone. This will be an important lesson for two reasons. The first is because you don’t want to build your whole application in one XAML file. The second is because by following the rules, your application will automatically be able to leverage the phone’s built-in hardware Back button. This will allow your users to navigate backwards in your application when they want to get back to what they were doing previously. We’ll talk more about the Back button tomorrow.

There’s many ways to navigate between pages, but I’m going to focus on one. I’m going to refer to it as Simple Web Navigation. It’s exactly like it sounds. We’ll navigate between pages the same way you’d navigate through HTML pages.  There are certainly other frameworks available to you as well (like MVVM), but for the purposes of this post, we’ll just cover this simple approach.

Simple Web Navigation

We have multiple pages, and we want to give the user a way to get between them.  Let’s build a simple navigation UI that will allow us to do just that.  Let’s start at the beginning:

1)  Create a new Windows Phone Application.


2) Add some new Windows Phone Portrait Pages.


We will talk more about Page Orientation (Portrait vs. Landscape) on Day #4.  For now, let’s just stick to Portrait pages.  I’ve created three new ones:  Pasta.xaml, Sauce.xaml, and Cheese.xaml.  We’ll be linking these pages together using several different methods.

3) Change each page’s title, so we know when we’re on each page.

One each new page you created, there was a XAML element named “PageTitle", and it was set by default to “page name".  Change this on each page so that it’s obvious which page you’re working on.  I like to do this so that I’m less prone to make mistakes.  You’ll find as you dive into an elaborate project that the code starts to all look the same, so making them look different (at least while you’re coding) can go a long way.


4) Create some hyperlinks on MainPage.xaml

To create links between pages, we have several different options.  The first is the all-XAML solution.  To do this, we can use the HyperlinkButton control.  Here’s the code:

<HyperlinkButton Content="Pasta" NavigateUri="/Pasta.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
<HyperlinkButton Content="Sauce" NavigateUri="/Sauce.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton2" VerticalAlignment="Top" Width="200" />
<HyperlinkButton Content="Cheese" NavigateUri="/Cheese.xaml" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="hyperlinkButton3" VerticalAlignment="Top" Width="200" />

When you run your project, you should be able to click on any of these HyperlinkButtons and end up on that specific page (assuming you had the same pages as I did.)  Using the back button should also navigate you back to the previous screen.  If you navigate back far enough, you should also find that you leave your application once you go beyond the first screen of your application.

5)  Navigating to pages via code

If you prefer to do this via code instead of putting it all of your XAML, you can use just about any XAML element to make it happen.  For this example, we’ll just use a button.  I’ve created three buttons in this example, and each of them point to the same event handler.  In the C# below, you’ll see that I actually detect which button was clicked, and navigate the user to the appropriate page.  All of the Back button functionality is also available.


<Button x:Name="PastaButton" Content="Pasta" Click="Button_Click" Width="200" Height="75" />
<Button x:Name="SauceButton" Content="Sauce" Click="Button_Click" Width="200" Height="75" />
<Button x:Name="CheeseButton" Content="Cheese" Click="Button_Click" Width="200" Height="75" />


private void Button_Click(object sender, RoutedEventArgs e)
	Button clickedButton = sender as Button;

		case "PastaButton":
			NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));
		case "SauceButton":
			NavigationService.Navigate(new Uri("/Sauce.xaml", UriKind.Relative));
		case "CheeseButton":
			NavigationService.Navigate(new Uri("/Cheese.xaml", UriKind.Relative));

As you can see, by simply navigating using the NavigationService, all of your user’s actions are recorded, and using the Back button will allow them to return through their decision tree.

Download the Code

Tomorrow, we’re going to explore how we can leverage the Back button for even more functionality.


9 thoughts on “31 Days of Windows Phone | Day #2: Page Navigation

  1. Great point, Greg! Thanks for the extra info!

  2. Analytical've been affiliated with this admission. He did not leave in abundance, but so detailly. We put plenty of fans. I cheer for you, you can emerge from the warning here. We abound together.On added hand, warn that some web sites is well acceptable.

  3. I encourage you to start this blog, I could not acquire any advice on this position before. It thus has a website and if at any time to activate the analysis of some accounting for me, if possible, have fun, let me know, I always go to humans that quotes my site.

  4. Later, after spending hours on the Internet abound, accept a being who will surely start apperceive definitely not what they are discussing a column border on to admit that plenty of rich and wonderful real.

  5. I figured he had read my "How to make a button" article eHow and is now ready to animate ..

  6. Whatever America hopes to bring to pass in the world must first come to pass in the heart of America.

  7. Love the simplicity, straight into programming and let the code do the talking. I didn’t know about the NavigationService, I would have normally just hardcoded. Thanks.

  8. Thanks for this! Helped me so much!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s