Starting Windows Phone Development: Lesson 3 of n – Navigation between Pages and passing Parameters

Before we move on, you need to have a basic understanding of event handling. I went through this in Lesson 1. Please finish it first before moving on.

You can always find the lesson source code attached at the end of the blog post.

As we explained earlier in Lesson 1, Windows Phone applications are made up of XAML pages. So the way you would think about it is the same way you think about a website. Every application will have some sort of a navigation logic. So for example if we have a news application, we would have a main page were the application lands when it launches displaying news categories. You then would need to select a category and then it will display the list of news inside that category and if you tap on a news item, it will display the news details. I guess by now you get the drift Winking smile 

image

We will talk in details later during the data binding lesson about templates and capturing selected list items, but for now we will need to navigate between the pages and pass parameters. So lets focus on that. You have my word, by the end of the next lesson where we talk about data binding you will be able to deliver enterprise level applications. Be cool Hot smile

So, How does it look like?

Lets have 2 pages, MainPage labeled as Page1 will accept a text string from you and pass it to Page 2 to be displayed.

image

As you guessed, again it’s a StackPanel Smile, TextBlock for our user message, a TextBox to capture the user string, and a button to navigate to Page 2 passing the string.

image

Now for Page 2:

image

Good guess again, one StackPanel with 2 TextBlocks, one to display our message to the user and another to display the string entered in page 1. I added a button so you tap it will take you back Page 1.

image

Passing Query String Parameter(s)

On our first page, double click the PassParameter button to create an event handler. To navigate to a new page we use the NavigationService.Navigate function passing to it a URI. Check out below where I simply navigate to page 2:

image

and then if you want to add the Query String parameters we can do it add hoc like this:

image

specifying a parameter called UserString and pushing into it the user input from the TextBox. I am a web developer and when I see this you can see me smile Smile It’s the same process exactly but instead you call Response.Redirect function instead.

For me I prefer to use the string.Format function instead  because I feel easy around it in adding a good number of parameters and just using curly brackets with index numbers without worrying about string contacts.

So eventually my button code is simple, I just call for Page2.xaml passing the contents of the TextBox in a parameter called UserString.

image

Retrieving Query String Parameter(s)

Logic should be simple for Page2. on page load we need to capture the Query String parameter and display its content inside the TextBox. To access the parameters we access the NavigationContext.

image

and finally we set the last event handler to take us back on the Go Back button. For that we used the NavigationService.GoBack function.

image

Let’s test it out..!

Run the emulator using the F5 key and please be patient until Visual Studio manages to compile, build, and deploy our application. Input some text into the text box and then hit on Pass Parameter.

image

and here you go with Page 2 Smile

image

and when I tapped Go  Back, it actually took me back again to the first page. Notice how it preserved the string you entered before navigating away from it. But this is a discussion for another lesson.

image

So to warp it up we use NavigationService.Navigate to navigate between pages. The navigate URI can accept parameters which can be shared with target pages. Finally, we use the NavigationContext to access the passed Query String parameters.

I hoped you enjoyed this lesson Smile

Lesson3.zip