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

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read