Windows Phone : Page Navigation

Page navigation is an important aspect which is required for developing quality app because you just can't build a single page app, you just need to navigate and this post will help you in navigating to pages in different styles. First of all we should learn the hierarchy where the page resides.

Frame and Page Navigation

Frame is the top most container, if you have ever noticed in the App.xaml.cs at the time of bootstrapping of your app the first object your application creates is the phone frame object, Frame contains all the pages and other controls of the application and we don't program the frame its just present there by default. Then the page covers the whole frame which has the contents and other UI controls which are used in the application.

XAML apps on Windows Phone uses a page based navigation model which is similar to web page model and each page is identified by a URI. Since it is a web based model it has events like NagivatedTo, NavigateBack etc and hence work easily and each page is considered and rendered when NavigatedTo event is fired.

Simple Forward Page Navigation

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

This will take you to the SecondPage.xaml, the navigate function takes two parameters first one is the URI and the next one is the UriKind, UriKind is of three types :

1. Absolute : It means a absolute http url on internet.
2. Relative : It means it is relative to the root of the application (preferably used within the app navigation) .
3. AbsoluteOrRelative : It covers all the basis of both Absolute and Relative.

Simple Backward Page Navigation

 NavigationService.GoBack();

It is as simple as it seems in the code, yeah it's a built in behavior and no coding is required for it. WP app creates a history and navigates through those pages in backward fashion and when the above method is called on the MainPage of the app then the app exits.  The hardware back key present on the phone will also do the same work as the above code. But sometimes we need to override the hardware back key action and perform action as per our choice and we will see it in next section.

Overriding Back Key

Sometimes there is a scenario that we have a popup or other control overlaying the main screen and the user wants to close it and go back to main screen and presses the back button but the built in behavior only has navigation between pages and hence it will not close the popup rather will take you to the previous page and hence we need to override the way the back key behaves.

XAML

<phone:PhoneApplicationPage
 x:Class="MyApp.MainPage"
...
 shell:SystemTray.IsVisible="True"
 BackKeyPress="MyBackKeyPress"

C#

private void MyBackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
 {
 e.Cancel = true; //tell system you have handled it
//you code here
 }

The above code is very easy to understand, if we set the Cancel property of args to true it tells the system you need not to worry yes I have handled it, and below it you can start writing your code about what you want your back button to do. 

Passing Data Between Pages

You can pass string data between pages using query string, query strings are passed in a similar fashion as in web based model.

NavigationService.Navigate(new Uri(string.Format("/Selection.xaml?id={0}", 1), UriKind.Relative));

on destination page

private void PhoneApplicationPage_Loaded_1(System.Windows.Navigation.NavigationEventArgs e)
 {
string id;

 if(NavigationContext.QueryString.TryGetValue("id", out id))
 {
 textBlock1.Text = id;
 }
}

On destination page we can get the parameters passed by using the NavigationContext and TryGetValue function to check whether this navigation holds the value for a particular key or not.

Passing Objects Between Pages

Often you will realize the need of passing the object between pages as when a list item is selected and the page is navigated to it's detail page then the object is need to be passed. One thing you can do is store your data in the App class and make it global to whole application or you can pass the ID of the selected item as the query string.

NavigationService.Navigate(new Uri("Selection.xaml?selectedItem=" +

 (MyList.SelectedItem as MyViewModel).ID,

 UriKind.Relative);

And this can be handled at the destination page.

That's all about page navigation, stay tuned for more on windows phone.