Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to apply Navigation Service with Windows Phone

This tutorial will help the developers in understanding on how to apply the navigation service in Windows Phone devices.

Introduction:

With the help of this tutorial, we will be exploring the means to navigating between the pages which is made possible similar to what is done in Silverlight and WPF making use of the Navigation Service. Here we will be building a relatively simple Windows Phone 7 application in order to show the way we can direct to a particular page, verify if we are able to traverse back/forward and perform the desired actions.

Creating the application

A new Windows Phone 7 project needs to be created as displayed below:

Creating the new WP7 project

Figure 1: Creating the new WP7 project

The next step would be to incorporate the following XAML code to MainPage.xaml to the main Grid.

Listing 1: Incorporating the following XAML on 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>

The button will in fact be deployed to redirect the user to go to another page in the application. We will now code the Click event in the code-behind.

Listing 2: Coding the click event

private void btn1_Click(object sender, RoutedEventArgs e)
{
         NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

Here we can see the earlier mentioned NavigationService already in action and as can be seen we are making use of Navigate() method that is considered to be base of the class. The function in fact takes a UriKind.Relative only and must be clearly specified and navigates the application to it. Here we will be going to Page1.xaml which will now be added.

  • Right click on the project
  • Go to Add ->New Item
  • Add a new Windows Phone Portrait Page as displayed below.
Adding a new Windows Phone Portrait Page

Figure 2: Adding a new Windows Phone Portrait Page

This is it and the application can be run as it is now. But there is lot more to come and we will extend our application to include back/forward buttons in our UI. For the purpose of our tutorial, we will be taking a one step back from utilizing the best practices. We all are aware of the fact that each and every Windows Phone 7 device has a physical back button present in it, hence it is recommended not to add one into your UI.

Expanding the application

The steps to expand the application are:

  • Open up Page1.xaml
  • Add the following to the XAML, within the ContentPanel Grid.
Listing 3: Adding 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>

Points to note:

  • This looks very similar to the code we added to the MainPage.
  • The only exception is with the addition of a back and forward button which are both disabled.
  • Why are they disabled? This is for the reason that it informs the user that they can't do that interaction and this will be tackled enabling them in the code-behind.

  • Goto the code-behind
  • Add the following two overloaded methods.

Listing 4: Adding the 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);
}

The two methods that are called when the page is navigated to and from, respectively:

  • In OnNavigatedTo, we're looking at two properties of the NavigationService: CanGoBack and CanGoForward. These are nothing but the Boolean values that will determine if the service can navigate back and forward, respectively.
  • In OnNaviagtedFrom, here we are disabling the back/forward buttons.

We will now implement the Click events for those buttons by adding the following code:

Listing 5: Implementing click events

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");
}

Wondering why GoForward() is commented out? If you run the application with the line uncommented, it will throw an error with an InvalidOperationException as can be seen below.

InvalidOperationException

Figure 3: InvalidOperationException

But why is the debugger reporting us something else when we have already verified that CanGoForward was true? We can conclude here that this is been tracked internally by the service for the reason that it modifies the CanGoForward property, despite not letting us access it.

GoBack() does work and when the application is executed or implemented far, it can be seen that, on navigating to the Page1, it will permit you to access the back button and finally return to the main page. Talking about the other method in NavigationService by the name of RemoveBackEntry(), it permits the user to remove the most recent page from the BackStack. BackStack is nothing but a collection of previously visited pages in your application. The example of the same includes the situation when you have to present the user with a login screen. It shouldn’t allow them to be able to back up to it for the reason that the information is already collected by you.

Conclusion

With the help of this article we tried to have a glimpse on the NavigationService class in Windows Phone 7. We came up with an application that demonstrated the major and significant attributes involved in it and also encountered one of the prevailing limitations.

I hope you liked the article, see you next time.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login