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: May 6, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT While you likely have very good reasons for remaining on WinXP after end of support -- an estimated 20-30% of worldwide devices still are -- the bottom line is your security risk is now significant. In the absence of security patches, attackers will certainly turn their attention to this new opportunity. Join Lumension Vice President Paul Zimski in this one-hour webcast to discuss risk and, more importantly, 5 pragmatic risk mitigation techniques …

  • As businesses have grown in size and global reach, emerging technologies such as cloud computing and virtualization have appeared to help companies effectively connect and grow. However, the networking strategies and infrastructures that keep organizations connected have often remained in the past. Now, new strategies that leverage global connectivity and locations exist to provide a more flexible and cost-effective alternative to traditional networking systems. This Aberdeen report analyzes how top performing …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds