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.

XAML

<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" />

C#

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

	switch(clickedButton.Name)
	{
		case "PastaButton":
			NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));
			break;
		case "SauceButton":
			NavigationService.Navigate(new Uri("/Sauce.xaml", UriKind.Relative));
			break;
		case "CheeseButton":
			NavigationService.Navigate(new Uri("/Cheese.xaml", UriKind.Relative));
			break;
	}
}

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.