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: September 17, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Another day, another end-of-support deadline. You've heard enough about the hazards of not migrating to Windows Server 2008 or 2012. What you may not know is that there's plenty in it for you and your business, like increased automation and performance, time-saving technical features, and a lower total cost of ownership. Check out this upcoming eSeminar and join Rich Holmes, Pomeroy's practice director of virtualization, as he discusses the …

  • This ESG study by Mark Peters evaluated a common industry-standard disk VTl deduplication system (with 15:1 reduction ratio) versus a tape library with LTO-5, drives with full nightly backups, over a five-year period.  The scenarios included replicated systems and offsite tape vaults.  In all circumstances, the TCO for VTL with deduplication ranged from about 2 to 4 times more expensive than the LTO-5 tape library TCO. The paper shares recent ESG research and lots more. 

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds