Cambiar el estado en respuesta a una interacción del usuario

Al crear su propio control de usuario, puede agregar estados y grupos de estado para cambiar la apariencia del control de usuario según el estado en que se encuentre. Para cambiar estos estados en respuesta a la interacción del usuario (como un clic del mouse), puede agregar métodos del controlador de eventos para llamar al método GoToState (puede estar en inglés).

[!NOTA]

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. No puede agregar ni quitar los estados predeterminados. No obstante, puede cambiar la apariencia del control en esos diferentes estados y usar el siguiente procedimiento para cambiar los estados.

Para cambiar el estado en respuesta a un clic del mouse

1. Si aún no ha creado grupos de estado y estados, puede Definir estados visuales y tiempos de transición diferentes en 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 estado SideDisplayed incluye un estado que muestra la carta cara arriba (FaceUp) y un estado que muestra la carta cara abajo (FaceDown).

   

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

3. En Objetos y escala de tiempo, seleccione el objeto [UserControl] para enlazar con 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 el botón 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 el botón 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 proyecto en Microsoft Visual Studio 2008 si lo ha instalado. Si no ha instalado un editor de código, Expression Blend copia el código del método del controlador de eventos al Portapapeles para que pueda abrir el archivo de código subyacente del control de usuario en un editor de texto y pegarlo en el código desde el Portapapeles.

   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 acerca de la interoperabilidad de Visual Studio 2008 con Expression Blend, vea Editar 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 recibe 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 recibe el error "No se puede cargar la solución" en Visual Studio 2008, es posible que no tenga instalado Microsoft Silverlight Tools para Visual Studio 2008 (puede estar en inglés). Instale las herramientas y, a continuación, escriba un nombre en el panel Eventos en Expression Blend.

• 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 biblioteca , seleccionar el control de usuario en la ficha Controles personalizados 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 Microsoft Silverlight. Para obtener más información, vea Instalar el visor en tiempo de ejecución y las herramientas de Silverlight 2.

Pasos siguientes

• Puede agregar animación, como hacer que el botón gire sobre sí mismo cuando el puntero del mouse 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).