Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Multi-screen applications present a challenge for the designer. What is the best way to move the user from screen to screen? For better or worse, the browser has changed the way users think about applications. The back button is ingrained in the global mindset. Since Silverlight apps run in the browser, you might consider implementing a back button navigation scheme to meet user expectations. One of the problems with rich application frameworks like Flash or Silverlight is that even though they live in a web page, they are not HTML pages. The downside of this fact is if you create a Silverlight application with many pages, there isn't an easy way to remember your location and the URL.
This makes it hard to link the content within your application. To solve this problem, use this Silverlight navigation framework. It provides a rich set of navigation tools like forward/back navigation, navigation history, deep linking, and URI mapping. There are two key parts of the navigation framework: the frame and the page. The Frame class is very similar to a border or other content control. You load your content into the frame and it provides a rich set of navigation services to your application and collaborates with the browser back/forward buttons.
It also allows you to use a URL to load any page in your app. This is sometimes called deep linking. Since, the deep link is stored in the URL, the user can bookmark their location within the Silverlight app. You can load any content into a frame, but the navigation framework works best if you use the navigation Page class. Because the page is part of the navigation system, it provides functions for requesting forward and back movement, and provides access to the browser history. In addition, it can accept query string parameters from the URL, which it can then use within the page code behind. The navigation framework has other helpful classes, including a Mapping class, which makes it easier to map a simple link to a more complex navigation scheme.
Then there's the NavigationCache, which gives you options for how page state is persisted in your application. For this demonstration, I will use Visual Studio and a project called UsingNavigationFramework. I'd like to start by showing you my user controls and pages I'm going to be loading dynamically into the application. I have a folder called UserControls, which contains a number of standard Silverlight user controls. Here's an example of the BlueUserControl. It's a simple user control with a title and two radio buttons. There're also an error page and two other colored user controls: the Gold control and the PurpleUseControl.
In the Pages folder, I also have three pages. I have a GreenPage and a ForwardBackPage and a ShowQueryStringPage. I'm going to load those into a frame that lives on MainPage.xaml. Here's the frame. It's on the right side of the screen. On the left side of the screen, I have a Stackpanel with a number of hyperlink controls. I'm going to be clicking on the hyperlink and loading the content into the frame. The name of my frame is frame1. I'm going to start by showing you this first hyperlink. This Hyperlinkbutton has a click event procedure, and in my code behind--press F7 to look at my code behind-- when the user clicks on that hyperlink, I'm instantiating an instance of the user control and then assigning that to the content of the frame.
Notice I will not get any navigation benefits by doing this, but this just shows it's the standard content control. On the next hyperlink, instead of using a click event, I'm using the NavigateUri. So, notice here I'm using an internal navigation location, which is going to my BlueUserControl.xaml, the same one I'm loading with the Click button up here. And then the key part here is use the TargetName and then the name of the frame. If you don't provide this, it's going to attempt to load this in the browser window instead of internally, inside Silverlight.
Let's see what this looks like. I'll press F5 to run the application. I'm running inside a Companion ASP.NET web site. When I click on this first hyperlink, it loads the Blue UserControl. Now, the key thing here is it's loaded, but I'm not getting the navigation benefits. If you look at the upper left-hand corner of the browser, you'll notice that the back and the forward buttons are not lit. If I choose the second hyperlink, however, the user interface over here looks exactly the same, but now if you can look at the browser, I now have the back button. Now, if I click on the back button right now there's nothing in the navigation history to go back to, so I'm showing an error page.
Let me show you how I implemented that. I will return back to Visual Studio. On my frame, which is over here, I wrote this event procedure. On this NavigationFailed event, I'm going to run this code frame1_NavigationFailed. We'll look at the code behind. This is quite simple. I'm navigating to my error control page, and I am using the Navigate method to do that rather than storing the content. That's the correct way to get the navigation features. Now, the other thing I'm doing is I'm saying e.Handled=true.
Now, e of course is this parameter up here, which is the NavigationFailedEventArgs. And by setting this to true, it stops the error from percolating up to the standard error handler that Silverlight has in place. Back to my MainPage.xaml. We'll look at the next hyperlink. The next hyperlink loads the GoldUserControl, and the one after that loads a PurpleUserControl. So, that's exactly the same XAML as I did with the BlueUserControl here. On the next link below that, I am starting to work with pages, not user controls. Now, I get the benefit of the internal navigation features of the Page class.
Now if you look at a page, it doesn't look much different than a user control, except it has a navigation:Page at the top. But the way you draw your design in the designer or the way you write your XAML in the editor is exactly the same. The benefit is when you go to the code behind, I can then access the NavigationService or the NavigationContext or the NavigationCachemode. So, if I go here and I say NavigationService., I then have access to these members like GoBack and GoForward. All right! Let's run the application and see what it looks like. Press F5.
Here it's loading the Blue control, the Gold control, the Purple control. Now, I'm loading the Green page. Again, it doesn't look much different here. Now, I can click on the Back button and go back to my back stack and I get to the Error page. Since I mentioned that you could get programmatic access to the navigation services, this Forward/Back page demonstrates that. I'll click here. I am now at one page into the navigation history. I can click Back to go back to the navigation error page, or I can--let's load a Purple page in here and then we'll do Forward/Back page-- I can use this button to programmatically go back to the Purple UserControl.
Let me show you the code. It's over here in this ForwardBackPage. And then in the Code behind, I check with the NavigationService to see if it's possible for me to go back, and if I can, then I'll call the GoBack method. You can also use the QueryString parameter. I have this page called ShowQueryStringPage, which has this TextBlock on it, which I'm going to load programmatically from the query string. The name of this TextBlock is bungalowResult. I can you go look in my code behind for this page. You'll see that I have this function called OnNavigatedTo, which fires when the user navigates to this page.
I go to the NavigationContext, ask for the QueryString information, sees that it contains a bungalow string. If it does, then I pull the text out of it and put it in the bungalowResult text box; otherwise, I say Not Found. Let's run the application to check it out. I did not mention yet that Silverlight uses a special syntax when you navigate to a page. Notice the syntax up here. It's #/ and then my folder Pages and then the name of my XAML file. This navigation service in Silverlight uses the pound symbol for deep linking. It uses the substring after the pound symbol to determine what Silverlight page to create.
Now, I'll click on this one, Pass data to the QueryString. I use the standard question mark for the query string and then the name of the query parameter and then the value. You can see I've already typed this into my browser in a previous runthrough-- and that piece of information is stored in this text box. If I type in an unknown value here, nothing happens. The last thing I wanted to talk about was URI mapping. Let me show you one example of URI mapping. I'll return back to my code, go to my MainPage.xaml, scroll up to the top, and in the top of my XAML, I have instantiated in my resources section a UriMapper, and within that UriMapper, I've created these mappings.
Basically, what these do is I have a simple string that translates into the internal location of the file. So, for fun, I have this Banana URI and this Peach URI that go to my Silverlight pages. Now, I need to enable this. To do that, I have to click on my frame and go down here and say UriMapper=. Now that's a StaticResource I declared up there called mapper. That's all I need to do. Run the application again, look at a page, come up here and say I want to use that new mapping, which was banana, and it goes to the correct page.
Overall, I'd say that the navigation framework is well worth your time investigating.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99216 Viewers
56 Video lessons · 112490 Viewers
71 Video lessons · 81293 Viewers
131 Video lessons · 39036 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.