Silverlight 3 Navigation API

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 .

<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

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.

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.

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

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.

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.