This is going to be a short post. If you search the interwebs for information on navigation in WP7 you will find plenty of information. I’m adding to that information mainly for my own good. Hopefully you will get some use out of it as well.
The first point to make here is that navigating in WP7 uses the System.Windows.Navigation API. This is not a new API. I believe it was introduced with Silverlight 3. If you are already comfortable using this API then you are all set. If you are like me and haven’t worked with a lot of Silverlight then it’s new.
Navigation is simply the act of going from one xaml page to another. I’m a web developer and this is very much the same as moving from one html page to another. In fact if you are comfortable with how navigation works in the web world, you will be comfortable here. In order to navigate from one xaml page to another, all you need to do is call the Navigate method off of the NavigationService class with the URI of the page you want to go to. Here’s the code:
private void BtnNextPageClick(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/Page3.xaml", UriKind.Relative));
}
That’s the meat of navigation. As I said, this is going to be a short post.
Ok, well, I guess there are a few other items to cover. Let’s cover the rest in a Q&A style:
How do you go back to the previous page?
Good question, I’m glad you asked. All Windows Phone 7 devices will have a hardware back button. If the user clicks it, they go to the previous page. If there isn’t a previous page, your app closes and it goes to whatever was running before your app launched. Some of you may be tempted to add a button to your screen to give your users another way to go back. I honestly can see no good reason to do this. I remember when some web pages would add back buttons to them and it’s just pointless. It serves to confuse the user. Let them use the back button on the device. Any time they ever want to go back, they know where to go.
How do you pass data from one page to another?
Oh, another great question. As I mentioned earlier, if you are comfortable with navigation on the web, you’ll be comfortable here. To pass data you use a query string. A simple name/value pair string. It starts with a “?” and each value is separated by an “&”. Here’s an example:
private void BtnNextPageClick(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/Page2.xaml?Message=Main Page Says Hi!", UriKind.Relative));
}
In this call to Navigate I am passing in a property called “Message” that has a value of “Main Page Says Hi”.
Hmm, that’s cool, but how do you consume that data?
Boy, you guys are on a roll with the great questions. Let me start by showing you a potential gotcha. You may be tempted to use Loaded event off of the page to read in the value from the query string and then consume it. Don’t do this. The Loaded event isn’t guaranteed to run every time your page shows on the screen. It only runs when your page is loaded, and it could already be loaded. Instead, override the OnNavigatedTo method. Reading the actual value is pretty simple. The QueryString dictionary is part of the NavigationContext class. To read it you should use the TryGetValue method off of the QueryString dictionary. The code looks like this:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var message = string.Empty;
if (NavigationContext.QueryString.TryGetValue("Message", out message))
{
MessageBox.Show(message);
}
}
So what about passing complex data types? What if I want to pass a person?
Well, I’m open to other ideas here, but I will give my opinion. Don’t do it. Each page or view should only know about the data that it needs to render. When navigating to a new page, it’s because you want to see different data. That means the new page should only care about the data it needs which will be different then the page you are navigating from. Normally I pass ID’s around. As an example,let’s say I want to have a page that displays summary information about a player on the Detroit Red Wings. I then want to be able to navigate to a page that shows me the history of teams the player has played for. I would create a hyperlink or button on the summary page to navigate to the summary page. I would pass along with that the ID of the player. On the summary page I would lookup the history information only for that player and display it. This question could turn into a much larger topic on Model-View-ViewModel and such so I will leave it at that. If you are interested in me covering that topic at some point, leave me a comment.
Thanks for all the great questions and have a great day!