Cambiar estados en respuesta a una interacción del usuario

  • Artículo

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) Dd185503.xtlink_newWindow(es-es,Expression.40).png 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 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.

    Dd185503.74c3b2ef-32ab-4aaa-839d-852741d9b2c2(es-es,Expression.40).png

  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 Dd185503.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(es-es,Expression.40).png para cambiar de la vista de propiedades a la vista de eventos.

    tip noteSugerencia:

    Para cambiar del panel Propiedades a la vista de propiedades, haga clic en PropiedadesDd185503.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(es-es,Expression.40).png.

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

    Dd185503.98d2b5bb-eedc-4a13-bf87-7b7514868f87(es-es,Expression.40).png

    tip noteSugerencia:

    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 Dd185503.xtlink_newWindow(es-es,Expression.40).png (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 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 Expression Blend.

    Para obtener más información, vea Microsoft Silverlight Tools para Visual Studio 2010 Dd185503.xtlink_newWindow(es-es,Expression.40).png.

  • 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 Dd185503.0d8b8d29-1af9-418f-8741-be3097d76eab(es-es,Expression.40).png), 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

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