Michael Wolf

Saturday April 04, 2009

Silverlight 3 Navigation framework and data

One of the great features in Silverlight 3 is the navigation framework. This will allow you to build very large Silverlight applications which require true browser navigation support without having to build your own browser ineropability to handle back / forward navigation. This has always been the ajax/player based application problem when it comes to usability, and with Silverlight 3 you will get this functionality out of the box. You can even use the navigation framework to perform deeplinking tasks by rerouting http requests to different navigation points within your application using the new UriMapper. Thus allowing you to advertise custom urls such as

http://www.companyname/tv/maryland

And using the new UriMapper you could map this to a specific view as well as arguments to that view

<navigationCore:UriMapper x:Key="UriMapper">
    <navigationCore:UriMapping Uri="tv/{state}" MappedUri="/Views/Campaign.xaml?state={state}" / >
 </navigationCore:UriMapper>

There have been some great write ups on the framework and features from the Silverlight show and Tim Heuer I highly recommend.

However this framework seems to have added some confusion in the developer community by introducing web application paradigms to the desktop style application patterns of Silverlight. Many developers have voiced questions as to how this relates to data binding, and if data now needs to be posted from view to view. Although the navigation framework includes a frame and page concept, all navigation continues to be within the context of the Silverlight application. Thus there is no concept of a post back or having to worry about the application data state. Luckily the mvc / m v vm patterns we have developed really come to the rescue here. Ideally none of your data should be connected with the code behind in your individual views, and instead should be living in your viewmodel. Thus even though you are navigating to an about page in the following manor :

   <StackPanel Style="{StaticResource NavigationPanelStyle}">
      <Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about" /%gt;              
   </StackPanel>
           
   <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"
       HorizontalContentAlignment="Stretch"
       VerticalContentAlignment="Stretch"
       Padding="15,10,15,10"
       Background="White">
   </navigation:Frame>

You’re data would be persisted to the next page because it would have its datacontext bound to your viewmodel.

DataContext="{Binding PersonManager, Source={StaticResource ModelLocator}}"

This functionality and databinding acts and behaves exactly as it would in any wpf or silverlight application, but the navigation syntax and control names beacon back to a time of postbacks and nasty persitance hacks. See the screencast below for a running example of the navigation framework and use of a Model View ViewModel pattern in silverlight 3.