Objective

This article will show, How to navigate between two SilverLight pages in silverLight2.0. This article is giving step by step illustration on how to navigate and pass values between two SilverLight pages. In this SilverLight application user will input her name and two numbers in one Silverlight page and user will get greeting message and summation of input number in other SilverLight page.

 Step 1
Create a Silver Light application.

  1. Open visual studio
  2. Select File->New ->Project -> Web
  3. Navigate to Silver Light tab.
  4. Select Silver Light application.
  5. Give any meaningful name. I am giving name here, SilverLightNavigation.
  6. lect hosting the application into web project.

 Step 2

  1. Delete MainPage.Xmal from Silver Light project.
  2. Add two new user controls to Silver Light project. To do so Right click on Silver Light project and add new Item. Navigate to Silver Light tab. Then select Silverlight user control. Give name of the user controls as Page1 and Page2.    

 Step 3
Open App.Xaml.cs file.

  1. Declare a container element.

    Grid navigationUI = new Grid(); 

  2. Add the page, which is to be navigating as the child of the container we just created.
    this.RootVisual = navigationUI;
    navigationUI.Children.Add(new Page1());
  3. Now we will take three private variables inside App.Xaml.cs. one for username as string and two for two inegers to be added. 
private string name;
private int number1;

private int number2;

public string Name
{ get { return name;}set{name = value;}}
public int Number1 { get{ return number1;}set{number1 = value;}}
public int Number2{get{return number2 ;}set{number2 = value;}}
  1. Now we will add a static method, which will navigate the pages.

public static void NavigateToPage(UserControl page)
{

App application = (App)Application.Current;

application.navigationUI.Children.Clear();

application.navigationUI.Children.Add(page);}

So, the entire App.Xaml.cs file will look like below. Codes in red rectangle are added by us.

App.Xaml.cs

namespace SilverLightNavigation{

public partial class App : Applicatio{

private string name;
private int number1;
private int number2;
public string Name{ get { return name; }set{name = value;}}
public int Number1 {get return number1;}set{number1 = value;}}
public int Number2
{get{return number2 ;}set{number2 = value;}}
Grid navigationUI = newGrid();
public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;

this.UnhandledException += this.Application_UnhandledException;

IitializeComponent();}
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = navigationUI;

navigationUI.Children.Add(newPage1());}


private void Application_Exit(object sender, EventArgs e){}
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if (!System.Diagnostics.Debugger.IsAttached)
{
e.Handled = true;
Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });}}

privatevoid ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e){

try
{
string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
errorMsg = errorMsg.Replace(‘”‘, ‘\”).Replace(“\r\n”, @”\n”);
System.Windows.Browser.HtmlPage.Window.Eval(“throw new Error(\”Unhandled Error in Silverlight Application “+ errorMsg + “\”);”);
}
catch (Exception){}
}
public static void NavigateToPage(UserControl page)
{
App application = (App) Application.Current;

application.navigationUI.Children.Clear();application.navigationUI.Children.Add(page);

}}}

Step 4

Now create or customize the XAML of Page1 for user interface. It contains three text boxes to get user input. And one Button to navigate to other page.

Page1.Xaml

<UserControl x:Class=”SilverLightNavigation.Page1″
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Width=”auto” Height=”auto”>

<Grid x:Name=”LayoutRoot” Background=”White” Height=”600″ Width=”600″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”*” />

</Grid.ColumnDefinitions>

Grid.RowDefinitions>
<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />
<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<TextBlock x:Name=”lblUname” Grid.Column=”0″ Grid.Row=”0″ Text=”UserName” />

<TextBox x:Name=”txtUname” Grid.Column=”1″ Grid.Row=”0″ Height=”50″ Width=”150″ />

<TextBlock x:Name=”lblNum1″ Grid.Column=”0″ Grid.Row=”1″ Text=”Number1″ />

<TextBox x:Name=”txtNum1″ Grid.Column=”1″ Grid.Row=”1″ Height=”50″ Width=”150″ />

<TextBlock x:Name=”lblNum2″ Grid.Column=”0″ Grid.Row=”2″ Text=”Number2″ />
<TextBox x:Name=”txtNum2″ Grid.Column=”1″ Grid.Row=”2″ Height=”50″ Width=”150″ />
<Button x:Name=”btnNavigate” Content=”Click me For Navigation and Result” Height=”100″ Width=”300″ Grid.Column=”0″ Grid.Row=”3″ Click=”btnNavigate_Click/>
</Grid>
</UserControl>

 Step 5:

On the click event of button

Create instance of current applicationCall the static method to navigate to other page.
Page1.Xaml.cs

 

 namespace SilverLightNavigation
{
public partial class Page1 : UserControl
{
public Page1()
{
InitializeComponent();
}
private void btnNavigate_Click(object sender, RoutedEventArgs e)
{

App application = (App)Application.Current;

application.Name = txtUname.Text;
application.Number1 = Convert.ToInt32(txtNum1.Text);

application.Number2 = Convert.ToInt32(txtNum2.Text);


App.NavigateToPage(newPage2());
}}}

 Step 6:
Now create or customize the XAML of Page2 to display the result and User name. it contains two labels. One to display user name, and other two display sum of two numbers. This page also contains one Button to navigate to previous page.
Page2.Xaml

<UserControl x:Class=”SilverLightNavigation.Page2″
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Width=”auto” Height=”auto”>

<Grid x:Name=”LayoutRoot” Background=”White” Height=”500″ Width=”600″>

<Grid.RowDefinitions>

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<TextBlock x:Name=”txtUserDisplay” Grid.Row=”0″ Text=”Welcome to Navigated Page ” />
<TextBlock x:Name=”txtResult” Grid.Row=”1″Text=”Sumation of two Numbers = ” />

<Button x:Name=”btnNavigateback” Grid.Row=”2″ Height=”100″ Width=”200″ Content=”Navigate to back Page” Click=”btnNavigateback_Click” />
</Grid>
</UserControl>

Step 7

Add below code in code behind to display user name and summation of two numbers. Also add below code to navigate to previous page.

Page2.Xaml.cs

 

 namespace SilverLightNavigation
{
public partial class age2 : UserControl
{
public Page2(){
InitializeComponent();
App application = (App)Application.Current;
txtUserDisplay.Text = txtUserDisplay.Text + application.Name;
int res = application.Number1 + application.Number2 ;
txtResult.Text = txtResult.Text + res.ToString();
}
private  vid btnNavigateback_Click(object sender, RoutedEventArgs e)
{
App.NavigateToPage(newPage1());
}}}

Press F5 to run with debugging and test your application. In this article, we saw how to navigate between two Silver Light pages and pass value in between them. Happy coding

Advertisements

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