There are a number of ways of implementing a multi-page Silverlight 2.0 application.
Let’s begin by creating a new Silverlight application in Visual Studio (allowing it to create an ASP.NET Web Application Project) named SilverlightNavigation
Notice that Visual Studio creates one page, Page.xaml for you by default and that Page.xaml is a UserControl (you can see that by looking at the xaml view of Page.xaml).
Add PageSwitcher.xaml as you would any other UserControl, but once it is created, take out the grid that Visual Studio creates for you and change the width and height of the UserControl to 300 x 300.
<UserControl x:Class="SilverlightNavigation.PageSwitcher"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300">
<Grid x:Name="LayoutRoot" Background="AliceBlue">
</Grid>
</UserControl>
This is the one UserControl that you will leave empty, because we will fill it programmatically with the contents of other pages as we go. It is, in essence, the vessel into which we’ll be pouring each page we want to view.
The core of PageSwitcher.xaml.cs is an overloaded Navigate method that takes either a UserControl or a UserControl and an object.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightNavigation
{
public partial class PageSwitcher : UserControl
{
public PageSwitcher()
{
InitializeComponent();
}
// 1st overload
public void Navigate(UserControl nextPage)
{
this.Content = nextPage;
}
// 2nd overload
public void Navigate(UserControl nextPage, object state)
{
this.Content = nextPage;
ISwitchable s = nextPage as ISwitchable;
if (s != null)
{
s.UtilizeState(state);
}
else
{
throw new ArgumentException("nextPage is not ISwitchable! " + nextPage.Name.ToString());
}
}
}
}
The interface is just a promise that any class implementing the interface will implement UtilizeState. UtilizeState is a method that takes an object and returns void.
using System;
namespace SilverlightNavigation
{
public interface ISwitchable
{
void UtilizeState(object state);
}
}
You create the interface by telling visual studio you want to create a new class named ISwitchable.cs and then replacing the class that it creates for you with the interface code shown.
Before we go any further, we must update App.xaml.cs. Please replace the contents of Application_Startup with the following four lines of code.
private void Application_Startup(object sender, StartupEventArgs e)
{
PageSwitcher pageSwitcher = new PageSwitcher();
this.RootVisual = pageSwitcher;
Switcher.pageSwitcher = pageSwitcher;
Switcher.Switch(new Page());
}
Let’s create a very simple body for both Page.xaml and Page2.xaml to test the mechanism we’ve created.
In Page, add the following Page.xaml
<UserControl x:Class="SilverlightNavigation.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300">
<Grid x:Name="LayoutRoot" Background="AliceBlue">
<TextBlock Text="Page1" FontSize="18" HorizontalAlignment="Center" />
<Button x:Name="ButtonPage1" Content="Go To Page2" FontSize="18" Width="125" Height="50" />
</Grid>
</UserControl>
You’ll navigate to this new instance of Page2 through the static Switch method of the Switcher class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightNavigation
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
ButtonPage1.Click += new RoutedEventHandler(ButtonPage1_Click);
}
void ButtonPage1_Click(object sender, RoutedEventArgs e)
{
Switcher.Switch(new Page2());
}
}
}
In Page, add the following 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="300" Height="300">
<Grid x:Name="LayoutRoot" Background="AliceBlue">
<TextBlock Text="Page2" FontSize="18" HorizontalAlignment="Center" />
<Button x:Name="ButtonPage2" Content="Go To Page1" FontSize="18" Width="125" Height="50" />
</Grid>
</UserControl>
And Page2.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightNavigation
{
public partial class Page2 : UserControl
{
public Page2()
{
InitializeComponent();
ButtonPage2.Click += new RoutedEventHandler(ButtonPage2_Click);
}
void ButtonPage2_Click(object sender, RoutedEventArgs e)
{
Switcher.Switch(new Page());
}
}
}
Result
Incoming search terms for the article:
silverlight multi page application, silverlight multiple pages, silverlight multi page, multi page silverlight application, silverlight page switcher, silverlight multipage, multi-page Silverlight application, silverlight Switcher, PageSwitcher silverlight, silverlight pageswitcher, page switcher in silverlight, how to navigate from one xaml page to another xaml page in silverlight, silverlight application multiple page, buliding multiple page silverlight application in asp net codeproject, silverlight multi-page application, multipage application in silver light 4, multipage silverlight application, designing multipage silverlight application, multiple pages in silverlight, silverlight next page, silverlight multiple page, ISWITCHABLE SILVERLIGHT, how to use multiple xaml page in silverlight, multi page silverlight, how to create multiple page silverlight application, multipage application in silverlight, silverlight multi page applications, silverlight goto page, add user control to page xaml in silverlight, multiple usercontrol in xaml silverlight, how to nevigate from one page to user control in silverlight, silverlight application with multiple pages, silverlight application programming multi pages, silverlight multi usercontrol, page to page in silverlight, programmatically navigate to another xaml in silverlight navigation project, how to create multiple page in silverlight application, how to create multipage silverlight application, Implementing Multi pages in Silverlight Applications, silverlight multiple xaml pages, silverlight multi xaml, Multi pages in Silverlight Applications Codeproject, multi page application silverlight, multi page application in silverlight, multi-page applications in silverlight, programmatically navigate silverlight, multi page xaml, silverlight multiple xaml in single page, silverlight click switch to page, Iswitchable cs, silverlight switch usercontrol, silverlight xaml switch pages samples c, application multi pages silverlight 4, working with multiple page in silverlight, navigate from one usercontrol xaml to another user control xaml, Implementing Multi pages in Silverlight Applications\, utilizestate(object state), void UtilizeState(object state);, silverlight goto page2 xaml, silverlight goto page xaml, what is multi page application in silverlight, what is silverlight user control application class and page, silverlight go to page2, silverlight go to page, silverlight example multipage application, silverlight embed usercontrol in page, silverlight display multiple pages, Silverlight how to navigate to a page from usercontrol, silverlight in vs2010 navigation from page to page, silverlight iswitchable, silverlight multi page business app, silverlight multi page application using vs 2010, silverlight multi page application navigation, using multiple usercontrol in one xaml, using silverlight control in multi application, UtilizeState, silverlight login windows on multipage app, silverlight login page example, silverlight login navigation, utilizeState silverlight, utilizestate wpf, silverlight login, what is the namespace of PageSwitcher?, which namespace will use navigate one page to another page in silverlight, silverlight applications multiple user controls, silverlight add user control to page, silverlight add multiple page to a single page, silverlight 4 programmatically page navigation, silverlight 4 navigate from usercontrol to page, silverlight 4 multiple pages, silverlight 4 muli-page application, silverlight 4 0 multi page application, wpf multi page application, wpf UtilizeState, show multiple silverlight applications, xaml and multiple xaml cs, public void navigate(usercontrol nextpage), silverlight add usercontrol to page, silverlight animate go from page to page, silverlight animation switch page
