动手试验:在 Silverlight 应用程序中动态加载新网页

Dd185500.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ZH-CN,Expression.30).png

您可以采用多种方式将内容以动态方式加载到 Microsoft Silverlight 应用程序中。在此过程中会创建有关内容页的各个对象,并加载其中的一个对象,以便在用户单击某个按钮时显示相应的内容。您可以在 MSDN 上的 Silverlight documentation(Silverlight 文档)以及 Silverlight community website(Silverlight 社区网站)上找到其他解决方案。

在运行时加载页面

  1. 在包含多个内容页的 Silverlight 项目中,打开启动页(通常为 Page.xaml)。在此过程中,假定您有名为 UserControl1.xaml 和 UserControl2.xaml 的两个内容页。

    Dd185500.alert_tip(ZH-CN,Expression.30).gif提示:

    若要添加新的内容页,请单击“文件”菜单中的“新建项”。

  2. 在“工具”面板中,单击“资产”Dd185500.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-CN,Expression.30).png,然后选择“边框”版式面板 Dd185500.be354518-c54c-4f86-9c57-0b4a9d384b3e(ZH-CN,Expression.30).png。在美工板上用鼠标绘制边框对象。

    Dd185500.b9dabf44-71aa-43cb-b4eb-f020a21b8756(ZH-CN,Expression.30).png

    Dd185500.alert_tip(ZH-CN,Expression.30).gif提示:

    在选中这一新绘制的边框对象的情况下,可以在“属性”面板的“画笔”和“外观”下设置相应的属性以更改此对象的外观。例如,可以将“BorderBrush”属性设置为“纯色画笔” Dd185500.3a66ec96-47bb-47fc-8876-6b9456feec3a(ZH-CN,Expression.30).png,并将“BorderThickness”属性设置为 2。

  3. 在“对象和时间线”面板中,右键单击“[Border]”对象,然后选择“重命名”将其名称更改为“PageContainer”,以便稍后在代码隐藏文件中引用此对象。

  4. 在“对象和时间线”面板中,单击“LayoutRoot”对象,使其成为活动对象。此时,“LayoutRoot”将带有黄色边框,而且您在美工板上新绘制的所有对象都将成为“LayoutRoot”的子对象。

  5. 在“工具”面板中,单击“按钮”Dd185500.05df1779-a68f-436b-b834-a91b7995a3ec(ZH-CN,Expression.30).png,然后在美工板上“PageContainer”对象的外侧绘制一个按钮。

    Dd185500.alert_tip(ZH-CN,Expression.30).gif提示:

    在绘制了显示文本的控件后,您可以按 F2 进入文本编辑模式来修改所显示的文本。若要退出文本编辑模式,请按 ESC。

  6. 在“对象和时间线”面板中,选择“[Button]”对象。

    Dd185500.ac4d8215-e9b1-4fbe-b6f4-5b09785971a9(ZH-CN,Expression.30).png

  7. 在“属性”面板中,单击“事件”Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-CN,Expression.30).png 以从属性视图切换至事件视图。

    Dd185500.alert_tip(ZH-CN,Expression.30).gif提示:

    若要从“属性”面板切换回属性视图,请单击“属性”Dd185500.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ZH-CN,Expression.30).png

  8. 双击 Click 事件旁边的文本框。Microsoft Expression Blend 便可生成事件处理程序的名称 (Button_Click),当用户在所运行的程序中单击该按钮时将会调用此事件处理程序。

    Dd185500.ebf76e43-de7e-4e55-8729-529a774e3d95(ZH-CN,Expression.30).png

    如果您安装了 Microsoft Visual Studio 2008,Expression Blend 便会将此事件处理程序的代码复制到“剪贴板”中,然后在此应用程序中打开您的项目。

    如果您未安装代码编辑器,便会在文本编辑器中打开与用户控件相关的代码隐藏文件,并粘贴下列代码:

    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
    

    有关 Visual Studio 2008 与 Expression Blend 的互操作性的详细信息,请参阅修改代码隐藏文件

  9. 若要在“PageContainer”边框对象中所要显示的两个内容页之间进行切换,请在内存中创建这两个页面的实例,然后在事件处理程序中将其中一个页面添加到“PageContainer”中。例如,将下列粗体显示的代码粘贴到代码隐藏文件中。“UserControl1”和“UserControl2”是项目中的其他两个内容页的名称。

    Dd185500.alert_tip(ZH-CN,Expression.30).gif提示:

    边框控件只能拥有一个子对象。对于可能包含多个子对象的控件(例如“网格”版式面板 Dd185500.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ZH-CN,Expression.30).png),代码将会略有不同。

    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. 对项目进行测试 (F5),然后单击按钮来观察加载到“PageContainer”边框中的 UserControl1 和 UserControl2。

    Dd185500.635377b3-9d34-40f7-89c4-c743582d38e5(ZH-CN,Expression.30).png

疑难解答

  • 如果您在 的“事件”面板中双击时,遇到“无法更改代码隐藏文件。找不到下列类”错误,则可能需要切换至外部代码编辑器(通常为 Microsoft Visual Studio)来重载该解决方案。重新加载后便会加入定义缺失类的新文件。

  • 如果您在 Visual Studio 2008 中遇到“无法加载该解决方案”错误,则可能尚未安装 Microsoft Silverlight Tools for Visual Studio 2008(适用于 Visual Studio 2008 的 Microsoft Silverlight 工具)。安装相关工具,然后尝试在 Expression Blend 的“事件”面板中双击。

  • 如果看不到动态加载页的内容,可能是“PageContainer”边框过小容不下所有的加载内容。尝试加大“PageContainer”边框,或者按照下列设置来设置动态加载页中的布局属性:

    • “Width”= Auto

    • “Height”= Auto

    • “Margin”属性 = 0

  • 如果在您单击按钮时并未显示按钮,您可能是将该按钮对象添加为“PageContainer”的子对象,而不是“LayoutRoot”的子对象。(您所添加的代码将取代“PageContainer”边框对象的子对象。)在“对象和时间线”面板中,您可以将该按钮对象拖到“LayoutRoot”面板中,将其移出“PageContainer”边框。

  • 如果您创建新的对象来触发页面加载(而不是按钮对象),并在 Expression Blend 中将 Button_Click 事件处理程序的名称复制到“属性”面板的“事件”视图 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-CN,Expression.30).png 中的新对象,当您测试 (F5) 项目时可能会在 Web 浏览器中遇到错误。这可能是由事件处理程序的签名不对,与新建对象的类型不匹配造成的。例如,按钮 Click 的事件处理程序所对应的签名类似下面这样:

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

    MouseLeftButtonDown 事件处理程序的签名类似下面这样:

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

    您可以采取以下方式来解决此问题:在“属性”面板的“事件”视图 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-CN,Expression.30).png 中,双击位于相应的事件处理程序旁边的文本框,以在代码隐藏文件中使用正确的签名来创建新的方法。

后续步骤