(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Silverlight 3 Navigation API

(2 votes)
Thanigainathan Siranjeevi
>
Thanigainathan Siranjeevi
Joined Apr 25, 2009
Articles:   4
Comments:   6
More Articles
7 comments   /   posted on Apr 27, 2009
Categories:   Line-of-Business , General

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 .

New

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

dlls

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

<StackPanel Background="Black" Orientation="Horizontal" Grid.Row="0">
    <HyperlinkButton Name="Home" Foreground="White" FontWeight="bold" Content="Home " Tag="Home" Click="Home_Click"></HyperlinkButton>
    <HyperlinkButton Name="Employee" Foreground="White" FontWeight="bold" Content="Employee List " Tag="Employee" Click="Employee_Click"></HyperlinkButton>
    <HyperlinkButton Name="About" Foreground="White" FontWeight="bold" Content="About Us " Tag="AboutUs" Click="About_Click"></HyperlinkButton>
</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.

Private Sub Home_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)   
    Me.MydemoFrame.Navigate(New Uri(Home.Tag, UriKind.Relative))   
End Sub   
      
Private Sub About_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)   
    Me.MydemoFrame.Navigate(New Uri(About.Tag, UriKind.Relative))   
End Sub   
 
Private Sub Employee_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)  
    Me.MydemoFrame.Navigate(New Uri(Employee.Tag, UriKind.Relative))  
End Sub

HomeTitle

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

<navigation:Page x:Class="NavigationDemo.AboutUs"    
    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="AboutUs Page">
</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”

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"  

Now that we can start using the frame container control.

<navigation:Frame x:Name="MydemoFrame"
    Source="Home"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    JournalOwnership="Automatic">
</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

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    xmlns:NavigationCore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"   
    x:Class="NavigationDemo.App">   
    <Application.Resources>   
        <NavigationCore:UriMapper x:Key="uriMapper">   
        <NavigationCore:UriMapping Uri="Home" MappedUri="/view/Home.xaml"></NavigationCore:UriMapping>   
        <NavigationCore:UriMapping Uri="Employee" MappedUri="/View/Employee.xaml"></NavigationCore:UriMapping>  
        <NavigationCore:UriMapping Uri="AboutUs" MappedUri="/View/AboutUs.xaml"></NavigationCore:UriMapping>  
        </NavigationCore:UriMapper>  
    </Application.Resources>  
</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.

ObjExplore

View Folder Created

NewSil

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.

Employee

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.

Public Class EmployeeColl   
    Public Shared Function GetEmpList() As List(Of Employee)   
        Dim elist As New List(Of Employee)   
        elist.Add(New Employee("John", 23, 1))   
        elist.Add(New Employee("Samuel", 24, 2))   
        elist.Add(New Employee("Ram", 25, 1))   
        elist.Add(New Employee("Jack", 26, 2))   
        elist.Add(New Employee("Steve", 26, 2))   
        Return elist  
    End Function  
End Class  
 
Public Class Employee  
    Private _name As String  
    Private _age As Integer  
    Private _Eid As Integer  
    Public Sub New(ByVal Ename As String, ByVal age As Integer, ByVal eid As Integer)  
        ' This call is required by the Windows Form Designer. 
        InitializeComponent()  
        Me.Ename = Ename  
        Me.age = age  
        Me.Eid = eid  
        ' Add any initialization after the InitializeComponent() call. 
    End Sub  
    Property Ename() As String  
        Get  
            Return _name  
        End Get  
        Set(ByVal value As String)  
            _name = value  
        End Set  
    End Property  
    Property age() As Integer  
        Get  
            Return _age  
        End Get  
        Set(ByVal value As Integer)  
            _age = value  
        End Set  
    End Property  
    Property Eid() As Integer  
        Get  
            Return _Eid  
        End Get  
        Set(ByVal value As Integer)  
            _Eid = value  
        End Set  
    End Property  
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 .

Me.EmployeeGrid.ItemsSource = EmployeeColl.GetEmpList

EmployeeList will be looking as follows

EmployeeList

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

History

I have attached the sample application with this post.

Conclusion:

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.


Subscribe

Comments

  • -_-

    RE: Silverlight 3 Navigation API


    posted by Chloé on Jul 18, 2009 00:04
    great, thank you.
  • MisterFantastic

    RE: Silverlight 3 Navigation API


    posted by MisterFantastic on Jul 20, 2009 13:48
    You are welcome
  • -_-

    RE: Silverlight 3 Navigation API


    posted by Rani on Dec 25, 2009 08:24
    Can we generate the dynamic drop down menus, from taking values ms sql databse?
  • -_-

    RE: Silverlight 3 Navigation API


    posted by Rani on Dec 25, 2009 09:07
    Can we generate the dynamic drop down menus, from taking values ms sql databse?
  • -_-

    RE: Silverlight 3 Navigation API


    posted by rosh on Feb 10, 2010 13:08
    I executed same code given by you but it did not show navigation history (  I cannot go backward or forward like normal website).
  • -_-

    RE: Silverlight 3 Navigation API


    posted by l on Feb 26, 2010 04:25
    otherwise specified, all content is made available under the Creative Commons License     Terms Of Use
    Microsoft Silverlight and the Silverlight Logo
  • -_-

    RE: Silverlight 3 Navigation API


    posted by Rajesh on Sep 23, 2010 05:52

    Hi Thangainathan,,

    Suppose I have an XAML Page say customer page in a Silverlight Class Library and I have referenced that library in my Application.how to navigate to customer page on click of hyperlink button from my main application?

    Regards,

    Rajesh

Add Comment

Login to comment:
  *      *