Geeks With Blogs
Thanigainathan Siranjeevi Sharing my learning

Silverligth 3 is the most awaited release of Microsoft. I found the download’s from the page Silverlight 3. The following are the utlities that can be found in this download page.

  1. Silverlight 3 Beta Tools for Visual Studio
  2. Microsoft Expression Blend 3 Preview
  3. Silverlight Toolkit
  4. .NET RIA Services
  5. Silverlight 3 Beta Documentation

In this list the most attracting one is the RIA services which is making wonders with Silverlight now. I will be discussing about them in the later posts. Now I am going to discuss about the Navigation features that are introduced with this new release. Its good to explore them at the beta stage. We can learn the things by means of a sample application”NavigationDemo” in VB.Net .


This is the first step. We have to create a new Silverlight Application. Since we are going to details the Navigation features we are taking this. If we choose the “Silverlight Navigation Application” all those navigation features will be built by the template itself. Then refer the following components

  • System.Windows.Controls
  • System.Windows.Controls.Navigation


By default we will be having the System.Windows.Ria if RIA is installed. Add three menu items for the sample .

   1:  <StackPanel Background="Black" Orientation="Horizontal" Grid.Row="0">
   2:     <HyperlinkButton Name="Home" Foreground="White" FontWeight="bold" Content="Home " Tag="Home" Click="Home_Click"></HyperlinkButton>           
   3:     <HyperlinkButton Name="Employee" Foreground="White" FontWeight="bold" Content="Employee List " Tag="Employee" Click="Employee_Click"></HyperlinkButton>           
   4:     <HyperlinkButton Name="About" Foreground="White" FontWeight="bold" Content="About Us " Tag="AboutUs" Click="About_Click"></HyperlinkButton>           
   5:  </StackPanel>

We are placing the menu as Horizontal. The styles are inline now. May be they can be taken inside the App.Xaml .The hyperlinkbutton is having a property called Tag. This property is used in the code behind to navigate to the specific xaml files.

   1:      Private Sub Home_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   2:          Me.MydemoFrame.Navigate(New Uri(Home.Tag, UriKind.Relative))
   3:      End Sub
   5:      Private Sub About_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   6:          Me.MydemoFrame.Navigate(New Uri(About.Tag, UriKind.Relative))
   7:      End Sub
   9:      Private Sub Employee_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  10:          Me.MydemoFrame.Navigate(New Uri(Employee.Tag, UriKind.Relative))
  11:      End Sub



Another important feature with Silverlight 3 is the Title bar support . This is similar to the HTMl title text.

   1:  <navigation:Page x:Class="NavigationDemo.AboutUs"
   2:             xmlns=""
   3:             xmlns:x=""
   4:             xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
   5:             Title="AboutUs Page">
   7:  </navigation:Page>

The Navigation framework has some key features . They are

  1. Frame Container
  2. UriMapping
  3. Querystring Concepts

For using the Navigation framework we have to add the Xmlns namespace to the Xaml file. In our sample we will be adding that to the “Main.Xaml”


Now that we can start using the frame container control.

   1:  <navigation:Frame x:Name="MydemoFrame"
   2:                                Source="Home"
   3:                                HorizontalAlignment="Stretch"
   4:                                VerticalAlignment="Stretch"
   5:                                JournalOwnership="Automatic">
   6:  </navigation:Frame>

Here I have assigned the source as “Home” and this is a typical usage of UriMaping. If UriMapping is not used here then it would look like “/view/Home.xaml” . This is something like the UrlRewritting found in Asp>net VC pattern. So if we want to utilize the Silverlight 3 UriMapping then we can do that by mean’s of the “App.Xaml” which contains the common configuarations for a Silverlight Applciation. Following is the code that is used in App.Xaml

   1:     <Application xmlns=""
   3:                       xmlns:x=""
   4:                       xmlns:NavigationCore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
   5:                       x:Class="NavigationDemo.App">
   6:              <Application.Resources>
   7:                  <NavigationCore:UriMapper x:Key="uriMapper">
   8:                      <NavigationCore:UriMapping Uri="Home" MappedUri="/view/Home.xaml"></NavigationCore:UriMapping>
   9:                      <NavigationCore:UriMapping Uri="Employee" MappedUri="/View/Employee.xaml"></NavigationCore:UriMapping>
  10:                      <NavigationCore:UriMapping Uri="AboutUs" MappedUri="/View/AboutUs.xaml"></NavigationCore:UriMapping>
  11:                  </NavigationCore:UriMapper>
  12:              </Application.Resources>
  13:          </Application>

