One of best appreciated features of ASP.NET version 2 was the master page concept. There is no reason a Silverlight application could not benefit from master pages. So, let's see how to implement master pages in Silverlight : similar capabilities though different implementation.
Our first implementation will be basic but we will improve it in forthcoming posts.
A master page is a web page (here a Silverlight page) that consists of fixed parts and one (or more) content area. The content area can be changed, for instance following an action on a menu item.
In the following Silverlight application, the master page is made of a layer at the top (with an animated text), a menu (left part) and a status bar (bottom part). In the content area, it's possible to display (at one time) one of two XAML pages. We will show how to switch content in the content area and how to pass information from one XAML content page to another one.
Everything here is kept simple since our goal is just to present the master page concept applied to Silverlight. For your information, the background image in the first content page is a painting from Alfred Sisley while the background image in the second content page is a painting from Claude Monet.
Project / source code
The master page (
Page.xaml) is implemented as a 3-row grid : a canvas (with animated text) in the first row, the menu (in a vertical StackPanel) + content area the second row and the status bar in the third row :
<Grid x:Name="LayoutRoot" Background="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
.....
<Canvas x:Name="animatedText" Grid.Row="0" >
.....
</Canvas>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
.....
</StackPanel>
<Grid x:Name="PageContainer" Grid.Column="1" />
</Grid>
<TextBlock x:Name="stBar" Grid.Row="2" Text="This is the status bar"
VerticalAlignment="Center" />
</Grid>
The two content pages are created as normal Silverlight user controls :
Page1.xaml and
Page2.xaml. In these two Silverlight pages, we added some common controls, to make these pages more realistic. These three XAML files (
Page.xaml for the master page and
Page1.xaml and
Page2.xaml for the content pages) are part of the same project. There are thus included in the same XAP file.
In the
Page.xaml.cs file, we declare two properties, corresponding to the two content pages :
public Page1 page1 { get; set; }
public Page2 page2 { get; set; }
These two properties are initialized in the
Page constructor. Page1 is then set as the initial content page :
public Page()
{
InitializeComponent();
page1 = new Page1();
page2 = new Page2();
PageContainer.Children.Add(page1);
}
To make
Page2 the current content page (thus to switch content page), we write :
SwitchToPage(page2);
with
SwitchToPage which is (additionally, we display a message in the status bar) :
public void SwitchToPage(UserControl p)
{
Page masterPage = Application.Current.RootVisual as Page;
UserControl currentPage = masterPage.PageContainer.Children[0] as UserControl;
if (currentPage != p)
{
masterPage.PageContainer.Children[0] = p;
stBar.Text = "At " + DateTime.Now.ToLongTimeString() + ", switch to page named " + p.Name;
}
}
To give a name to a content page, we just add a
Name property in the
UserControl tag.
To pass information from a content page to the master page or another content page, different solutions are possible. One of them consists in storing this information as a ressource. For instance, to initialize a field named
InfoPage1 somewhere in
Page1.xaml.cs :
Resources.Remove("InfoPage1");
Resources.Add("InfoPage1", "new value of InfoPage1");
To read this information from another content page :
Page p = Application.Current.RootVisual as Page;
string s = p.page1.Resources["InfoPage1"] as string;
To switch to Page1 directly from Page2, we would write :
Page p = Application.Current.RootVisual as Page;
p.SwitchToPage(p.page1);
In the next posts, we will improve the page switching mechanism. See you soon.
Subscribe