Using the NavigationService with Windows Phone 7

Introduction

In my last post, I talked about the different types of pages included in the Windows Phone 7 SDK (here).  This time, we are going to look at how to navigate between those pages.  This is done just like in Silverlight and WPF, using the NavigationService.  For this demo, we are going to be creating a simple WP7 application to show how we can: travel to a specific page, check if we can travel back/forward, and perform those actions.  You can find the finished project attached.

 

Creating the application

Make a new WP7 project, as shown below

Next, add the following XAML code to MainPage.xaml to the main Grid.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

         <StackPanel Orientation="Vertical">

                <Button x:Name="btn1" Content="Go to Page 1" Click="btn1_Click" />

         </StackPanel>

</Grid>

This button will be used to go to another page in our application. Now, let's code the Click event in the code-behind.

private void btn1_Click(object sender, RoutedEventArgs e)

{

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

}

Here we see the aforementioned NavigationService in action.  We are using the Navigate() method, the meat of the class.  This function takes a Uri (UriKind.Relative only, you must specify it) and navigates the application to it.  In this case, we're going Page1.xaml, let's add that now.

 

Right click on the project, goto Add -> New Item and add a new Windows Phone Portrait Page, as shown below.

That's it. If you run the application as it is now. But we're not done yet, let's extend our application to have back/forward buttons in our UI. (From here on, we're taking a step away from using best practices for the sake of example. Each WP7 based phone has a physical back button, so it is advised you don't add one into your UI.  You can read more about the Windows Phone 7 design guidelines here)

 

Expanding the application

Ok, let's open up Page1.xaml and add the following to the XAML, within the ContentPanel Grid.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

         <StackPanel Orientation="Vertical">

                  <Button x:Name="btnBack" Content="Back" Click="btnBack_Click" IsEnabled="False" />

                  <Button x:Name="btnMain" Content="Go to MainPage" Click="btnMain_Click" />

                  <Button x:Name="btnFor" Content="Forward" Click="btnFor_Click" IsEnabled="False" />

         </StackPanel>

</Grid>

This will look very similar to the code we added to the MainPage, except with the addition of a back and forward button, both disabled. They are disabled to tell the user that they can't do that interaction, we'll tackle enabling them in the code-behind.  Goto the code-behind and add the following two overloaded methods.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

         if (NavigationService.CanGoBack)

                 btnBack.IsEnabled = true;

         if (NavigationService.CanGoForward)

                 btnFor.IsEnabled = true;

         base.OnNavigatedTo(e);

}

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)

{

         btnBack.IsEnabled = false;

         btnFor.IsEnabled = true;

         base.OnNavigatedFrom(e);

}

These are two methods called when the page is navigated to and from, respectively.  In OnNavigatedTo, we're looking at two properties of the NaviagationService: CanGoBack and CanGoForward.  These are Boolean values to determine if the service can navigate back and forward, respectively.  In OnNaviagtedFrom, we're simply disabling the back/forward buttons.  Now, let's implement the Click events for those buttons.  Add the following code:

private void btnBack_Click(object sender, RoutedEventArgs e)

{

         NavigationService.GoBack();

}

private void btnFor_Click(object sender, RoutedEventArgs e)

{

         //NavigationService.GoForward();

         MessageBox.Show("Not supported in WP7");

}

Now, I bet you're wondering why GoForward() is commented out. You can go try to run the application with the line uncommented, but it will error with an InvalidOperationException, as shown below.

You will remember, however, that we checked that CanGoForward was true, so why is the debugger telling us something else?  While I do not know why Microsoft decided to remove this functionality from the WP7 version of the NavigationService, they have.  We can conclude though, that the service is internally keeping a track, since it changes the CanGoForward property, despite not letting us access it.  Hopefully this is fixed in a future version of the SDK (It's the same way in Mango, still).

 

GoBack() does work, and if you run the application thus far, you will see that when you navigate to Page1, it will let you click the back button, and return to the main page.  The only other method in NavigationService that is worth mentioning is RemoveBackEntry(), which allows you to remove the most recent page from the BackStack, a collection of previously visited pages in your application.  An example use of this is if you have to present the user with a login screen.  They shouldn't be able to back up to it, since you already collected their information. 

 

Conclusion

In this article, we looked at the NavigationService class in Windows Phone 7. We created an application that demonstrated the major features of it, and saw one of its current limitations.  I've attached that application (with a few minor changes) for you to mess around with.

 

As always, feedback is appreciated,

~Dan