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: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • IBM Worklight is a mobile application development platform that lets you extend your business to mobile devices. It is designed to provide an open, comprehensive platform to build, run and manage HTML5, hybrid and native mobile apps.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds