Simple Page Navigation
by kirupa |  3 August 2010

  Have questions? Discuss this Windows Phone 7 tutorial with others on the forums.

While the concept of navigating between pages sort of exists in desktop applications, it is really something most of us are more familiar with when it comes to web sites. Clicking on a link and going from one page to another is pretty much the expected behavior.

Strangely enough, that behavior is common in Windows Phone applications as well. These applications, despite running locally on the device, use the page-centric model of web sites where you use individual pages to store your content. Where there are individual pages, there are links to navigate you between them!

Here is a really short video that demonstrates navigation in a Windows Phone application:

In the example shown in the video, I have two pages. The first page contains some checkboxes and a button labeled build playlist:

The second page contains a list of album art and text:

When the build playlist button on the first page is clicked, the user is navigated to the second page. Hitting the back button on the device/emulator takes you back to the first page. If you found this pretty cool, by the end of this tutorial, you will have learned to do all of this yourself....well, at least the navigation part!

Getting Started
Make sure you have everything up and running to do Windows Phone development, and go ahead and create a new Windows Phone project in Expression Blend. That's it.


Creating new Pages
In order to navigate between pages, you need to first have pages to navigate to. If you don't have a project that already contains existing pages, let's quickly look at how to create pages. When you create a new Windows Phone project, a page will already be created for you and displayed for editing inside Expression Blend.

This page is usually called MainPage.xaml, and you can see it by looking at your Projects pane:

[ your Projects panel displays all of the files in your project ]

To add an additional page, right click on the Project node (the green one with a C# icon in it) and go to Add New Item. The New Item dialog will appear:

[ this dialog displays the types of components you can add to your project ]

This dialog lists all of the new items you can add to your project. The item we are interested in for this tutorial is called Windows Phone page:

[ we want to add a Windows Phone Page ]

Select the Windows Phone Page item, give it a custom name in the name field (if you want), and hit OK. When you hit OK, the New Item dialog will disappear and a new page will be created and opened for you:

[ your newly created age appears! ]

Your newly created page will even have a spot for it in your Projects pane. Everybody is special!

Navigating Between Pages
While you can create and design pages, users will never see anything but the startup page if you do not provide any navigation functionality between them. Let’s look at several ways of providing navigation between pages with each approach bringing something new to the table.

Navigate to Menu
The easiest way to navigate between pages is to use Expression Blend and the Navigate to functionality. On a page, find a button or any element that you wish to have a user tap/click to navigate between pages. Right click on that element, and from the menu that appears, click on the Navigate to menu:

[ right click on any arboard element to see the Navigate To menu ]

You will see a fly-out menu listing all of the pages that you can select to navigate to. Once you select a page, this menu will disappear and your Properties Inspector will change to display more properties to help with the navigation. If you run your application, tapping/clicking on the element will navigate you to the page you selected.

If you are curious as to how this works, we apply a NavigateToPage behavior behind-the-scenes that provides you with the navigation functionality. When you select a page via the menu, I vaguely mentioned that the Properties Inspector changes. It changes to display properties of the NavigateToPage behavior:

[ what actually gets added is a behavior ]

Going into detail about this behavior goes beyond the charter for this tutorial. All you need to know is that when you select a page from the Navigate to menu, everything is handled behind the scenes to make it work.

Writing Some Code
There will be times where you probably don’t want to specify the navigation in XAML. You may have some conditional logic where the page you navigate to depends on something else, or you may be working with the Application Bar where you cannot apply the NavigateToPage behavior via the right-click menu that you saw earlier.

The code for navigating between pages is pretty straightforward. Make sure whatever element will be handling the navigation has an event and event handler associated with it. In the event handler, the code will look as follows:

this.NavigationService.Navigate(new Uri("/MyPage.xaml", UriKind.RelativeOrAbsolute));

Just replace “MyPage.xaml” with the path to the XAML page you wish to load. Notice that there is a slash before the path. The slash is important – do not ignore it when you are typing in your own path.

Conclusion
Navigating between pages is quite simple - especially in the very basic scenarios this tutorial covered. For most cases, the simple approaches defined here will suffice. Once you get into passing data between pages, things get a little bit interesting. A future tutorial will cover some of the more advanced navigation techniques you can use.


Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

add your comment

  

Read-only Archive of Old comments

Below is an archive of old comments made on this article. To create new comments click on the Start or Continue Discussion text above to add to this list.

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.