Load a new page dynamically in your Silverlight 2 application

You have many ways to dynamically load content in a Silverlight 2 application. This procedure creates objects for content pages and then loads one of the objects to display the content when a user clicks a button. You can find other solutions in the Silverlight documentation on MSDN, and on the Silverlight community website.

To load a page at runtime

1. In a Silverlight 2 project that has multiple content pages, open the startup page (typically Page.xaml). For this tutorial, assume that you have two content pages named UserControl1.xaml and UserControl2.xaml.

   Tip

   To add new content pages, click New Item on the File menu.

2. In the Toolbox, click the Asset Library  button, and then select the Border  layout panel. Draw a border object on the artboard using your mouse.

   

   Tip

   While the new border object is selected, you can change its appearance by setting properties under Brushes and Appearance in the Properties panel. For example, you can set the BorderBrush property to a Solid color brush , and set the BorderThickness property to 2.

3. Under Objects and Timeline, right-click the [Border] object, select Rename, and then change the name of the object to PageContainer. This lets you refer to this object in the code-behind file later.

4. Under Objects and Timeline, double-click the LayoutRoot object to make it the active object. A yellow border appears around the LayoutRoot, and any new object you draw on the artboard will become a child of LayoutRoot.

5. In the Toolbox, click Button , and then draw a button on the artboard outside the PageContainer object.

   Tip

   After you draw a control that displays text, you can modify the text by pressing F2 to enter text-editing mode. To exit text-editing mode, press ESC.

6. Under Objects and Timeline, select the [Button] object.

   

7. In the Properties panel, click the Events  button to switch from the properties view to the events view.

   Tip

   To switch the Properties panel back to the properties view, click the Properties  button.

8. Double-click the text box next to the Click event. Microsoft Expression Blend generates a name (Button_Click) for an event handler that will be called when the user clicks the button in your running application.

   

   Expression Blend copies the code for the event handler to the Clipboard, and then opens your project in Microsoft Visual Studio 2008 if you have it installed.

   If you do not have a code editor installed, open the code-behind file for the user control in a text editor and paste in the following code:

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   
   End Sub
   

   For more information about Visual Studio 2008 interoperability with Expression Blend, see Edit a code-behind file.

9. To switch between your two content pages that will be displayed in the PageContainer border object, create instances of the pages in memory, and then, in the event handler, add one of the pages to the PageContainer. For example, paste the following bold code into your code-behind file. "UserControl1" and "UserControl2" are the names of two other content pages in your project.

   Tip

   A border control can have only one child object. For a control that could contain more than one child, such as a Grid  layout panel, the code would differ slightly.

   private UserControl1 uc1 = new UserControl1();private UserControl2 uc2 = new UserControl2();private bool atUC2 = false;
   
   private void Button_Click(object sender, RoutedEventArgs e)
   {
     if (atUC2)  {    this.PageContainer.Child = uc1;  }  else  {    this.PageContainer.Child = uc2;  }  atUC2 = !atUC2;
   }
   

   Private uc1 As UserControl1 = New UserControl1()Private uc2 As UserControl2 = New UserControl2()Private atUC2 As Boolean = False
   
   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
     If atUC2 Then    Me.PageContainer.Child = uc1  Else    Me.PageContainer.Child = uc2  End If  atUC2 = Not atUC2
   End Sub
   

10. Test your project (F5), and then click your button to see UserControl1 and UserControl2 loaded into the PageContainer border.

    

Troubleshooting

• If you get the error "Cannot change the code-behind file. The following class was not found" when you double-click in the Events panel in Expression Blend, you may have to switch to your external code editor (typically Microsoft Visual Studio) to reload the solution. Reloading will include the new files that define the missing class. If you get the error "Cannot load the solution" in Visual Studio 2008, you might not have the Microsoft Silverlight Tools for Visual Studio 2008 installed. Install the tools and then try to double-click in the Events panel in Expression Blend.

• If you cannot see the content of your dynamically loaded pages, the PageContainer border might be too small to fit all the loaded content. Try to make the PageContainer border larger, or set the layout properties in the dynamically loaded pages to the following settings:

  • Width = Auto

  • Height = Auto

  • Margin properties = 0

• If your button disappears when you click it, you might have added the button object as a child of the PageContainer border instead of as a child of LayoutRoot. (The code that you added will replace the child of the PageContainer border object.) Under Objects and Timeline, you can drag the button object to the LayoutRoot panel to move it out of the PageContainer border.

• If you create a new object to trigger the page load (instead of a button), and then in Expression Blend copy the name of the Button_Click event handler to the new object in Events  view of the Properties panel, you might get an error in your web browser when you test (F5) your project. This may be caused by an incorrect signature for the event handler that does not match the new object type. For example, the signature for a button Click event handler resembles the following:

  private void Button_Click(object sender, RoutedEventArgs e)
  

  Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  

  The signature for a MouseLeftButtonDown event handler resembles the following:

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

  Private Sub Path_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
  

  You can fix this issue by double-clicking in the text box next to the correct event handler in Events  view of the Properties panel to create a new method with the correct signature in the code-behind file.

Next steps

• You can find other how-tos and videos about specific tasks on the Silverlight community website.