Start learning with our library of video tutorials taught by experts. Get started

Silverlight 5 Essential Training

Using the Navigation Framework


From:

Silverlight 5 Essential Training

with Walt Ritscher

Video: Using the Navigation Framework

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.
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      53s
    2. Using the exercise files
      48s
  2. 35m 0s
    1. Overview of Silverlight
      3m 29s
    2. Setting up a developer computer
      2m 46s
    3. Installing the Silverlight Toolkit
      2m 21s
    4. Exploring the toolkit samples
      2m 35s
    5. Using Visual Studio 2010 to create a Silverlight project
      5m 10s
    6. Using Expression Blend to create a Silverlight project
      3m 13s
    7. Getting to know the Visual Studio interface
      8m 15s
    8. Working in the Expression Blend interface
      7m 11s
  3. 29m 46s
    1. Understanding the Visual Studio project structure
      3m 38s
    2. Creating a Silverlight page
      3m 17s
    3. Compiling your first application
      5m 0s
    4. Using other assemblies in an application
      5m 45s
    5. Deploying a Silverlight application
      3m 43s
    6. Understanding the startup process for an application
      3m 13s
    7. Understanding how users get Silverlight on their computers
      5m 10s
  4. 16m 59s
    1. Exploring the relationship between XAML and .NET
      3m 57s
    2. Using C#
      7m 16s
    3. Exploring the code-behind file
      5m 46s
  5. 43m 22s
    1. Working with XAML elements and Property attributes
      4m 56s
    2. Investigating XAML namespaces
      7m 31s
    3. Converting XAML properties with TypeConverters
      5m 1s
    4. Working with Property elements
      4m 24s
    5. Assigning runtime data with XAML markup extensions
      4m 21s
    6. Digging into the dependency property system
      6m 12s
    7. Creating a custom dependency property
      4m 42s
    8. Understanding attached properties
      6m 15s
  6. 9m 35s
    1. Debugging your code
      5m 17s
    2. Special Silverlight debugging techniques
      4m 18s
  7. 36m 0s
    1. Understanding layout
      4m 55s
    2. Using DockPanel and WrapPanel
      4m 2s
    3. Exploring sophisticated layouts with the Grid
      6m 40s
    4. Absolute positioning with the Canvas panel
      5m 20s
    5. Scrolling content with the ScrollViewer
      3m 28s
    6. Adjusting content alignment, margins, and sizing
      5m 6s
    7. Using the TabControl
      2m 17s
    8. Manipulating elements with transforms
      4m 12s
  8. 20m 32s
    1. Painting the user interface (UI) with SolidColorBrush
      6m 7s
    2. Getting colorful with gradient brushes
      3m 15s
    3. Decorating elements with ImageBrush
      4m 56s
    4. Creating effects with VideoBrush
      6m 14s
  9. 25m 42s
    1. Understanding routed events
      3m 12s
    2. Wiring up event handlers in Silverlight
      6m 4s
    3. Understanding event bubbling
      4m 39s
    4. Exploring mouse events
      7m 43s
    5. Exploring keyboard events
      4m 4s
  10. 32m 31s
    1. Displaying text on the screen
      3m 24s
    2. Gathering text input from the user
      5m 30s
    3. Showing complex text with RichTextBox
      6m 7s
    4. Understanding text overflow and text linking
      3m 14s
    5. Searching content with the AutoComplete type-ahead control
      6m 45s
    6. Using and embedding Silverlight fonts
      7m 31s
  11. 26m 47s
    1. Understanding content controls
      5m 7s
    2. Understanding button controls
      6m 16s
    3. Using the BusyIndicator
      4m 40s
    4. Showing tooltips
      4m 34s
    5. Changing content size with ViewBox
      1m 39s
    6. Exploring more controls
      4m 31s
  12. 55m 36s
    1. Connecting elements with binding
      9m 54s
    2. Using business data in a binding
      9m 21s
    3. Listing data with ItemsControls
      6m 39s
    4. Digging into the DataGrid
      8m 28s
    5. Using the DataForm
      3m 49s
    6. Storing data on the client
      7m 10s
    7. Debugging XAML bindings
      5m 41s
    8. Charting data
      4m 34s
  13. 24m 36s
    1. Creating an Out-of-Browser (OOB) application
      6m 16s
    2. Controlling aspects of an OOB application
      2m 49s
    3. Alerting the user with notification windows
      7m 13s
    4. Hosting HTML content in Silverlight applications
      8m 18s
  14. 30m 2s
    1. Exploring Silverlight trust levels
      3m 51s
    2. Creating an elevated trust application
      5m 57s
    3. Reaping the benefits of XAP signing
      6m 5s
    4. Making cross-domain calls
      5m 1s
    5. Getting started with COM Interop using the Speech API
      4m 21s
    6. Using COM Interop to interact with Microsoft Office
      4m 47s
  15. 16m 33s
    1. Showing child windows
      3m 48s
    2. Using a child window as a dialog window
      5m 7s
    3. Creating native windows
      2m 53s
    4. Maximizing a window with full screen mode
      4m 45s
  16. 13m 20s
    1. Dynamically loading UI content with user controls
      4m 46s
    2. Using the Navigation Framework
      8m 34s
  17. 9m 28s
    1. Using resource files
      3m 53s
    2. Using images in an application
      5m 35s
  18. 16m 32s
    1. Playing audio
      4m 27s
    2. Playing sound effects
      5m 4s
    3. Viewing video content with MediaElement
      4m 58s
    4. Changing video playback speed with TrickPlay
      2m 3s
  19. 14m 40s
    1. Capturing video with a web camera
      4m 16s
    2. Working with a microphone
      3m 47s
    3. Creating print output
      6m 37s
  20. 22m 35s
    1. Understanding Silverlight animations
      4m 35s
    2. Creating animations
      7m 52s
    3. Controlling animations
      4m 18s
    4. Simulating physics with animation easings
      5m 50s
  21. 27m 47s
    1. Placing XAML resources within a FrameworkElement
      6m 47s
    2. Centralizing settings in styles
      4m 8s
    3. Creating an alternate control UI with ControlTemplates
      6m 29s
    4. Dressing up your data with DataTemplates
      4m 33s
    5. Explaining the VisualStateManager: a simple way to manage control states
      5m 50s
  22. 10m 55s
    1. Handling global errors in a Silverlight application
      5m 46s
    2. Showing an application loading screen
      5m 9s
  23. 10m 48s
    1. Integrating with XNA
      7m 40s
    2. Exploring data analysis with PivotViewer
      3m 8s
  24. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Silverlight 5 Essential Training
