Multi-Page Applications in Silverlight

I wanted to build a multi-page (Search - Results) application when I realized that isn't really our model. Fortunately, I wrote to Ashish Shetty , who combines enormous knowledge with enormous kindness, and even though he is in the middle of blogging about this, he agreed that I could blog about it as well. Since I will be creating an HDI Video on this as one of my first Beta 2 videos (RSN) and since I think his solution is wicked cool, here is how you do it

1. Create a new Silverlight 2 project in Visual Studio , (I named mine, MultiPage).

2. You want to have at least three pages. Let's use the default Page.xaml as the first. Add any content you like but  but include a button with a name and set the content to something like "Switch"

3. Right click on the project and click Add New Item, and add a second User Control. Name the new user control anything you want and give it any content you want. I'll call mine Page2.xaml and give it content to make it distinct: 

<UserControl x:Class="MultiPage.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Beige">
        <StackPanel Orientation="Horizontal">
        <TextBlock Text="This is Page2" FontFamily="Comic Sans MS" 
            FontSize="48" VerticalAlignment="Center" />
        <Button x:Name="SwitcherooButton" Content="Switcheroo" 
            Height="40" Width="80" 
            Background="Red" FontSize="14" 
            Margin="20,0,0,0" />
        </StackPanel>
    </Grid>
</UserControl>

Note that again I have a button for switching pages.

Here is where the magic happens

4. Add a third page (I named mine PageSwitch.xaml.)  Put nothing in the xaml file, because the content will be the page you want to display,  but in the code-behind file add this method:

public void Navigate(UserControl nextPage)
{
    this.Content = nextPage;
}

5. Wire up the buttons on all of your pages to invoke the Navigate method, passing in the page you want to navigate to.

So, in Page.xaml.cs you'll add this code,

public Page()
{
    InitializeComponent();
    SwitchButton.Click +=
          new RoutedEventHandler(SwitchButton_Click);
}
 

void SwitchButton_Click(object sender, RoutedEventArgs e)
{
    PageSwitcher ps = this.Parent as PageSwitcher;
    ps.Navigate(new Page2());
}

6. Finally, in App.xaml.cs change the startup page from Page.xaml to PageSwitcher.xaml,

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

What's Going On Here??

The way this all works is that when your program starts, the opening page is now PageSwitcher whose content is blank, but whose constructor sets it to whatever you want your first page to be (in this example,  Page.xaml.)  Since all pages are actually user controls, they work fine as the content of a page.

When you click the switch button, you find the parent of your page which is the PageSwitcher page and that has a Navigate method that you invoke, passing in the page you want to navigate to. In this case, we're hardwiring the change, but it wouldn't be hard to make that value be more dynamic.

Navigate causes the PageSwitcher page to change its contents from whichever page it is currently displaying to whichever page you ask it to display, and the garbage collector cleans up the old.

(If you need to keep old values around between switches, create both pages and don't call new, but that will use more memory, or stash the values you need inside member variables of PageSwitcher -- more on that when I do a video on this approach).

It is a very cool, very fast effect switching from one page to the other.

Here's the complete source code