The Frame has another important property called JournalOwnership. TIts a enumerated data type in Silverlight with the following member definitions.

Member name Description
Automatic If the Frame control is a top-level frame, it integrates with the browser journal; otherwise, it maintains its own journal.
OwnsJournal The Frame maintains its own journal. This option can be used with any Frame.
UsesParentJournal The Frame integrates with the browser journal. This option can be used only with a top-level Frame; otherwise, an exception is thrown.

This feature will be useful when the application’s navigation has to be disabled for the user and controlled by the application itself. For example Bank Applications .

For our example we have created a separate folder called View. We will be placing our custom Xaml files here. Currently we are using no themes. But we can build our owns . We can find some themese in Tim Heur's Blog.


View Folder Created


New Xaml Files are added here inside View folder. The next thing will be the xaml files details (Home.Xaml, Employee.Xaml, AboutUs.Xaml).I have just added some texts on the Home and AboutUs page. For the Employee page i have created a custom object called “Employee.VB” in the Silverlight project.


Please find the code for EmployeeColl and Employee class. I have avoided DB hits here since this is a demo. I will come up with a Application using DomainServiceClass in coming posts.

 1:  Public Class EmployeeColl
   2:      Public Shared Function GetEmpList() As List(Of Employee)
   3:          Dim elist As New List(Of Employee)
   4:          elist.Add(New Employee("John", 23, 1))
   5:          elist.Add(New Employee("Samuel", 24, 2))
   6:          elist.Add(New Employee("Ram", 25, 1))
   7:          elist.Add(New Employee("Jack", 26, 2))
   8:          elist.Add(New Employee("Steve", 26, 2))
   9:          Return elist
  10:      End Function
  11:  End Class
  13:  Public Class Employee
  14:      Private _name As String
  15:      Private _age As Integer
  16:      Private _Eid As Integer
  17:      Public Sub New(ByVal Ename As String, ByVal age As Integer, ByVal eid As Integer)
  18:          ' This call is required by the Windows Form Designer.
  19:          InitializeComponent()
  20:          Me.Ename = Ename
  21:          Me.age = age
  22:          Me.Eid = eid
  23:          ' Add any initialization after the InitializeComponent() call.
  24:      End Sub
  25:      Property Ename() As String
  26:          Get
  27:              Return _name
  28:          End Get
  29:          Set(ByVal value As String)
  30:              _name = value
  31:          End Set
  32:      End Property
  33:      Property age() As Integer
  34:          Get
  35:              Return _age
  36:          End Get
  37:          Set(ByVal value As Integer)
  38:              _age = value
  39:          End Set
  40:      End Property
  41:      Property Eid() As Integer
  42:          Get
  43:              Return _Eid
  44:          End Get
  45:          Set(ByVal value As Integer)
  46:              _Eid = value
  47:          End Set
  48:      End Property
  49:  End Class

Create a instance of this class and consume the objects in the Employee.Xaml fie. I have a Datagrid in this Xaml and we can use the instance objects here .

1:Me.EmployeeGrid.ItemsSource = EmployeeColl.GetEmpList

EmployeeList will be looking as follows


Now the browser history can be viewed as we can do with ASP.Net applications. The following picture depicts that.


I have attached the sample application with this post.


I have covered an overview of the Navigation framework and their usage. A lot more can be covered in the future posts. We can see detailed posts on .Net Ria Services in detail since this is one of the good features for building a N-Tier application with ease. Please review my post and give your feedback’s.

Posted on Friday, April 24, 2009 6:46 AM | Back to top

Comments on this post: Silverlight 3 Navigation API

# re: Silverlight 3 Navigation API
Requesting Gravatar...
I have a main page(aspx page) with logout button and I have a Silverlight plugin in it when i click logout the silverlight plugin remainss still active ? Can you help me why ?
Left by naresh on Jun 23, 2010 9:42 PM

Your comment:
 (will show your gravatar)

Copyright © thanigai | Powered by: