Understanding Frame and Page Navigation on the Windows Phone 7 platform

by Vipul Vipul Patel

Application developers targeting the Windows Phone 7 platform need to develop a sound understanding of how navigation works on the Windows Phone 7 platform in order to be able to write great applications for the platform. This article describes the navigation model for Silverlight based applications for the Windows Phone platform.


Windows Phone application developers are aware that WP allows using both Silverlight and XNA for developing applications for the platform. The Silverlight-based WP page model might be familiar to many Silverlight developers (Check MSDN's Silverlight Navigation Overview if you need a refresher). However there are a few points which transcend when we talk of Windows Phone platform.

First, there is a dedicated "Back" hardware button on the Windows Phone 7 devices. Second, the form factor allows applications to be invoked out of turn (another application can be launched by clicking the Launch button and selecting an application) when you least expect it.

Elegant application developers are expected to handle such scenarios to ensure that their applications can fit naturally into the Windows Phone 7 navigation model and provide default transitions that mimic the Windows Phone 7 theme.

Windows Phone 7 applications are composed of a container element called PhoneApplicationFrame that can render PhoneApplicationPage.

When you create a default Windows Phone project, the default page has the following code, which illustrates this.

// In App.xaml.cs
public PhoneApplicationFrame RootFrame { get; private set; }

This indicates that the frame is the top most element in the navigation stack.

// In MainPage.xaml.cs
public partial class MainPage : PhoneApplicationPage
        // Constructor
        public MainPage()

The frame is the top most element in the navigation stack
Figure 1: The frame is the top most element in the navigation stack

Orientation changes

To tell your application that it has to support a different orientation, you need to set the SupportedOrientations property. You can specify the current orientation with the Orientation property. The orientation of how the page will be rendered is determined by how the device running the Windows Phone 7 application is oriented.

The splash screen is not considered a page since it is transient UI which does not persist and does not hold application state. The same analogy can be applied to the error dialogs and login pages. For transient UI screens, the default pop up invocation when the Back button is pressed should be overridden.

For a regular page, on "Back" button invocation, the application should either navigate to the previous page or exit.

How to navigate between pages

To navigate to a new page, you can call the NavigationService.Navigate API and pass in the desired page's relative URL.

NavigationService.Navigate(new Uri("/Pages/ShoppingCart.xaml", UriKind.Relative));

To go back to the previous page, you call the NavigationService.GoBack API.


Passing parameters across pages

To pass parameters across pages, your URI should contain the parameter as the message portion of the URI on the page from where you are navigating.

private void buttonNextPage_Click(object sender, RoutedEventArgs e)
NavigationService.Navigate(new Uri("/Pages/ShoppingCart.xaml?msg=" + arg1.Value, UriKind.Relative);

On the destination page, you write code to handle the passed argument.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
string argument = "";
if (NavigationContext.QueryString. TryGetValue("msg", out argument))
	textArgument.Text = argument;


In this article, we looked at how navigation works in Silverlight based Windows Phone 7 applications. I hope you have found this interesting.

About the Author

Vipul Patel is a Software Engineer currently working at Microsoft Corporation. He is currently working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

This article was originally published on Thursday Apr 14th 2011
Mobile Site | Full Site