Over a million developers have joined DZone.

Navigation in Windows Phone 7 apps

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

In this lesson I am going to describe some ways of using Windows Phone 7 Frame and Page navigation. Also I will show how to use or even override Back button functionality.

frame page windows phone7

Additional

Basics

On top of navigation architecture is a PhoneApplicationFrame (root contrainer) that hosts pages(PhoneApplicationPage), application bar and system tray. For page navigation within a Frame you can use NavigationService class and it’s Navigate method that accepts Uri object as input parameter. Check image above.

Using NavigationService to navigate to another page

To navigate to another page within a Frame you can use the code bellow. Pay attention that Uri object has UriKind.Relative otherwise system will throw an exception. In following example, you will be redirected to “AnotherPage.xaml”.

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

Using root Frame to navigate to another page

To navigate to another page using Frame you can use the code bellow. That approach can be very useful in case you would like to navigate from App.xaml, because you cannot use NavigationService there directly. In following example, you will be redirected to “AnotherPage.xaml”.

PhoneApplicationFrame frame = Application.Current.RootVisual as PhoneApplicationFrame;
frame.Navigate(new Uri("/AnotherPage.xaml", UriKind.Relative));

Passing parameters while navigating

To pass parameters while navigating to another page you have to specify them in Uri path. You can pass parameters only in string format (same way it is done for most of websites) using ‘?’ character and ‘&’ as a separator. In following example I am passing two parameters to AnotherPage.xaml. Keep in mind that parameters stored in NavigationContext.

string parameter1Value = "test1";
string parameter2Value = "test2";
NavigationService.Navigate(
    new Uri(string.Format("/AnotherPage.xaml?myparameter1={0}&myparameter2={1}",
        parameter1Value, parameter2Value),
        UriKind.Relative));

Now we need to get those parameters on AnotherPage.xaml page. To do so you need to override the OnNavigatedTo method and get those parameters and their values from NavigationContext.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
 
    string myparameter1Value = null;
    string myparameter2Value = null;
 
    NavigationContext.QueryString.TryGetValue("myparameter1", out myparameter1Value);
    NavigationContext.QueryString.TryGetValue("myparameter2", out myparameter2Value);
}

Back button

Usually hardware button actions cannot be overwritten, especially when it comes to Start button, but Back button is an exception in that case. Back button event is called when you press on a Back hardware button (image bellow).

windowsphone7backbutton

You can override this event for every XAML page separately. Simply override the following method and cancel the event:

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
   e.Cancel = true;
}

Another way to call Back button functionality within your code is to use NavigationService instance and GoBack method:

NavigationService.GoBack();


Source: http://www.eugenedotnet.com/2010/09/w11-navigation-in-windows-phone-7-apps/

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}