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.
- Silverlight 3 Beta Tools for Visual Studio
- Microsoft Expression Blend 3 Preview
- Silverlight Toolkit
- .NET RIA Services
- 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
4:
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
8:
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="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="AboutUs Page">
6:
7: </navigation:Page>
The Navigation framework has some key features . They are
- Frame Container
- UriMapping
- 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”
1:xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2:
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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
12:
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.
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.