you're reading...
Silverlight 3

Navigation in Silverlight 3:Using UserControl

Navigation in Silverlight – Part 1

[Problem viewing , read pdf version of full article here  Navigation in Silverlight]


In traditional ASP.NET client applications which are built around different web pages that encapsulate distinct tasks and in order to create this sort of application in Silverlight, we have couple of ways to do.

Silverlight 3 introduces Navigation Framework which take care of this , but let first try to achieve navigation and state management without this framework or you can say , way we can do in Silverlight 2.

Step 1: Creating Silverlight Project

Create a Silverlight Application, here kindly note we are not using Silverlight Navigation Application, which we will do in next demo.

Give a solution and project name and click OK.

This window asks you where and how you want to host your application, Click Ok to accept the default values.

You Project will look similar to this.

Step 2: Understand the Logic

Instead of using navigation framework as stated earlier, we will do it our self by directly manipulating

The user interface. For example, you can use code to access the root visual, remove the user

Control that represents the first page, and add another user control that represents a different

Page. This technique is straightforward, simple, and requires relatively little code. It also gives

You have the ability to micromanage details like state management, which we will see later in demo

The basic technique is to use a simple layout container like Grid or Border as your application’s root visual. You can then load user controls into the root visual when required and unload them afterward.

Go to App.xaml and notice which root visual element is first loaded,

The trick is to use something more flexible–a simple container like the Border or a

layout panel like the Grid. Here’s an example of the latter approach:

I have created grid as my visual root element and added MainPage as its child. Grid is a container and we first cleared it, and added MainPage into its container collection as below ,

private void Application_Startup(object sender, StartupEventArgs e)


//this.RootVisual = new MainPage();

this.RootVisual = rootGrid;


rootGrid.Children.Add(new MainPage());


Now the idea is simple, when we need to switch to another page , all we need to do it to add that page into container collection of grid.

i.e.            rootGrid.Children.Add(new Page1());

so lets do it more systematic way.We will create a static method in App.xaml.cs file;

You see Navigate function take page as UserControl input which is where user want to navigate.

Before we add this page in container collection of grid, we need to take the current application object, cast it to an instance of custom  App Class. This was not required before, because we were in Application_Startup event.

public static void Navigate(UserControl newPage)


App currentApplication = (App)Application.Current;




Now, Lets Test this. Create a button on MainPage.xaml and add a usercontrol , say Home.xaml,

Create a button on main.xaml

For click event on this button , just add below line of code;

private void btnNavigate_Click(object sender, RoutedEventArgs e)


App.Navigate(new Home());


On Home.xaml , create a textbox and a button to navigate back.

You are ready, HIT F5 and see the result like below;

Click button to go to Home Page,

Step 3: How to manage the state of page.

Lets repeat the above step ,HIT F5  and go to Home page and change the text in textbox and come back to MainPage and again go to Home page , you will notice , it do not retain the last message you posted , rather its showing its default message ,

Notice here, that it always show its default message and not the message which we are writing , I.e. it Is not retaining it state?

To implement State management let begin by implementing a  system to identify pages. You could fall

back on string names, but an enumeration gives you better error prevention. Here’s an enumeration that distinguishes between three pages , let say in our case ,it is Home.xaml , Product.xaml and MainPage.xaml.

Come back to App.xaml.cs and create an enum ,

public enum Pages






You can then store the pages of your application in private fields in your custom application class. Here’s a simple dictionary that does the trick:

private static Dictionary<Pages, UserControl> PageCache = new Dictionary<Pages, UserControl>();

What also we are doing is creating cache memory with this simple dictionary, and creating page only if they are requested for the first time else just navigating it that page and Because only one version of the page is ever created, and it’s kept in memory over the lifetime of the application,

We will keep our Navigate method and create similar method below;

public static void NavigateWithState(Pages newPage)


App cuurentApp = (App)Application.Current;

//Check whether this page has been created before or not

if (!PageCache.ContainsKey(newPage))


// Create the first instance of the page,and cache it for future use.

Type type = cuurentApp.GetType();

//Create Assembly of this type

Assembly asm = type.Assembly;

//Add into dictionaty , after casting it of UserControl Type

PageCache[newPage] = (UserControl)asm.CreateInstance(

type.Namespace + “.” + newPage.ToString());


//Navigate to this page




To use Assembly Class , do add below namespace

using System.Reflection;

Now we are ready to run this application , but we will navigate using our new NavigateState Method which will maintain state , so let amend the click events of button on MainPage.xaml and Home.xaml and lets add one more new usercontrol , Product.xaml

On MainPage.xaml ,edit click event as below  ,

private void btnNavigate_Click(object sender, RoutedEventArgs e)




private void btnNavigate1_Click(object sender, RoutedEventArgs e)




On Product and Home page ,edit click event as below ;

private void btn1_Click(object sender, RoutedEventArgs e)




HIT F5 , and see screen like below

Click to go to product page and change the text there,

Go back to main page and again click to go to product page you will notice that , our last posted message retained while we navigated to and fro between pages, which is now stateful navigation .


In this article we understood, how to achieve navigation technique without using navigation framework, rather using some tricks and how to create single version of the page which is kept in memory over the lifetime of the application,

In next article, we will learn how to create modal window application.

[Problem viewing , read pdf version of full article here  Navigation in Silverlight]


About Vishal

Vishal Nayan is a seasoned professional with hand on Experience on Mircrosoft Technologies. He always look for challenging IT position that allows him to learn new Microsoft Technologies while utilizing experience of Project Development and Software Engineering Ethics. A MCP in WCF ,and looking forward for more.


2 thoughts on “Navigation in Silverlight 3:Using UserControl

  1. Thanks Vishal, I got here exactly what I was looking for.

    Posted by Vishal | 2011/06/20, 4:58 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow Vishalnayan on WordPress.com

Blog Stats

  • 216,313 hits
%d bloggers like this: