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, multi page silverlight application, silverlight multi page, silverlight multipage, silverlight page switcher, PageSwitcher silverlight, silverlight Switcher, silverlight next page, multi-page Silverlight application, silverlight pageswitcher, multiple pages in silverlight, page switcher in silverlight, how to navigate from one xaml page to another xaml page in silverlight, silverlight application multiple page, multipage application in silver light 4, multipage application in silverlight, designing multipage silverlight application, silverlight goto page, silverlight multi-page application, multipage silverlight application, ISWITCHABLE SILVERLIGHT, multi-page applications in silverlight, silverlight multi page applications, buliding multiple page silverlight application in asp net codeproject, how to use multiple xaml page in silverlight, silverlight multiple page, how to create multiple page silverlight application, add user control to page xaml in silverlight, multi page silverlight, silverlight application with multiple pages, silverlight page usercontrol, multi-page Silverlight app, silverlight xaml switch pages samples c, silverlight application programming multi pages, silverlight click switch to page, multiple page silverlight 4, go to page silverlight, silverlight multiple xaml in single page, how to nevigate from one page to user control in silverlight, how to create multipage silverlight application, silverlight page navigation animation, silverlight switch usercontrol, how to create multiple page in silverlight application, silverlight switch page, Multi pages in Silverlight Applications Codeproject, How to create multiple pages in silverlight, programmatically navigate to another xaml in silverlight navigation project, changing pages in silverlight programmatically, working with multiple page in silverlight, multi page application in silverlight, adding user control in silverlight page, navigate from one usercontrol xaml to another user control xaml, silverlight multi xaml, programmatically navigate silverlight, page to page in silverlight, application multi pages silverlight 4, wpf iswitchable, silverlight multi usercontrol, silverlight multiple xaml pages, multi page xaml, Iswitchable cs, Implementing Multi pages in Silverlight Applications, multiple usercontrol in xaml silverlight, Implementing Multi pages in Silverlight Applications\, silverlight iswitchable, create a multipage silverlight, multi page application silverlight, silverlight goto new page, silverlight multi page application navigation, silverlight goto page xaml, silverlight goto, silverlight login windows on multipage app, silverlight multiple navigation page, Silverlight how to navigate to a page from usercontrol, Silverlight ISwitchable cs, silverlight layoutroot switchcontrol, silverlight login, PageSwitcher UserControl, silverlight goto xaml page, silverlight goto page2 xaml, silverlight login navigation, silverlight in vs2010 navigation from page to page, silverlight login page example, silverlight go to page2, silverlight go to page, open multiple page in silverlight, run multiple xaml pages in silverlight, show multiple silverlight applications, silverlight 4 0 multi page application, silverlight 4 custom control multiple pages, silverlight 4 muli-page application, silverlight 4 multiple pages, silverlight 4 navigate from usercontrol to page, silverlight 4 programmatically page navigation, public void navigate(usercontrol nextpage), programmatically navigate pages in silverlight, print user control content in silverlight multiple pages, page navigation animation in silverlight, page switch control silverlight
