Cambiar estados en respuesta a la interacción del usuario en Blend

Al crear su propio control de usuario, puede agregar estados y grupos de estado para cambiar la apariencia de dicho control en función del estado en que 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 IrAEstado.

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.

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.

Para cambiar los estados en respuesta a un clic

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

  Para obtener más información, consulte Microsoft Silverlight Tools para Visual Studio 2010.

• 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 compilar 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 Runtime para Blend.

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 Modificar el tiempo de transición entre cambios de estado en Blend.

• Si quiere conocer situaciones reales que usan estados y grupos de estado, vea los tutoriales en vídeo sobre procedimientos en el Sitio web de la comunidad de Expression.