Navigating and Passing Data Between XAML Pages with Windows Phone

Up to this point I’ve only used a single XAML page for my examples. Most applications though do have more than one page. So, it’s time to take a look at how to navigate through more than one XAML pages in a Silverlight Phone application.

First of all, pages in a Silverlight application are loaded similar to a html page in a web browser. Each website has its own URL. To navigate for example from this blog entry to the homepage, there is a so called Anchor Tag needed. Silverlight applications are very similar, except that instead of an anchor tag I use a hyperlink button control, and then I set its NavigateUri property to the URI of the XAML page I want to load into that parent frame that is top most in my application. Sounds easy enough.

URL is a Unified Resource Locator, URI is a Unified Resource Identifier. Both are ways of finding and locating resources. One is specific to the internet, the other one is more generalized and can be used for internet, local, within a local network, on a phone and so on.

So, let’s get started. I’ve created a new project. Right click on my project lets me add a new folder which I call “Views”:

Then I am going to add a new page to that folder:

I am going to make sure that I select Windows Phone Portrait Page in the opening dialogue box:

Now I have two XAML pages in my project:

Back on MainPage.xaml I am going to drag and drop a HyperlinkButton control onto my designer surface. Now I need to modify the NavigateUri property. I start with the name of the project followed by a semicolon and then the component. I have my new page nicely in a subfolder, so the name of that folder is added next:

/NavigatingBetweenPages;component/Views/Page1.xaml

Let’s run that:

When I click the Hyperlink Button I navigated from my Main Page to Page1. So far, so good. Now I want to pass some information between those two pages. So I am going to construct a query in my NavigateUri, I am also going to add a Querystring that will embed some additional information in that URI. And then I am going to retrieve that extra information on Page1.xaml and display it on the screen. In the World Wide Web, a query string is the part of a URL that contains data to be passed to web applications. Similarly, in a phone application a query string is the part of a URI that contains data that can be passed from page to page.

Let’s move on in my little example project. First I am adding the querystring to the NavigateUri property:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=1

Then I am adding another Hyperlink Button and set the NavigateUri property to:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=2

Now I am passing two different values, depending on which Hyperlink Button I choose to click.

Back on Page1,xaml I am going to add a textblock and clear out its text property. Then inside the PhoneApplicationPage of Page1 I am double clicking on the Loaded Event in the properties window to get to the code behind, in order to add some code:

    private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
    {
        textBlock1.Text = String.Format("Value: {0}",
            NavigationContext.QueryString["id"]);
    }

When I run it now, I get this:

I just wanted to display the value that I defined in the NavigateUri property before. Seems to work.

This example is not doing anything really exciting just yet, but I could use the same technique to do several interesting things. For example if I wanted to create a weather application and I wanted to allow the user to select a city and a zip code. I could pass those values from a XAML page, where the user actually selects the city and the zip code, and then on a second XAML page I could use some web service over WiFi or the phone’s network, and then on a third page retrieve those values and display them to the user.

There is only one problem with the code that I’ve been writing so far: If there is no querystring with the name of “id” passed in from the preceding page then my application is going to blow up. It is going to throw an exception and crash. So, I need to fix that problem.

And also, I am wondering, what about sending and retrieving two or more querystring named value pairs? How can I accomplish that in my code? Well, it is the same basic idea. I just need to separate the named value pairs on my MainPage.xaml’s Hyperlink Buttons.

So, I am going to add a third Hyperlink Button to my designer surface, and I am going to set the NavigateUri property to:

/NavigatingBetweenPages;component/Views/Page1.xaml?id=3&state=tx

Then I am going to add a second textblock to my Page1.xaml’s designer surface and clear its Text property. Next I am going to my Page1.xaml.cs and add the following code into the Loaded Event:

    string id = "";
     
    if (NavigationContext.QueryString.TryGetValue("id", out id))
    {
        textBlock1.Text = String.Format("Value: {0}", id);
    }
     
    string state = "";
     
    if (NavigationContext.QueryString.TryGetValue("state", out state))
    {
        textBlock2.Text = String.Format("State {0}", state);
    }

By adding this code I fixed both of my problems.

The earlier solutions left me with the possibility that there is no id defined which would have caused the application to crash. Now, with the TryGetValue method, it is simply trying to retrieve the id value and throw it out. If it can’t find that value it will skip that code block and leave that out. The same is true for the second part of the code. It will try to retrieve state as an output parameter. If it can get “state” then it will execute the second code block.

In other words, if I run this code, and click the first Hyperlink Button, it should only show the value in textblock 1, if I click the third one, it should show both values in both textblocks. Let’s see, if that is true:

Seems to work like it is supposed to.

To be continued…

Source: http://andreahaubner.blog.com/2011/03/19/navigating-and-passing-data-between-xaml-pages/