Inténtelo: aplicar estilo a un botón mediante efectos

Además de usar desencadenadores de propiedad para cambiar la apariencia de un botón en función de la interacción del usuario, en Microsoft Expression Blend también se puede aplicar un efecto a cada estado.

Para crear efectos en 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 clic en el objeto Grid para activarlo y poder así agregar objetos secundarios.

5. Dibuje un objeto Rectángulo en la cuadrícula y, a continuación, establezca la propiedad Fill en amarillo en Pinceles del panel Propiedades.

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. Redondee los bordes del objeto Rectangle, ya sea mediante el control Adorner que aparece al desplazar el puntero sobre uno de los dos manipuladores fuera del vértice superior izquierdo del rectángulo o mediante las propiedades RadiusX y RadiusY de Apariencia en el panel Propiedades.

8. De la categoría Efectos del panel Activos, arrastre el objeto DropShadowEffect sobre el objeto Rectangle.

   Se agrega una sombra paralela al objeto Rectangle como objeto secundario.

9. Con DropShadowEffect seleccionado en el panel Objetos y escala de tiempo, ajuste las propiedades del efecto en el panel Propiedades. Establezca la propiedad ShadowDepth en 20.

10. En el panel Desencadenadores, haga clic en el desencadenador IsMouseOver = True para activar la grabación de desencadenadores. En el panel Propiedades, establezca la propiedad ShadowDepth en 25.

    Aparece una nueva línea en Propiedades cuando está activo en el panel Desencadenadores, que refleja el cambio de la propiedad que se producirá cuando el mouse se desplace sobre el botó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.

11. En el panel Desencadenadores, haga clic en el desencadenador IsPressed = True para activar la grabación de desencadenadores. En el panel Propiedades, establezca la propiedad ShadowDepth en 10.

    Aparece una nueva línea en Propiedades cuando está activo en el panel Desencadenadores, que refleja el cambio de la propiedad que se producirá cuando se haga clic en el botón en la aplicación en ejecución.

12. Haga clic en Valor predeterminado en el panel Desencadenadores para desactivar la grabación de desencadenadores.

13. Pruebe la aplicación (F5) para ver el efecto en acción.

Vea también

Tareas

Agregar o quitar un desencadenador

Conceptos

SimpleButton

Usar desencadenadores para definir el comportamiento de un control WPF

Aplicar efectos