Friday, January 8, 2010

Navigation between XAML Pages using Silverlight 2.0

Before going in to navigation one thing keep in mind there is no direct way for navigating the xaml files in Silverlight 2.0.
Ok fine let's start our navigation journey. I have two ways to navigate between the xaml files.
let me explain one by one.
# Method 1: Using App.XAML
Step 1:
There is a Application_startup event in App.XAML which will decide the initial load page.
Before that comment all the line in this method. (Example://this.RootVisual = new Page();)
Here in this have to do some little trick.
Step 2:
Declare one public Grid outside the event.
like this: public static Grid root;
and then write this code in the application Startup event.

private void Application_Startup(object sender, StartupEventArgs e)
{
root = new Grid();
root.Children.Add(new Login());
this.RootVisual = root;
}

here only we are adding Grid as a parent control. under that we have xaml page.
Step 3:
Create one more method for navigation.
public static void Navigate(UserControl newPage)
{
UserControl oldpage = root.Children[0] as UserControl;
root.Children.Add(newPage);
root.Children.Remove(oldpage);
}
This is the method will navigate one xaml to another xaml. Basically it's just removing the old page and adding new page.
The above all three steps only in the App.XAML file.
Step 4:
Now come to Login.Xaml, this is the inital page which will load from App.XAML.
After successing the login user has to navigate to productlist page.
The below code will navigate to product list page.
private void Login_Success_Click(object sender, RoutedEventArgs e)
{
App.Navigate(new Product());
}


#Method 2:
This is better approach compare to above.
In the silverlight application should have two files.
1) App.XAML2) Master.XAML
here in Master is the common file which will navigate the files through this.
let me go through step by step:
Step 1:
In the application_startup event load the Master.XAMl (Remove Automated code)
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Master();
}

Step 2:
In the master page clear all the content except usercontrol tag.
<UserControl x:Class="SilverlightThird.Master" xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> </UserControl>
Step 3:
In the code behind of Master page write the below code.
public partial class Master : UserControl
{
public Master()
{

InitializeComponent();
if (this.Content == null)
{
this.Content = new Login();
}
}

public void Navigate(UserControl Nextpage)
{
this.Content = Nextpage;
}
}

Step 4:
Now come to Login.xaml file.
In the success method of login.xaml.cs file write this below it will navigate.

hope this will help.