Try it: Load a new page dynamically in your Silverlight application

You can dynamically load content in many ways in a Microsoft Silverlight 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 project that has multiple content pages, open the startup page (typically Page.xaml). For this procedure, 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 Tools panel, click Assets , 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. In the Objects and Timeline panel, right-click the [Border] object, select Rename, and then change the name of the object to PageContainer, so you can refer to this object in the code-behind file later.

4. In the Objects and Timeline panel, 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 Tools panel, 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. In the Objects and Timeline panel, select the [Button] object.

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

   Tip

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

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

   Blend copies the code for the event handler to the Clipboard, and then opens your project in Microsoft Visual Studio 2010 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 2012 interoperability with Blend, see Modify a code-behind file.

9. To switch between the 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 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 2012, you might not have the Microsoft Silverlight 5 SDK installed. Install the tools and then try to double-click in the Events panel in 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.) In the Objects and Timeline panel, 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 Blend, you copy the name of the Button_Click event handler to the new object in the 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 the 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 more information about specific tasks on the Silverlight community website.