Inténtelo: agregar animación a un botón

El estilo SimpleButton no anima los cambios de su estado. En su lugar, establece un recurso de pincel cuando hay cambios de estado. En Microsoft Expression Blend, no puede animar desde un recurso de pincel a un color. En el siguiente procedimiento se muestra una alternativa, en la que se usan desencadenadores de propiedad para iniciar escalas de tiempo de animación.

Para animar un botón

1. Dibuje un objeto SimpleButton en la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en Simple Styles, en la categoría Estilos del panel Activos. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Haga clic con el botón secundario en el panel Objetos y escala de tiempo, elija Editar plantilla y, después, haga clic en Editar actual. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar actual para crear una plantilla nueva y guardarla en el documento.

   Para obtener más información acerca de cómo crear una copia, vea Crear un recurso.

   Sugerencia:

   Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en Ámbito superior, que está encima del árbol de objetos en el panel Objetos y escala de tiempo. Para volver al modo de edición de plantilla para una plantilla existente, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto cuya plantilla desee editar, elija Editar plantilla y, a continuación, haga clic en Editar actual.

3. En el ámbito de edición de la plantilla de control, elimine el objeto secundario Border del objeto Grid.

4. Haga doble clic en el objeto Grid para activarlo y poder así agregar objetos secundarios.

5. Dibuje un rectángulo en la cuadrícula.

6. Haga clic con el botón secundario en el objeto Rectangle, elija Ordenar y, a continuación, haga clic en Enviar al fondo para colocarlo en la capa situada detrás del objeto ContentPresenter.

7. Establezca un nuevo valor para la propiedad Fill (relleno) del rectángulo en Pinceles, en el panel Propiedades. Será el color predeterminado del botón.

   Sugerencia:

   El objeto secundario Border de la plantilla original usaba el enlace a plantilla para enlazar la propiedad Fill de la plantilla a la propiedad Background del control al que se aplica la plantilla. El enlace a plantilla se puede usar para trasladar propiedades de objeto por la plantilla, y de este modo le permite crear varios botones con diferentes colores de fondo, pero que usen la misma plantilla. Sin embargo, no puede animar desde una propiedad enlazada mediante plantilla a un color específico, por lo que se establece un color predeterminado para la propiedad Fill en la plantilla.

8. En el panel Desencadenadores, haga clic en el desencadenador IsMouseOver = True para activar la grabación de desencadenadores. A continuación, junto a Acciones al activar, haga clic en Agregar nueva acción para agregar una escala de tiempo de animación. Si aún no tiene ninguna escala de tiempo que desee desencadenar cuando el puntero se desplace sobre un botón, aparecerá la ventana Se necesita una escala de tiempo. Haga clic en Aceptar para crear una escala de tiempo nueva y empezar la grabación.

   Sugerencia:
   Es posible que tenga que ajustar las ventanas del panel Desencadenadores para ver todos los desencadenadores y acciones. Use el mouse para ajustar el tamaño de las ventanas.

9. En el panel Objetos y escala de tiempo, mueva el cabezal de reproducción a 1 segundo y, a continuación, establezca un nuevo valor para la propiedad Fill de Pinceles, en el panel Propiedades.

   Al cambiar la propiedad Fill (relleno), aparece un fotograma clave en la escala de tiempo. No es necesario establecer un fotograma clave en 0 segundos. La escala de tiempo se animará desde el relleno anterior al relleno que está establecido en 1 segundo cuando el puntero se desplace sobre el botón.

10. En el panel Desencadenadores, vuelva a hacer clic en el desencadenador IsMouseOver = True para salir de la escala de tiempo de animación y volver al modo de grabación del desencadenador. Haga clic en Agregar nueva acción junto a Acciones al desactivar. Cree o seleccione la escala de tiempo de animación que se ejecutará cuando el puntero se separe del botón. Por ejemplo, puede usar la escala de tiempo anterior y seleccionar el método Stop para la escala de tiempo.

11. Si lo desea, puede crear escalas de tiempo de animación para otros estados en el panel Desencadenadores.

12. Pruebe la aplicación (F5) para ver los efectos.

Vea también

Tareas

Agregar o quitar un desencadenador

Crear una animación sencilla

Conceptos

SimpleButton

Usar desencadenadores para definir el comportamiento de un control WPF