Usar desencadenadores para definir el comportamiento de un control WPF (Blend SDK para WPF)

Durante el ciclo de vida de una aplicación, los objetos de la interfaz de usuario experimentan cambios de estado. El estado se suele expresar en términos relacionados con la acción del usuario, por ejemplo, un estado de pasar el mouse sobre un botón o un estado de elemento de menú presionado. Estos dos ejemplos de estados se implementan en objetos mediante las propiedades UIElement.IsMouseOver (mouse sobre elemento de UI) y MenuItem.IsPressed (elemento de menú presionado), respectivamente.

Pero el valor de estas propiedades y, por consiguiente, los estados que representan no son obvios para el usuario. IsMouseOver (mouse sobre) e IsPressed (está presionado) no son propiedades visuales. Para poder percibirlo, un cambio en una propiedad no visual debe desencadenar un cambio en una propiedad visual (por ejemplo, Background (fondo) u Opacity (opacidad)). Por ejemplo, un botón en el estado al pasar el mouse aparece curvado mientras que antes era plano o el color de fondo de un elemento de menú cambia mientras está presionado.

Además de cambiar su estado, los objetos también provocan eventos. Por ejemplo, un botón genera los eventos MouseEnter y MouseLeave cuando el puntero cruza sus límites. Además, un evento no tiene apariencia propia y, por lo tanto, debe desencadenar un cambio en una propiedad visual para que pueda percibirlo el usuario.

Los desencadenadores (y las escalas de tiempo de animación) se pueden crear en la raíz de un documento o en un estilo aplicado a un control. Por ejemplo, puede modificar el estilo de un botón para crear cambios sutiles en su apariencia cuando los estados presionado y sustituido del botón cambian. Cualquier botón al que se aplique el estilo se comportará del mismo modo. Para obtener un ejemplo, vea Animar objetos.

Hay dos tipos de desencadenadores:

• Desencadenador de propiedad   Mecanismo por el que un cambio en una propiedad desencadena un cambio instantáneo o animado en otra propiedad.

• Desencadenador de eventos   Mecanismo por el cual un evento desencadena un cambio animado en una propiedad.

En la siguiente imagen se muestra la interfaz de usuario de desencadenadores, con dos desencadenadores de propiedad (IsMouseOver e IsPressed) y un desencadenador de eventos (target-element.Loaded). El desencadenador de la propiedad IsMouseOver está seleccionado, y muestra la propiedad que ha cambiado (Border.Background) y la escala de tiempo que se ha desencadenado (OnLoaded1).

Para obtener ejemplos referentes a cómo trabajar con desencadenadores, vea Add or modify a trigger y Crear una animación sencilla.

Desencadenadores de propiedad

Un desencadenador de propiedad define una condición del desencadenador junto con las acciones que deberán ocurrir una vez satisfecha la condición. Una condición de ejemplo es "the IsMouseOver property of button1 is true". Y acciones de ejemplo serían "set the Foreground property of button1 to Red and begin the animation named Expand which scales the button up".

Establecer la propiedad Foreground en Red es un ejemplo de un tipo de acción denominada Setter de la propiedad. Este elemento Setter solamente está activo mientras se cumple la condición; la propiedad vuelve a su valor anterior cuando deja de cumplirse la condición. Comenzar la animación llamada Expand es un ejemplo de una acción de entrada; la acción se produce cuando se cumple la condición. Una acción de salida se produce cuando la condición deja de cumplirse. Sólo las animaciones pueden controlarse mediante acciones de entrada o salida. La imagen siguiente muestra el ciclo de vida de este desencadenador de propiedad de ejemplo.

Observe basta con el elemento Setter para controlar la propiedad Foreground a lo largo del ciclo de vida. En la fase 5, Foreground se vuelve a establecer automáticamente en Black. Sin embargo, las animaciones de propiedad realizadas por la acción de entrada no se deshacen. En la fase 5, la escala del botón todavía se ajusta a un tamaño mayor. La solución consiste en diseñar una animación Contract que reduzca a escala el botón de nuevo y, luego, comience esta nueva animación en una acción de salir.

Un desencadenador de propiedades únicamente puede definirse en un estilo o en una plantilla, aunque normalmente lo mejor es colocarlos en una plantilla siempre que sea posible.

Desencadenadores de eventos

Un desencadenador de eventos define una condición del desencadenador junto con las acciones que deberán ocurrir una vez satisfecha la condición. Una condición de ejemplo es "the MouseEnter event is raised on button1". Y acciones de ejemplo serían "begin the animation named Expand which scales the button up".

La acción de ejemplo es la misma que la acción de entrada que usamos antes en el ejemplo de desencadenador de propiedad. Un desencadenador de eventos no tiene el mismo ciclo de vida que un desencadenador de propiedad. En su lugar, ejecuta acciones únicamente en respuesta a un evento. En resumen, un desencadenador de eventos no tiene acciones de entrar ni de salir, tiene simplemente acciones.

Si deseamos que se aumente el tamaño de un botón cuando el puntero entre dentro de sus límites y, a continuación, vuelva a su tamaño original cuando el mouse salga de sus límites, tendremos que definir un par de desencadenadores de eventos con animaciones de escalado complementarias. Un desencadenador de eventos se puede definir en un estilo, en una plantilla o en LayoutRoot.

¿Desencadenador de propiedad o de eventos?

A menudo, una propiedad está reflejada por un conjunto de eventos correspondiente y el usuario puede decidir si desea diseñar un desencadenador de propiedad o dos desencadenadores de eventos. Por ejemplo, puede lograr el mismo efecto con un desencadenador de propiedad IsMouseOver o dos desencadenadores de los eventos MouseEnter y MouseLeave. Use los desencadenadores de propiedad siempre que pueda y los desencadenadores de eventos cuando tenga que hacerlo; por ejemplo, cuando no se encuentre dentro de un estilo o de una plantilla. Cuando es imprescindible usar desencadenadores de eventos, para compensar la falta de archivos de recursos XAML, puede crear un par de animaciones con fotogramas clave en la marca de tiempo cero.

¿Método de control de eventos o desencadenador?

Puede usar los controladores de eventos para realizar cualquier cosa que pueda hacer un desencadenador. Además, puede agregar cualquier otra lógica de programación, como establecer una propiedad en otro elemento, cargar un documento nuevo, crear un elemento nuevo, etc. Esto es así porque los métodos de control de eventos están definidos en el archivo de código del documento, en C# o en Microsoft Visual Basic .NET. Para obtener más información, vea Escribir código que responda a eventos.

Para obtener una lista de eventos con los que puede enlazar, ya sea mediante desencadenadores o a través de métodos de control de eventos, vea Controls, properties, and events reference (Blend).

Vea también

Tareas

Controlar cuándo se ejecuta un guion gráfico