Introduction

Navigation Framework comes with Silverlight 3 RIA Services. Using this framework we can easily navigate between User Controls in a Silverlight Application. We can enable the Browser History capabilities and URI mappings can also be done.

To start with, we will build a simple Silverlight Application which will be easy to catch up.

Create Silverlight Navigation Application

Create a Navigation Application and name it NavigationFrameworkSample. The following screenshots will guide you through the process.

Figure1.gif

Figure 1.1 Creating a Silverlight Navigation Application

Figure2.gif

Figure 1.2 Enabling the RIA Features by Linking the web page

Figure3.gif

Figure 1.3 Solution explorer

Here MainPage.xaml will work as our master page, which will carry the common elements for the whole projects. Now we will redesign the template to our simple use. It will look like the following. Using Blend 3 I have tried to change the template a bit; you can explore your own creativity.

Figure4.gif

Figure 1.4 Changed MainPage.xaml in Blend 3

Xaml Code

  1. <UserControl x:Class="NavigationFrameworkSample.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. Width="400" Height="300">
  6. <Grid x:Name="LayoutRoot" Background="LightBlue">
  7. <Grid.RowDefinitions>
  8. <RowDefinition Height="0.107*"/>
  9. <RowDefinition Height="0.893*"/>
  10. </Grid.RowDefinitions>
  11. <Grid.ColumnDefinitions>
  12. <ColumnDefinition Width="0.26*"/>
  13. <ColumnDefinition Width="0.74*"/>
  14. </Grid.ColumnDefinitions>
  15. <Border Grid.Row="1" Style="{StaticResource FrameInnerBorderStyle}">
  16. <StackPanel >
  17. <Button Click="NavButton_Click" Tag="/Views/HomePage.xaml" Content="Home"
  18. Style="{StaticResource PageLinkStyle}"/>
  19. <Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="About"
  20. Style="{StaticResource PageLinkStyle}"/>
  21. </StackPanel>
  22. </Border>
  23. <Border Grid.Column="1" Grid.Row="1" BorderBrush="#FF000000" Style="{StaticResource FrameContainerStyle}" Margin="0,0,0,-4">
  24. <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"
  25. HorizontalContentAlignment="Stretch"
  26. VerticalContentAlignment="Stretch"
  27. Padding="15,10,15,10"
  28. Background="White"/>
  29. </Border>
  30. <TextBlock Grid.Column="1" FontSize="22" VerticalAlignment="Center" HorizontalAlignment="Center" Text="Navigation Framework" TextWrapping="Wrap"/>
  31. </Grid>
  32. </UserControl>
Navigation Page

Navigation Framework has its own Page that is called navigation Page. Which we will see further. Navigation Framework's Views Folder consists of the Xaml Pages that are related to the project. In this sample application we have two Xaml Pages, Home.xaml and About.Xaml.

Figure5.gif

Figure 1.5 Other Pages in Views Folder

Xaml Code for Home Page
  1. <navigation:Page x:Class="NavigationFrameworkSample.HomePage"
  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. Title="HomePage ">
  6. <Grid x:Name="LayoutRoot" Background="White">
  7. <StackPanel>
  8. <TextBlock Text="Home" FontSize="20"/>
  9. <StackPanel>
  10. <TextBlock Text="Navigation Framework in Silverlight 3" />
  11. </StackPanel>
  12. </StackPanel>
  13. </Grid>
  14. </navigation:Page>

Xaml Code for About Page
  1. <navigation:Page x:Class="NavigationFrameworkSample.AboutPage"
  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. Title="AboutPage ">
  6. <Grid x:Name="LayoutRoot" Background="White">
  7. <StackPanel>
  8. <TextBlock Text="About" FontSize="20"/>
  9. <TextBlock Text="Navigation Framework is all about Navigating between User Controls"/>
  10. </StackPanel>
  11. </Grid>
  12. </navigation:Page>
As soon as we create the Navigation Application, System.Windows.Controls.Navigation.DLL is added to the project's reference.

In Navigation framework we have a control called Frame, which can load a Page into this. It has the same concept as Frame in ASP.NET.

To navigate through the pages we will use the following default logic of the framework.
  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. }
URI Mapping

This concept is new in Silverlight 3 Navigation Framework. Using this concept we can hide our Xaml page's location and we can achieve security.
To achieve the above said, we need to do a trick in our App.xaml. We need to add the System.Windows.Controls.Navigation.dll to the xaml and change as follows: Change the default namespace.

Before
  1. xmlns:navigationCore="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
After
  1. xmlns:navigationCore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
Now we are enabled to write the URI Mappings. Write the following as per your requirement.
  1. <navigationCore:UriMapper x:Key="uriMapper">
  2. <navigationCore:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml"/>
  3. <navigationCore:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml"/>
  4. </navigationCore:UriMapper>
Change the Following tag in Button
  1. <Button Click="NavButton_Click" Tag="Home" Content="Home" Style="{StaticResource PageLinkStyle}"/>
  2. <Button Click="NavButton_Click" Tag="About" Content="About" Style="{StaticResource PageLinkStyle}"/>
Now we can change the path to our Uri anywhere in the project, like we used it in our startup page in MainPage.xaml. We can now change the source attribute of the Frame.
  1. Source="Home"
Now we are ready to test our Sample and using this framework we enabled our browser history capability by default, that means now we can do Back and Forward for our required destination pages. The following screenshots will guide you through.


Figure6.gif

Figure 1.6 Running the Application

Figure7.gif

Figure 1.7 Typing the URI after # and getting the page

Figure8.gif

Figure 1.8 Browser Histories in IE.