How to Perform Page Navigation in Your Windows Phone Application

Introduction

In a multi-page application, it is important to wire up the pages so that you can easily navigate from one page to another. If you have developed Silverlight applications previously, you will notice that the navigation mechanism is very similar to Silverlight applications. If you haven't developed Silverlight or Windows Phone applications previously, this article will walk you through how to perform page navigation in your Windows Phone application.

To get started, let us get hands-on and fire up Visual Studio.

Hands-On

Create a new Silverlight For Windows Phone application in Visual Studio called "WinPhone7NavigationDemo".

Create a couple of pages, called "SecondPage" and "ThirdPage". To add a new page in Visual Studio, right-click on the project and select Add new Item.

Add a new page in Visual Studio
Figure 1: Add a new page in Visual Studio

Select Windows Phone Portrait Page and type in the name.

Now on MainPage, add a couple of buttons and a TextBox.

Visual Studio Main Page: Add buttons and textbox
Figure 2: Visual Studio Main Page: Add buttons and textbox

On the SecondPage, add a couple of buttons

Visual Studio Second Page:B  Add a couple of buttons
Figure 3: Visual Studio Second Page:B Add a couple of buttons

On the ThirdPage, add a TextBlock (with wrapping property set to true) and a button.

On the Click Event for the "Simple Navigation" button on MainPage, add the following code.

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/SecondPage.xaml"UriKind.RelativeOrAbsolute)); 
}

Notice the use of NavigationService.Navigate function to move the application context from MainPage to the Second Page. Also notice that the argument passed to the function includes the destination, as well as whether the URL is relative or absolute.

On the SecondPage, add an event for the click event on the "Return to Main Page" button.

private void button1_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.GoBack();
 
        }

Here, we use the GoBack() function to go back to the previous page. This is similar to the "Back button" on Windows Phone devices.

To pass parameters between pages, you will need to pass in the argument with the "?msg=" appended to the destination.

For example, let us write an event on the second button on MainPage, which takes in the argument from the textbox.

private void button2_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/ThirdPage.xaml?msg=" + textBox1.Text, UriKind.Relative));
 
        }

Notice that we are now passing in additional arguments to the destination but using the same API.

On the ThirdPage, let us code up to capture this additional argument.

Add an override for the OnNavigatedTo event In ThirdPage.xaml.cs

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            string msg = ""; 

            if (NavigationContext.QueryString.TryGetValue("msg", out msg))
            {
                textBlock1.Text = "The page was loaded with the following argument(s) passed to it." + msg;
             }            else
                textBlock1.Text = "The page was loaded without any arguments passed to it.";
         }

What we have done here is overrode the OnNavigatedTo event. In the override, we check if the QueryString on the NavigationContext had a valid value for "msg". If it did, we display the argument passed, if not ,we display that the page was loaded without any arguments passed.

Now, press F5 to start debugging your application.

Notice that when you click the "Simple Navigation" button on MainPage, you are transported to the Second Page. Here, you can click "GO back to Main Page" and you will come back to the Main Page.

Now, let us try passing arguments to the destination Page.

On MainPage, type some text in the textbox and click "Navigate passing arguments". You will notice that the application traverses to the ThirdPage and a textblock is displayed stating that an argument was passed to the page.

If you have trouble following the walk-through, you can download the attached code snippets and debug the application in Visual Studio.

Summary

In this article, we learned how to perform simple navigation as well as passing arguments while navigating. I hope you have found this information useful while designing your Windows Phone applications.

About the author

Vipul Patel is a Software Engineer currently working at Microsoft Corporation. He is currently working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com



About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today make data protection a must-have, as we live in a data driven society. The digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join eVault Chief Technology …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds