Información general sobre desencadenadores
- Desencadenadores de propiedad
- Desencadenadores de eventos
- ¿Desencadenador de propiedad o de eventos?
- ¿Método de control de eventos o desencadenador?
Durante el ciclo de vida de una aplicación, los objetos en la interfaz de usuario experimentan cambios en su estado. El estado se suele expresar en términos relacionados con la acción del usuario, como por ejemplo un estado de pasar el mouse sobre un botón o un estado de elemento de menú presionado. Como creador de aplicaciones, le interesa que estos dos estados de ejemplo se implementen en los objetos a través de la propiedad UIElement.IsMouseOver y la propiedad MenuItem.IsPressed respectivamente.
Pero el valor de estas propiedades y, por consiguiente, los estados que representan no son obvios para el usuario. IsMouseOver e IsPressed no son propiedades visuales. Para poder percibirse, un cambio en una propiedad no visual debe desencadenar un cambio en una propiedad visual (como Background u Opacity). Por ejemplo, un botón en el estado pasar el ratón aparece curvo cuando 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 provoca los eventos MouseEnter y MouseLeave cuando el puntero cruza sus límites. Además, un evento no se muestra por sí mismo y, por lo tanto, debe desencadenar un cambio en una propiedad visual para que sea percibido por 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 la apariencia del botón cuando los estados presionado y activado del botón cambian. Cualquier botón al que se aplique el estilo se comportará del mismo modo. Para obtener un ejemplo, vea Agregar animación a un botón.
Hay dos tipos de desencadenadores:
- Desencadenador de propiedades Mecanismo por el cual un cambio en una propiedad desencadena un cambio instantáneo, o bien un cambio animado en otra propiedad.
- Desencadenador de eventos Mecanismo por el cual un evento desencadena un cambio animado en una propiedad.
UI de desencadenadores que muestra dos desencadenadores de propiedad (IsMouseOver e IsPressed) y un desencadenador de eventos (target-element.Loaded).
El desencadenador de 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 de cómo trabajar con desencadenadores, vea Agregar o quitar un desencadenador 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 llamada archivo de recursos XAML de propiedad. Este archivo de recursos XAML 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 entrar; la acción se produce cuando se cumple la condición. Una acción de salir se produce cuando la condición deja de cumplirse. Sólo las animaciones se pueden controlar desde una acción de entrar o salir. La imagen siguiente muestra el ciclo de vida de este desencadenador de propiedad de ejemplo.
Diagrama de flujo de trabajo de un desencadenador
Tenga en cuenta que el archivo de recursos XAML es suficiente para controlar la propiedad Foreground a través del ciclo de vida; en la fase 5, la propiedad Foreground se revierte automáticamente al color negro de nuevo. Sin embargo, cualquier animación de propiedad realizada por la acción de entrar no se deshace; en la fase 5, el tamaño del botón sigue agrandándose a escala. 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 puede definirse únicamente en un estilo o en una plantilla, si bien lo mejor con los desencadenadores es colocarlos por lo general 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 entrar 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: simplemente ejecuta acciones 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 un botón se agrande a escala cuando el mouse entre dentro de sus límites y, a continuación, vuelva a su tamaño habitual cuando el mouse salga de sus límites, tendremos que definir un par de desencadenadores de eventos con animaciones de escalado complementarias. El procedimiento siguiente muestra cómo generar estos desencadenadores de eventos en Expression Blend. Un desencadenador de eventos se puede definir en un estilo, en una plantilla o en LayoutRoot. En este ejemplo, definiremos un desencadenador en un estilo y otro 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 la 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 necesite 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 el tema Control de eventos.
Para obtener una lista de eventos con los que puede enlazar, ya sea mediante desencadenadores o mediante métodos de control de eventos, vea Referencia rápida de eventos.