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
Related Posts:
