What’s New In Silverlight 3 – Navigation : Silverlight Feeds

What’s New In Silverlight 3 – Navigation

by jesseliberty via Jesse Liberty - Silverlight Geek on 7/27/2009 4:50:52 PM

As Silverlight moves from providing controls and UX bits to providing a framework for creating entire applications, it becomes more important to have a framework for multi-“page” applications. Silverlight 3 introduces the Silverlight Navigation Application

This template in Visual Studio creates a series of files that serve as a very flexible and customizable framework for multi-page applications. The unmodified user experience, out of the box, is shown in this live demo, followed by a brief analysis of the code that Visual Studio creates.

(Note that I did modify the size to fit this page.) Visual Studio creates the usual MainPage.xaml/...cs and App.xaml/...cs files but also creates an Assets folder, containing Styles.xaml and a Views folder containing three starter pages:

Home.xaml
About.xaml
ErrorWindow.xaml

Each with its own code-behind.

You’ll notice that if you click on about the page switches, while the frame around the page does not.

Frame and URI Mapping

I’ll go into the details in an upcoming mini-tutorial and video, but the basic structure is that MainFrame.xaml provides an instance of System.Windows.Controls.Frame (found in the d System.Windows.Controls.Navigation namespace). The Frame supports navigation among pages, and also supports passing information to the page to tell it what state it should be in.

Rather than forcing you to provide a full path to the page, the Frame class allows you to request the page you want with an instance of URIMapping, which in turn provides support for parameterized URIs that request a page by mapping parameters to a full URI.

For example, your frame might contain a URIMapping that looks like this:

   1: <!-- snippet from the Silverlight Documentation -->

   2: <navigation:Frame.UriMapper>

   3:        <uriMapper:UriMapper>

   4:            <uriMapper:UriMapping

   5:                Uri="/ProductDetail/{productid}"

   6:                MappedUri="/Views/ProductDetail.xaml?ProductId={productid}"/>

   7:            <uriMapper:UriMapping

   8:                Uri="/{pageName}"

   9:                MappedUri="/Views/{pageName}.xaml"/>

  10:        </uriMapper:UriMapper>

  11:    </navigation:Frame.UriMapper>

You can see that this allows you to bring up a Product Detail page based on the provided ProductID and a second page based on whatever name is provided.

(full details and a complete walk through to come in the forthcoming mini-tutorial and video).

Previous: Merged Resources