Export (0) Print
Expand All

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

Dd185500.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.40).png

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 Dd185500.xtlink_newWindow(en-us,Expression.40).png on MSDN, and on the Silverlight community website Dd185500.xtlink_newWindow(en-us,Expression.40).png.

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 noteTip

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

  2. In the Tools panel, click Assets Dd185500.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.40).png, and then select the Border layout panel Dd185500.be354518-c54c-4f86-9c57-0b4a9d384b3e(en-us,Expression.40).png. Draw a border object on the artboard using your mouse.

    Dd185500.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,Expression.40).png
    tip noteTip

    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 Dd185500.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.40).png, 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 Dd185500.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.40).png, and then draw a button on the artboard outside the PageContainer object.

    tip noteTip

    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 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(en-us,Expression.40).png to switch from the properties view to the events view.

    tip noteTip

    To switch the Properties panel back to the properties view, click Properties Dd185500.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.40).png.

  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 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 2010 interoperability with Expression 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 noteTip

    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 Dd185500.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(en-us,Expression.40).png, 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.

    Dd185500.635377b3-9d34-40f7-89c4-c743582d38e5(en-us,Expression.40).png

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 2010, you might not have the Microsoft Silverlight Tools for Visual Studio 2010 Dd185500.xtlink_newWindow(en-us,Expression.40).png 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.) 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 Expression Blend, you copy the name of the Button_Click event handler to the new object in the Events view Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(en-us,Expression.40).png 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 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(en-us,Expression.40).png of the Properties panel to create a new method with the correct signature in the code-behind file.

Next steps

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft