Silverlight 3 : Master Pages implementation with Navigation Framework

First of all, I wish “Happy New Year” to all my blog readers from India on occasion of “Gudhipadwa-Hindu New Year Day”.

After Introductory articles on Silverlight 3 which you can see as Part1, Part2 and Part3. Now I am going for Part 4.

Few months back I wrote an article on Implementing Master pages in Silverlight 2 , and I got very good response and feedback from all of you, that time I made use of Stack Panel and some small code logic which instructs to load different content dynamically. With Silverlight 2, unfortunately we had no navigation support or framework as such, and we use to do it with such small tricks and workaround.

Let me now make you aware of Navigation Framework in Silverlight 3 with which I am going to rebuild my Master Pages application in Silverlight 3 which I had developed in Silverlight 2. For this, I am making use of some code methodology and concepts shown in screencast by Tim Heuer in his screencast. Using that I am going to build the new code for Master Page implementation with some tweaks in UI Code which I build in past for the same.

Firstly, Create a new Silverlight Project and set reference to following :

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

There is one “Silverlight Navigation Application” template also, but I am not going to talk about it right now, but surely I am going to touch upon that soon.

Well, Most of the XAML code of my last Master Page article I am keeping the same, with new minor changes, new code is :

One thing you must have notice that, Instead of Buttons in old code, now I am making use of Hyperlink button to give exact feel of navigation.Observe carefully that to send request to particular page, you need to set “Tag” property as path or url to the target page. I have added few pages as per requirement in a separate folder Content in my project. To add Separate page, you can do so by right clicking on Silverlight project, then Add New Item, there you will find a separate template for user control and separate template for page, like this :

Now understand C# Code :

using System;
using System.Windows;
using System.Windows.Controls;

namespace SL_NavigationDemo
{

public partial class MainPage : UserControl
{

public MainPage()
{
InitializeComponent();
}

private void Redirect_Click(object sender, RoutedEventArgs e)

{
HyperlinkButton hybtn = sender as HyperlinkButton;

string refurl = hybtn.Tag.ToString();

this.MainMaster.Navigate(new Uri(refurl, UriKind.Relative));

}

}

}

The Redirect_Click event we have already associated with each HyperlinkButton Click in xaml code, Here we are just casting it and passing the “Tag” to Navigate() which is method provided by Silverlight 3 Navigation Framework which accepts Relative URL and redirects to the corresponding page. That’s all you need to do in this to implement Master pages kind of functionality.If you are planning to make some default page while navigation, you need to set “Source” property of Navigate tag, Navigate Tag provides two options by default, one is “Frame” and another one is “Page”. If you run the application, you can see change in URL, previously in Silverlight 2 and below versions, it was not showing anything besides “aspx” or “html” in address bar, but now from Silverlight 3 we have navigation support across pages, URLs look like following :

It shows something..aspx#/Content/Blog.xaml, so it shows which XAML page which you are accessing currently, Also make a point that Browser’s Title is not set automatically, It has been set through individual page, let me drop few lines of XAML of Blogs.xaml page, so that you can get some idea.

<navigation:Page x:Class="SL_NavigationDemo.Content.Blog" 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="Blog Page">

    <Grid x:Name="LayoutRoot" Background="White">
           <TextBlock Text="You are on Blog Page" FontSize="20"/>
   </Grid>
</navigation:Page>

Observe carefully now, Its now no longer <navigate:Frame> but its <navigate:Page>, This will render inside frame which we have on MainPage.xaml, “Title” attribute helps to set-reset Title of page, This is just like <title> tag in HTML. Inside grid we can put whatever we want to. Each separate XAML Page will act as content page in our Master page implementation scenario.

Now, some of you may raise your eye,since URL is getting expose directly in address bar. so there are few things which if we implement, we can hide that exposing address. What we need to do is set those Tag urls under App.xaml as global resource like this :

<Application.Resources>

<navigate:UriMapper x:Key="uriMapper">

<navigate:UriMapping Uri="Home" MappedUri="/Content/Home.xaml"/>

<navigate:UriMapping Uri="Blog" MappedUri="/Content/Blog.xaml"/>

<navigate:UriMapping Uri="RSS" MappedUri="/Content/RSS.xaml"/>

<navigate:UriMapping Uri="Download" MappedUri="/Content/Download.xaml"/>

<navigate:UriMapping Uri="AboutUs" MappedUri="/Content/AboutUs.xaml"/>

</navigate:UriMapper>

</Application.Resources>

UriMapper will help us to set the URL which we are targeting and MappedUri can be set with the target URL, make note that whatever “Uri” we setting here, same content to be set in place of “Tag” attribute of HyperlinkButton, else application will throw runtime exception. So finally MainPage.xaml’s HyperlinkButton block will look like this :

So now URL will look like :

And final Output will look like :

Hope this example have given you some good introduction of Navigation Framework in Silverlight 3 Beta. I know, something you might be expecting more from me, well as I told in my previous articles, This is just lap around, So I am surely covering each of these features in great details in coming days. Also soon I will be sharing “Deep Linking” with you.Meanwhile I am really looking ahead for your feedback and suggestions,so keep visiting here for more stuff on Silverlight 3.

Vikram.

Window Support

Friday, 27 March 2009

Silverlight 3 : Master Pages implementation with Navigation Framework – Part 4

0 comments:

Post a Comment

Popular Posts

Blog Archive

About Me