Silverlight 3’s New Navigation Framework

One of Silverlight 3’s prominent new features is its built-in navigation framework. This framework allows you to break your content into navigable chunks, or “pages,” that derive from the new System.Windows.Controls.Page class. Pages are addressable by URI, just like pages in a conventional Web application, and the new System.Windows.Controls.Frame class provides an API for navigating among pages and integrating with the browser’s history mechanism. One of the benefits of using the navigation framework is that it (gasp!) enables the browser’s Back and Forward buttons. It also lends a degree of SEO friendliness to Silverlight since individual pages can be identified by URL.

I wrote a simple application to demonstrate the basics of the navigation framework. You can download the app and check it out for yourself. MainPage.xaml hosts a Frame control that provides visibility into two pages: Index.xaml, which displays a collection of aircraft, and Detail.xaml, which displays a detailed view of a particular aircraft. Index.xaml is displayed when the application first comes up; here’s what it looks like:

And here’s what you see when you click one of the aircraft images (in this case, the one in the middle):

Index.xaml uses Silverlight 3’s new WrapPanel control with some manual data binding to display all the aircraft. The aircraft are represented by instances of a simple custom class named Aircraft, and a separate class named Hangar has methods for retrieving collections of Aircraft objects as well as individual Aircraft objects.

A good starting point for exploring the sample application is MainPage.xaml, which declares a Frame control and sets the default page to “Aircraft:”

<nav:Frame x_Name=”Main” Source=”Aircraft” … />

An instance of UriMapper declared in App.xaml maps requests for “Aircraft” to Index.xaml. Note that in Silverlight 3 Beta 1, the UriMapper must be named “uriMapper,” or else it will not work:

<nav:UriMapper x_Key=”uriMapper”>

  <nav:UriMapping Uri=”Aircraft” MappedUri=”/Index.xaml” />

  <nav:UriMapping Uri=”Detail/{id}” MappedUri=”/Detail.xaml?id={id}” />

</nav:UriMapper>

When you click one of the images in Index.xaml, the following event handler retrieves the corresponding aircraft ID from the image’s Tag property and navigates to Detail.xaml, passing the aircraft ID in the URI:

void OnImageClicked(object sender, MouseButtonEventArgs e)

{

    string id = ((FrameworkElement)sender).Tag.ToString();

    NavigationService.Navigate(new Uri(String.Format

        (“Detail/{0}”, id), UriKind.Relative));

}

Thanks to the second URI mapping in the UriMapper above, “Detail/1000” becomes “/Detail.xaml?id=1000,” and the following statement in Detail.xaml.cs extracts the aircraft ID from the query string:

string sid = NavigationContext.QueryString[“id”];

Once the aircraft ID is known, a few additional statements in Detail.xaml.cs retrieve the corresponding Aircraft object and use properties of that object to initialize the Image and TextBlock declared in the page.

When you run the application, notice that after you’ve clicked a few times, you can use the browser’s Back and Forward buttons to navigate around. Also notice that you can bookmark a page that shows a particular aircraft (for example, “NavigationDemoTestPage.html#Detail/1001”) and go back to that page simply by pasting the URL into the browser’s address bar.

Using UriMapper isn’t strictly necessary, but the beauty of URI mapping is that it allows you to control your URIs. I would rather a user see “NavigationDemoTestPage.html#Aircraft” in the browser’s address bar than “NavigationDemoTestPage.html#/Index.xaml.” The more complex the URI, the more you’ll appreciate URI mapping.

There is much, much more to the navigation framework than I have presented here, but this sample covers the essentials. Tim Heuer and others have blogged about the navigation framework more extensively and have even posted some helpful videos, including this one. If your chief concern about previous versions of Silverlight is lack of navigability and incompatibility with search engines, the navigation framework is something you’ll find worth digging into.