Passing Data Between Pages - Page 1
by kirupa |  20 August 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

In my earlier Simple Page Navigation tutorial, I described how you can easily navigate from one page to another in your Windows Phone application. By default, navigation between pages is a very atomic operation where no data or state is shared between pages.

In this tutorial, letís go a step further and actually look at how you can pass data between pages. The following video showcases an example of this:

Notice that as I select a James Bond actor on the first page, the selected value from that page is displayed on the second page. Beyond just learning how to pass data between pages, you will also learn how to be more like James Bond.

Getting Started
Make sure you have everything up and running to do Windows Phone development,
go ahead and download/open the following sample project:

The sample project contains two pages with some code already provided to save you some time. Donít worry, though. You will have to add the code for passing and reading data between pages yourself.

Plan of Attack
The game plan is as follows:

  1. We want to navigate from MainPage.xaml to Results.xaml when the Vote button is clicked. An event handler called TallyVoteAndNavigate has already been created and hooked up with the buttonís Click event.
  2. On MainPage.xaml, when you click the Vote button, we want to take the results from the poll and pass it on to the next page. The results from the poll are stored in the actorName variable that also has been provided for you.
  3. On the page you are navigating to (Results.xaml), we will add some code that reads the data passed in from MainPage.xaml. Once we have that information, weíll display it on a TextBlock control called textField.

In the next few sections, we will take the above game plan and get your application working.

Passing Data
The standard code for navigating between pages is:

this.NavigationService.Navigate(new Uri("/MyPage.xaml",UriKind.Relative));

If youíve read the Simple Page Navigation tutorial, this line of code should be familiar already. This is the code you would use for programmatically navigating between pages.

The URI in the example specifies what page to navigate to - for example, MyPage.xaml. To pass data to that page, you will use the Query String syntax to append your URI with the data you want to pass:

/MyPage.xaml?id=value&id1=value1...

The query string basically starts with a question mark and has a series of key/value pairs appended using an ampersand (&). The key is a unique identifier that you will use to identify the data you are passing, and the data you are passing will be stored in the value portion of the pair.

In our project, copy and paste the following code into the TallyVoteAndNavigate event handler:

private void TallyVoteAndNavigate(object sender, System.Windows.RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Results.xaml?actor=" + actorName, UriKind.Relative));
}

Our query string contains one key called actor, and the variable associated with that identifier is the value. When you are navigating between pages, that key value pair gets passed into the page you are loading. Speaking of the page that we are loading, let's look at that on the next page!

Onwards to the next page!

 1 | 2




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.