Inténtelo: cargar una nueva página dinámicamente en la aplicación de Silverlight

Hay varias formas de cargar contenido dinámicamente en una aplicación Microsoft Silverlight. En este procedimiento se crean objetos para páginas de contenido y, a continuación, se carga uno de ellos con el fin de mostrar el contenido cuando el usuario hace clic en un botón. Puede encontrar otras soluciones en la documentación de Silverlight  en MSDN y en el sitio web de la comunidad de Silverlight  (pueden estar en inglés).

Para cargar una página en tiempo de ejecución

1. En un proyecto de Silverlight que tenga varias páginas de contenido, abra la página de inicio (normalmente Page.xaml). En este procedimiento, se supone que tiene dos páginas de contenido denominadas UserControl1.xaml y UserControl2.xaml.

   Sugerencia:
   Para agregar nuevas páginas de contenido, haga clic en Nuevo elemento en el menú Archivo.

2. En el panel Herramientas, haga clic en el botón Activos  y, a continuación, seleccione el panel de diseño Border. Dibuje un objeto de borde en la mesa de trabajo con el mouse.

   

   Sugerencia:
   Mientras esté seleccionado el nuevo objeto borde, puede cambiar su apariencia; para ello establezca propiedades en Pinceles y Apariencia del panel Propiedades. Por ejemplo, puede establecer la propiedad BorderBrush en Pincel de color sólido  y establecer la propiedad BorderThickness en 2 .

3. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto [Border], seleccione Cambiar nombre y, a continuación, cambie el nombre del objeto a PageContainer para que más adelante pueda hacer referencia a este objeto en el archivo de código subyacente.

4. En el panel Objetos y escala de tiempo, haga clic en el objeto LayoutRoot para convertirlo en el objeto activo. Aparece un borde amarillo alrededor de LayoutRoot y cualquier objeto nuevo que dibuje en la mesa de trabajo será un elemento secundario de LayoutRoot.

5. En el panel Herramientas, haga clic en Button  y, a continuación, dibuje un botón en la mesa de trabajo fuera del objeto PageContainer.

   Sugerencia:
   Después de dibujar un control que muestre un texto, puede modificar el texto; para ello presione F2 para pasar al modo de edición de texto. Para salir del modo de edición de texto, presione ESC.

6. En el panel Objetos y escala de tiempo, seleccione el objeto [Button].

7. En el panel Propiedades, haga clic en Eventos  para cambiar de la vista de propiedades a la vista de eventos.

   Sugerencia:
   Para cambiar del panel Propiedades a la vista de propiedades, haga clic en Propiedades.

8. Haga doble clic en el cuadro de texto situado junto al evento Click . Microsoft Expression Blend genera un nombre ( Button_Click ) para un controlador de eventos al que se llamará cuando el usuario haga clic en el botón en la aplicación en ejecución.

   Expression Blend copia el código del controlador de eventos al Portapapeles y, a continuación, abre el proyecto en Microsoft Visual Studio 2010 si lo ha instalado.

   Si no tiene instalado un editor de código, abra el archivo de código subyacente del control de usuario en un editor de texto y péguelo en el código siguiente:

   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
   

   Para obtener más información acerca de la interoperabilidad de Visual Studio 2010 con Expression Blend, vea Modificar un archivo de código subyacente.

9. Para cambiar entre las dos páginas de contenido que se mostrarán en el objeto de borde PageContainer, cree instancias de las páginas en memoria y, a continuación, en el controlador de eventos, agregue una de las páginas a PageContainer. Por ejemplo, pegue el siguiente código en negrita en el archivo de código subyacente. "UserControl1" y "UserControl2" son los nombres de otras dos páginas de contenido del proyecto.

   Sugerencia:
   Un control de borde sólo puede tener un objeto secundario. En el caso de un control que pueda incluir más de un elemento secundario, como un panel de diseño de cuadrícula (Grid) , el código sería algo diferente.

   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. Pruebe el proyecto (F5) y, a continuación, haga clic en el botón para ver UserControl1 y UserControl2 cargados en el borde de PageContainer.

    

Solución de problemas

• Si obtiene el error "No se puede cambiar el archivo de código subyacente. No se encontró la clase siguiente" al hacer doble clic en el panel Eventos en Expression Blend, es posible que tenga que ir al editor de código externo (normalmente Microsoft Visual Studio) para volver a cargar la solución. La operación de volver a cargar incluirá los nuevos archivos que definen la clase que falta.

• Si obtiene el error "No se puede cargar la solución" en Visual Studio 2010, es posible que no tenga instalado Microsoft Silverlight Tools para Visual Studio 2010 . Instale las herramientas y, a continuación, haga doble clic en el panel Eventos en Expression Blend.

• Si no puede ver el contenido de las páginas cargadas dinámicamente, es posible que el borde PageContainer sea demasiado pequeño para ajustarse al contenido cargado. Intente agrandar el borde PageContainer o establezca las propiedades del diseño en las páginas cargadas dinámicamente en los siguientes valores:

  • Ancho = Auto

  • Alto = Auto

  • Propiedades de Margen: = 0

• Si el botón desaparece cuando hace clic en él, es posible que haya agregado el objeto de botón como un elemento secundario del borde PageContainer en vez de un elemento secundario de LayoutRoot. (El código agregado reemplazará al elemento secundario del objeto de borde PageContainer). En el panel Objetos y escala de tiempo, puede arrastrar el objeto de botón al panel LayoutRoot para moverlo fuera del borde PageContainer.

• Si crea un nuevo objeto para desencadenar la carga de la página (en vez de un botón) y, a continuación, en Expression Blend copia el nombre del controlador de eventos de Button_Click en el nuevo objeto en la vista de eventos  del panel Propiedades, es posible que obtenga un error en el explorador web al probar (F5) el proyecto. Esto puede ocurrir porque una firma incorrecta del controlador de eventos no coincide con el nuevo tipo de objeto. Por ejemplo, la firma de un controlador de eventos Click de un botón es similar a la siguiente:

  private void Button_Click(object sender, RoutedEventArgs e)
  

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

  La firma de un controlador de eventos MouseLeftButtonDown es similar a la siguiente:

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

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

  Para corregir el problema, haga doble clic en el cuadro de texto situado junto al controlador de eventos adecuado en la vista Eventos  del panel Propiedades con el fin de crear un nuevo método con la firma correcta en el archivo de código subyacente.

Pasos siguientes

• Puede encontrar más información acerca de tareas específicas en el sitio web de la comunidad de Silverlight  (puede estar en inglés).

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.