What’s interesting about the development platform for Windows Phone is that it is based on Silverlight, which, as most of us are aware, was first and foremost a web technology. As such Silverlight supports a navigation model that maps well to the way browsers work with the ability to navigate forward to new pages and back to previous pages. In this post you’ll learn how to carry out navigation tasks within your Windows Phone application.
When you create a new application in Visual Studio or Expression Blend your project will contain a number of files which define a basic Windows Phone application, see Figure 1. There are two XAML files which include layout information, App.xaml for application wide resources and MainPage.xaml which is defines the first page within the application.
Figure 1
The other files you can see are ApplicationIcon.png, the icon that appears next to the application name in the applications list, Background.png, the default start tile background and SplashScreenImage.jpg, the splash screen that appears when the application starts. With the exception of the splash screen image (which must be called SplashScreenImage.jpg) the other files can be configured via the project properties dialog, see Figure 2, accessible by double-clicking the Properties node in Solution Explorer.
Figure 2
Unfortunately if you want to rename or change the initial page of the application you have to manually edit the WMAppManifest.xml file. This file is found by expanding out the Properties node in the Solution Explorer window. Most of this file you can ignore but the part you’ll need to modify is the DefaultTask element:
Tasks
DefaultTask Name ="_default" NavigationPage="MainPage.xaml"/
/Tasks
If you wish to change the startup page for the application, change the NavigationPage attribute for the DefaultTask. For example, the following specifies SecondPage.xaml as the startup page:
DefaultTask Name ="_default" NavigationPage="SecondPage.xaml"/
Alternatively you may want to place your pages in one or more sub folders. The following has the MainPage.xaml in a sub folder called “Pages”.
DefaultTask Name ="_default" NavigationPage="/Pages/MainPage.xaml"/
Once the application has started up, you’ll want the user to be able to navigate to the next page within the application. You do this by calling the Navigate method either directly on the frame of the application, or via the reference to the NavigationService that can be found within the context of the current page. Ok, that probably sounds all confusing if you’re not familiar with the Silverlight navigation model. The model is actually relatively simple: A Windows Phone application hosts an instance of the PhoneApplicationFrame class as its root visual. Think of this as the frame of the application into which everything else is rendered. In most cases the frame itself doesn’t have any visual characteristics but in some cases you may wish to override the default frame behaviour in order to define page transitions or other effects across the application.
The frame is responsible for displaying the first page (a class that inherits from PhoneApplicationPage) of the application, and navigating to subsequent pages. The frame contains an instance of the NavigationService class which handles the navigation between pages. Regardless of how you instigate a navigation within your Windows Phone application it will be this NavigationService that handles the transition from one page to the next. However, it is recommended that you either call the Navigate method on the frame, or you call the Navigate method on the NavigationService within the confines of the current page, as in the following code examples:
Navigating via the Frame
var frame = Application.Current.RootVisual as PhoneApplicationFrame;
frame.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
Navigating within a Page
this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
Once you’ve navigated forward, at some point in the future the user is likely to want to go back within the application. By default the hardware Back button on the device will navigate back through the pages of the application. Once at the first page of the application, pressing the Back button again will result in the application being terminated, revealing the previous application. These are the two dimensions of the Windows Phone “Back Stack”. There is a back stack of applications that the user has launched; there is a back stack within each application of pages the user has navigated to.
Note: Whilst the back stack within an application is only limited by the available memory of the device, there is a limit of 5 applications that can exist within the application back stack. When the sixth application is opened, the first application is permanently removed from the back stack.
In some cases you may want to intercept when the user presses the back button. For example if you have displayed a pop-up window to ask the user a question, you can intercept the back button in order to close the pop-up. The following code (written in the code behind file for the page, e.g. MainPage.xaml.cs) detects if the popup control is open. If it is, the back operation is cancelled and the popup is closed.
protected override void OnBackKeyPress (CancelEventArgs e){
base.OnBackKeyPress(e);
if (this.ProceedPopup.IsOpen){
this.ProceedPopup.IsOpen = false;
e.Cancel = true;
}
}
Alternatively, there are some cases where you will want to force the user back to the previous page. In this case you can simply call the GoBack method on the NavigationService instance (e.g. this.NavigationService.GoBack() within the page code behind file). One important thing to note is that you can’t close the first page of the application. What this means is that if the user is currently on the first page of the application, attempting to call the GoBack method will incur an exception. To avoid raising an exception, you should always query the CanGoBack property before calling the GoBack method. If you look at the available methods on the NavigationService you will also see a GoForward method and CanGoForward property. CanGoForward will always return false and the GoForward method will raise an exception. This is because once a page has been closed, by going back to the previous page, that page is no longer available, preventing forward navigation to the existing page. To navigate to a new instance of the page, use the Navigate method.
In this post you’ve seen a quick overview of the navigation system within a Windows Phone 7 application. It’s important to understand the concept of the back stack and how it will affect how you design the structure of your application.