8h 51m Beginner Mar 27, 2012

Viewers: in countries Watching now:

Microsoft Silverlight 5 is a rich application framework for creating high-performance, cross-platform desktop and mobile applications. In this course, author Walt Ritscher demonstrates how to build a variety of applications in Silverlight, with particular focus on building compelling business applications and delivering premium video and audio content. Developers will work with the C# programming language and Visual Studio Professional, as well as Expression Blend, a tool that simplifies creation of the interactive user interfaces expected in modern-day applications.

Topics include:
  • Installing the toolkit and setting up the development environment
  • Using Expression Blend vs. Visual Studio 2010
  • Creating a Silverlight page
  • Compiling an application
  • Exploring the relationship between XAML and .NET
  • Using C#
  • Working with XAML
  • Digging into the Dependency Property System
  • Deploying and debugging code
  • Creating sophisticated layouts with panel elements
  • Managing Visual State with Visual State Manager
  • Transforming the user interface (UI) with templates
  • Understanding the event model
  • Working with text
  • Using business data in a binding
  • Creating an out-of-browser (OOB) application
  • Exploring trust levels
  • Playing audio and video
  • Handling errors
  • Exploring animations
  • Working with application windows
  • Integration with XNA
Subject:
Developer
Software:
Silverlight Visual Studio
Author:
Walt Ritscher

Using the Navigation Framework

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.

Find answers to the most frequently asked questions about Silverlight 5 Essential Training.


Expand all | Collapse all
Please wait...
Q: I'm trying to access a Silverlight 3D application template, [cid:image001.png@01CD0E7D.3E07ECA0]. I have already installed the Silverlight 5 SDK and my Visual Studio 2010 is professional. Could you please help me?
A: You must install XNA Studio in order to use the new Silverlight 3D templates. Otherwise the new templates will not show up. Download it at http://www.microsoft.com/download/en/details.aspx?id=23714.

For other Silverlight downloads (the toolkit, developer runtime, etc.), see http://www.silverlight.net/downloads.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Silverlight 5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.