This is part 1 of my Silverlight 3 Feature By Feature series of blog posts.
No More Blank Slate
The first thing you may try after installing the Silverlight 3 Beta 1 Tools is creating a new Silverlight application. There is a new project template available called Silverlight Navigation Application. Using this project template creates a Silverlight project with a few things already set up for you. This is a departure from what we've had so far - a blank slate that is intimidating and doesn't really help new developers.
The new project contains the typical App.xaml but now with a bunch styles used in the main page. The MainPage.xaml is a generic, but nice looking, layout for an example Silverlight application. There are links to the Home and About views, which are both located in the Views folder of the project along with a view reserved for errors.
Running the application without any changes shows the full page Silverlight application. Click on the links will change the URL in your browser and update the browsing history. You can use these URLs to go to a specific view. For example, from the About view copy the URL, then open an alternative browser and paste in the URL. Viola! Deep linking!
How It Works
The trick to the navigation, as implemented in the project template, is the Frame control in MainPage.xaml.
1: <UserControl x:Class="SilverlightNavigation.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">
5: ...
6: <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"
7: HorizontalContentAlignment="Stretch"
8: VerticalContentAlignment="Stretch"
9: Padding="15,10,15,10"
10: Background="White"/>
11: ...
12: </UserControl>
In particular, notice the navigation namespace. The project has a reference to the System.Windows.Controls.Navigation assembly which contains new controls and other things used for navigation.
The Frame is instructed to navigate in the Click event handler of the buttons.
1: private void NavButton_Click(object sender, RoutedEventArgs e)
2: { 3: Button navigationButton = sender as Button;
4: String goToPage = navigationButton.Tag.ToString();
5: this.Frame.Navigate(new Uri(goToPage, UriKind.Relative));
6: }
I don’t exactly like the method of storing the destination page in the buttons’ Tag property, but that could easily be encapsulated by a custom NavigationButton control. Perhaps we’ll get one before RTW? I’ll definitely have to expand on this in a separate blog post.
HomePage.xaml and AboutPage.xaml are both Page objects instead of UserControl, which is typically the base control of new XAML files in a Silverlight 2 project. Its easy enough to add new navigable content to your application. Just add a new item to your project, and choose the Silverlight Page template in the Add New Item dialog.
Custom Navigation
What I wanted to do with my Silverlight Overview application was have a tree view control listing all of the examples, and each of these example pages showing up as a unique URL so I could link to a specific example. My original Silverlight Demo application had examples split into tab controls. Each tab was a separate XAML file. I could have modified these to be a Page instead of UserControl, but I wanted to break them down further and didn’t relish the thought of having 30+ Page files.
Using Reflector, I found that the Frame control’s Navigate method is using the NavigationService. Looking into this code wasn’t leading me anywhere so I decided to look at the Silverlight 3 documentation on MSDN. Interestingly, the only page that I found related to navigation, Navigation Overview, hasn’t been updated for Silverlight 3 and contains incorrect information. Finally I found Tim Heuer’s Navigation Framework screencast and blog post which shows how to use the UriMapper to accomplish what I’m looking for.
<nav:UriMapper x:Key="uriMapper">
<nav:UriMapping Uri="Examples/{example}" MappedUri="/ExamplePage.xaml?example={example}" /></nav:UriMapper>
Currently the UriMapper can only be defined in the App.xaml. Hopefully we’ll be able to move this to resource dictionary or even the same file as the Frame control.
Along with my changes to the App.xaml I added one Page to my project, ExamplePage.xaml.
<navigation:Page x:Class="SilverlightOverview.ExamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Title="Example Page"
xmlns:slo="clr-namespace:SilverlightOverview"
Loaded="Page_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<slo:XamlViewer x:Name="viewer" />
</Grid>
</navigation:Page>
1: public partial class ExamplePage
2: { 3: public ExamplePage()
4: { 5: InitializeComponent();
6: }
7:
8: private void Page_Loaded(object sender, RoutedEventArgs e)
9: { 10: if (this.NavigationContext.QueryString["example"] != null)
11: { 12: viewer.XamlFilename = string.Format("SilverlightOverview.Xaml.{0}.xaml", 13: this.NavigationContext.QueryString["example"]);
14: }
15: }
16: }
Running the project shows that my URLs to look like this.
You can even try it for yourself if you have the Silverlight 3 Beta 1 runtime installed.
I really wanted to avoid the “Examples/” part of the URL since I only have one view, but there is a limitation built in which throws exceptions if I don’t have at least a something in there.
At this point all I had to do was add a TreeView and Frame to a Grid in my MainPage.xaml, bind the tree to a static list of example data, and my application is running. I’d like to figure out a way to dynamically change the page’s title, but I ran out of time. At first glace it appears that the only place to do this is from within the Page control, but I bet there’s way to get the currently displayed page from the Frame.
You can view the Silverlight Overview application here. At the time of writing this blog post, the deep linking is the only Silverlight 3 feature that’s been added.
Summary
The Good: The Navigation Framework is a really great addition to Silverlight!
The Bad: I’d rather be able to manually add items to the browser history and display pages based on the URL, but this solution will be fine for now. I think there might be a way to do that, but I could not find any other documentation and I ran out of time to look through everything with Reflector.
The Beautiful: I finally have something to point to when Flash developers ask what Silverlight has to offer that Flash/Flex does’t.
(note – I wanted to summarize with the good, the bad and the ugly, but there’s nothing truly ugly about Silverlight 3 so I went with the opposite)