Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The final part of our examination of the Windows Phone Databound template, we're going to look at how the master-detail pattern is implemented using Windows Phone pages. Come back to our code again. We looked at this briefly before. The key is to look at the MainListBox_SelectionChanged event handler. When the user taps an item in the list box, the SelectionChanged event is fired, this method gets called, and we First of all, make sure that the selected index has some value.
Sometimes this event gets fired on un-selections, in other words, you select something, and then you do something else and the event will get fired again, but there won't actually be an item selected. So you put a guard here to make sure that that's the case because you don't want to navigate to your detail page if there is no actual selection. The way the master and detail is set up is that the detail page is basically capable of displaying any one of those ItemViewModel data objects. So what we do is we use the page navigation service to say we want to navigate to the details page, and because Silverlight has a history from a web environment, it uses URIs and query parameters similar to the way you would if you were doing web pages.
So in this particular case, we create a query item of the name selectedItem, and we pass it the SelectedIndex from the MainListBox. When we get to the detail page, you'll see that the detail page will take this index, go back to the MainViewModel, and extract the individual item that we want. Finally, when the user taps on the screen to select an item, it will highlight in whatever the current theme color is for the phone, but you want the highlight to turn off so that when the user comes back to the page, there's no item selected.
So in order to do that, we set the SelectedIndex of the MainListBox equal to -1. So this is how we start. Let's go to the detail page and see what happens when we get there. Here on the DetailPage, we'll see the main constructor, and we'll see a common method that you'll use when you have multi- page applications which require parameters. In this case, you use the OnNavigatedTo method. So we start out by saying let's figure out what our selectedIndex is then we go to the NavigationContext which is a class associated with this page, we retrieve the QueryString, and we use TryGetValue to see if we can get a query parameter called selectedItem.
The reason we do that is because if someone writes code navigates to this page and they don't put the query string on, we might want to do something else. Notice that the result of TryGetValue is always a string, so if we do get the value for selectedItem, the first thing we have to do is to parse it back into an integer so now we have an index, and then we set the data context for this details page equal to the App.ViewModel.Items of that specific index. And to see how it actually gets displayed, let's take a look at the XAML, and we see two things.
One, we haven't yet changed the name of our application on this page, that's something you have to do on every single page. It's not something that you can change once and have it cascade all the way through. So we're going to come up here and say again, Edit > Advanced > Format Document, change the text here to SONNETS. You'll notice that we're not going to change the name of the page because we have a different thing. We have a TextBlock which has a ListTitle, and that's going to be replaced by the LineOne of our ItemViewModel instance.
So in this case, it will be the number of the sonnet. That's all we have to look at for how we implemented the master-detail pages so far. When the user is done, they click the Back button and go back to the list of the sonnets, and there's no selection in the list box and they can try again. So let's move on in the next movie to actually loading our sonnets in and getting it to display instead of the sample data.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92746 Viewers
82 Video lessons · 104201 Viewers
71 Video lessons · 75838 Viewers
56 Video lessons · 107209 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.