Cambiar estados en respuesta a una interacción del usuario

Al crear su propio control de usuario, puede agregar estados y grupos de estados para cambiar la apariencia del control de usuario dependiendo del estado en que éste se encuentre. Para cambiar estos estados en respuesta a una interacción del usuario (por ejemplo, hacer clic con el mouse), puede agregar métodos de controlador de eventos para llamar al método GoToState.

Para obtener más información, vea VisualStateManager GoToState (Método) en MSDN.

[!NOTA]

En un proyecto de Microsoft Silverlight, al modificar la plantilla de un control del sistema, como un botón, los estados predeterminados ya están definidos, además de la respuesta del control a la interacción del usuario. Los estados predeterminados no se pueden agregar ni quitar. No obstante, puede cambiar la apariencia del control en esos diferentes estados y usar el siguiente procedimiento para cambiar los estados.

Para cambiar los estados en respuesta a un clic

Para cambiar los estados, puede usar el comportamiento GoToStateAction, o bien usar un método de control de eventos.

Para obtener información acerca del uso de comportamientos, vea Agregar un control de comportamiento a un objeto.

El procedimiento siguiente muestra cómo agregar un método de control de eventos para cambiar un estado.

1. Si todavía no ha creado estados y grupos de estados, puede definir diferentes estados visuales y transiciones para un control de usuario. Por ejemplo, en la siguiente imagen se muestra un control de usuario que representa una carta de una baraja. El grupo de estados SideDisplayed incluye un estado que muestra la carta cara arriba (FaceUp) y un estado que muestra la carta cara abajo (FaceDown).

   Para obtener más información, vea Definir estados visuales y tiempos de transición diferentes en un control de usuario.

   

2. En Estados, seleccione Base para desactivar la grabación del estado.

3. En el panel Objetos y escala de tiempo, seleccione el objeto [UserControl] para enlazar un evento que responderá a la acción sobre la superficie de todo el control de usuario.

4. 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.

5. Junto al evento MouseLeftButtonDown, escriba un nombre para el método del controlador de eventos, como "goClick".

   

   Sugerencia:
   Como alternativa, puede hacer doble clic en el cuadro de texto del evento para generar un nombre predeterminado para el método del controlador de eventos.

   Después de presionar ENTRAR, Microsoft Expression Blend abre el archivo de código subyacente del control de usuario en un editor de texto y lo pega en el código para el método de control de eventos.

   private void goClick(object sender, MouseButtonEventArgs e)
   {
   
   }
   

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

   Para obtener más información, vea Modificar un archivo de código subyacente.

6. Para hacer que el control de usuario cambie de estado, llame al método GoToState (puede estar en inglés) con el nombre del estado. Por ejemplo, pegue el siguiente código en negrita en el archivo de código subyacente:

   private bool isFaceUp = false;  
   
   private void goClick(object sender, MouseButtonEventArgs e)
   {
     if (isFaceUp)  
     {  
       VisualStateManager.GoToState(this, "FaceDown", true);  
     }  
     else  
     {  
       VisualStateManager.GoToState(this, "FaceUp", true);  
     }  
     isFaceUp = !isFaceUp;  
   }
   

   Private isFaceUp As Boolean = False  
   
   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
     If isFaceUp Then  
       VisualStateManager.GoToState(Me, "FaceDown", True)  
     Else  
       VisualStateManager.GoToState(Me, "FaceUp", True)  
     End If  
     isFaceUp = Not (isFaceUp)  
   End Sub
   

7. Genere el proyecto (CTRL+MAYÚS+B).

8. Pruebe el proyecto (F5) y, a continuación, haga clic en el control de usuario para ver si cambia de estado.

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 escribir un nombre en el panel Eventos en Expression Blend, es posible que tenga que cambiar 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 2008, es posible que no tenga instalado Silverlight Tools para Visual Studio 2008. Instale las herramientas y, a continuación, escriba un nombre en el panel Eventos en Expression Blend.

  Para obtener más información, vea Microsoft Silverlight Tools para Visual Studio (puede estar en inglés).

• Si no ve el control de usuario al probar el proyecto (F5) y la ventana del explorador no indica un error, es posible que no haya dibujado una instancia del control de usuario en el documento de inicio. El documento de inicio es el primer documento que aparece al ejecutar la aplicación. Si creó un control de usuario en un documento independiente, tiene que generar el proyecto (CTRL+MAYÚS+B), abrir el documento de inicio (normalmente Page.xaml), abrir el panel Activos (haga clic en Activos ), seleccionar el control de usuario en la categoría Proyecto y, a continuación, dibujar el control de usuario en la mesa de trabajo.

• Si tiene problemas al generar la aplicación, es posible que no tenga instalada la versión correcta de Silverlight.

  Para obtener más información, vea Instalar Silverlight Tools y el visor en tiempo de ejecución.

Pasos siguientes

• Puede agregar animación, como hacer que el botón gire sobre sí mismo cuando el puntero se mueva sobre él. Para obtener más información, vea Agregar animación que se reproducirá después de cambiar un estado.

• Puede ver situaciones reales que usan estados y grupos de estado en los tutoriales de vídeo sobre la forma de hacer las cosas en el sitio web de la comunidad de Expression (puede estar en inglés).