How to switch Silverlight UserControls

March 11, 2008 – 10:26 pm

One of the guys on the official Silverlight community forums posted an interesting question, namely how does one change the currently visible UserControl in a Silverlight 2.0 application. To put things in context the new Silverlight 2.0 project template creates two classes for you: a System.Windows.Application derived class named App with the associated App.xaml and App.xaml.cs files; as well as a System.Windows.Controls.UserControl derived class called Page with the associated Page.xaml and Page.xaml.cs files.

The App class takes care of the initialization and basically you assign a new instance of your Page class to the App.RootVisual property and through the power of Silverlight it appears on your screen.

So if you wanted to change the currently displayed UserControl for another instance naturally you’d try and set the App.RootVisual property to another instance of a UserControl. This sounds great in theory but it seems that its a single assignment property. Pete Brown’s blog post happens to make mention of this.

So in a quest to solve the problem I’ve implemented a very simple UserControlContainer class that allows the developer to switch controls at runtime without having to deal with the set once RootVisual property.

Simply create a new UserControl called UserControlContainer and copy the following into the UserControlContainer.xaml.cs file:

    public void SwitchControl(UserControl newControl)
    {
        LayoutRoot.Children.Clear();
        if (newControl != null)
        {
            Height = newControl.Height;
            Width = newControl.Width;
            LayoutRoot.Children.Add(newControl);
        }
    }

Next set your Application instance RootVisual to an instance of the new UserControlContainer in the Application_Startup method.

    private void Application_Startup(object sender, StartupEventArgs e)
    {
        // Load the main control
        this.RootVisual = new UserControlContainer();
        Page page = new Page();
        ((UserControlContainer)this.RootVisual).SwitchControl(page);
    }

Then wherever you need to switch out the active control, simply call the following if you are inside App.xaml.cs:

    TestControl1 testControl = new TestControl1();
    ((UserControlContainer)this.RootVisual).SwitchControl(testControl);

Or the following if you need to switch controls from elsewhere:

    TestControl1 testControl = new TestControl1();
    ((UserControlContainer)Application.Current.RootVisual).SwitchControl(testControl);

If you find this useful or find any issues with this method, let me know so I can improve it for all.

Updated 2008-03-13: Added Application_Startup example. Thanks to Maurice for pointing this omission out.

2 Responses to “How to switch Silverlight UserControls”
You might want to add the following piece of code to your post to document how to make this run:

private void Application_Startup(object sender, StartupEventArgs e)
{
// Load the main control

this.RootVisual = new UserControlContainer();
Page p = new Page();
((UserControlContainer)this.RootVisual).SwitchControl(p);
}

By MauriceD on Mar 13, 2008
@MauriceD: Thanks I’ll update accordingly.

By Craig Nicholson on Mar 13, 2008

CraigN.NET