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>

 

Page2Switcher

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.

SwitchToPage1 SwitchToPage2

 

Here's the complete source code

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

10 Responses to Multi-Page Applications in Silverlight

  1. Ivan says:

    Thanks it’s the most simple tile what can find

  2. Bingo says:

    Hi,
    I am trying to create ny bingo game as an online silverlight application and I keep getting this exception. Is there a way to register a name?

  3. rolandomh says:

    hey thks!!! this works in Silverlight 4, and still help me a lot. I was using pages and hyperlink buttons, but this was what i needed.

  4. WebDevHobo says:

    Just ran across this. The explanation is helpful, but sometimes confusing.

    For instance, we’re to add a function to Page.xaml where navigate to the PageSwitcher page, but you only mention that that is the name of one of your pages at point 6.

  5. Seva says:

    Thanks!

  6. Gabriel de Sousa says:

    Thanks, i’m brazilian, i look for all web e don’t find nothing about open a new page in the Silverligh… Your article help me so much…. Sorry the bad english

    • Kumar says:

      Create new Silverlight Application from File –> New –>Project –> Select Silverlight from left pane –> Silverlight Application –> Provide proper name to the application and press ok. Just First application get created…

  7. sandip says:

    i like your vedio on silverlight

  8. Pingback: Multi-Page Application in WPF « Computer Horror

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>