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

SimpleButton no anima los cambios de 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 SimpleButton en la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en la categoría Simple Styles de la ficha Controles del Panel biblioteca. 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 Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, haga clic en Editar plantilla. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar plantilla 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 el botón Ámbito superior, que se encuentra encima del árbol de elementos en el panel Interacción. Para volver al modo de edición de plantillas para una plantilla existente, haga clic con el botón secundario en el elemento cuya plantilla desea editar en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.

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

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

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

6. Haga clic con el botón secundario en el elemento Rectangle, elija Ordenar y, a continuación, haga clic en Enviar al fondo para colocarlo en la capa situada detrás del elemento 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 elemento secundario Border de la plantilla original usaba el enlace a plantilla para enlazar la propiedad Fill (relleno) de la plantilla a la propiedad Background (fondo) del control al que se aplica la plantilla. El enlace mediante plantilla permite usar en la plantilla algunas de las propiedades establecidas en el control y, de esta forma, permite crear varios botones con diferentes colores de fondo, pero que usan 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 (relleno) en la plantilla.

8. En Desencadenadores, en el panel Interacción, 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 el botón 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 mouse se desplace sobre un botón, aparecerá una ventana Se necesita un guión gráfico. Haga clic en Aceptar para crear una escala de tiempo nueva y empezar la grabación.

   Sugerencia:
   Podría tener que ajustar las ventanas del panel Interacción para ver todos los desencadenadores y acciones en Desencadenadores. Use el mouse para ajustar el tamaño de las ventanas.

9. En 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 (relleno) 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 anterior relleno al relleno que está establecido en 1 segundo cuando el puntero del mouse se desplace sobre el botón.

10. En Desencadenadores, en el panel Interacción, 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 el botón 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 del mouse 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 Desencadenadores.

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

Vea también

Conceptos

SimpleButton

Agregar o quitar un desencadenador

Información general sobre desencadenadores

Crear una animación sencilla