Agregar animación a un botón

SimpleButton no anima los cambios en este 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 el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  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 sobre 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 Botón Ámbito superior, que está situado encima del árbol de elementos del panel Interacción.

    Para volver al modo de edición de plantilla de una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desea editar, 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 Herramienta 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 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 mediante plantilla para enlazar la propiedad Fill de la plantilla a la propiedad Background 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 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, al lado de Acciones al activar, haga clic en el botón Agregar nueva acción 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 Es necesaria una escala de tiempo. 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 Cabezal de reproducción de animación a 1 segundo y, a continuación, establezca un nuevo valor para la propiedad Fill en Pinceles, en el panel Propiedades.
    Al cambiar la propiedad Fill, aparece un fotograma clave Indicador de 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 Botón Agregar nueva acción situado al lado de 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.