Explore .NET with Vikram Pendse: 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.

4 comments:

Unknown said...: Hi,
I'd like to ask you this: each time I click on an hyperlink, the masterpage is "reloaded"?

I'm developing a large application, with a menu on top and a lot of page of content. Cause the number of pages is very large, I'd like to ask you if it is possible to generate different .xap files, one for each "set of pages". If I put the masterpage in one of these xap files, what is happen when i change xap file and then i return on this?

Thank you very much; July 7, 2009 at 1:26 PM
Vikram Pendse said...: Hello decima_comunita,

Creating diff. xap files will might be extra work and think upon the scenario about downloading those set of xaps at client end, may indirectly create impact on performance.

You can instead do this by creating separate xaml pages like I have shown over here in my article, since you have well support of Navigation Framework,So keep one Master Page and load rest of the page by means of Navigation Framework provided by Silverlight 3 Beta. Let me know if you have any more issues or if solution is not suits to your scenario.; July 7, 2009 at 1:35 PM
vandit said...: hi,
When I copy-pasted the XAML code in the Maingpage.xaml , after adding the references to those assemblies ,it still shows that navigate namespace not found.

Please help.; February 17, 2010 at 9:41 PM
vandit said...: Make correction in your code, Use Navigation: Frame instead of Navigate:frame.

Thanks.; February 17, 2010 at 9:48 PM

Explore .NET with Vikram Pendse

Friday, March 27, 2009

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

4 comments: