Understanding Frame and Page Navigation on the Windows Phone 7 platform

Introduction

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()
        {
            InitializeComponent();
        }
    }

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.

NavigationService.GoBack();

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.

//Mainpage.xaml.cs
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.

//ShoppingCart.xaml.cs
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string argument = "";
if (NavigationContext.QueryString. TryGetValue("msg", out argument))
{
	textArgument.Text = argument;
}
}

Summary

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
[email protected]

More by Author

Must Read