Inténtelo: Crear un botón mediante efectos de imagen

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 de imagen a cada estado.

Para crear efectos de imagen en un botón

1. Dibuje un control 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 y, a continuación, establezca la propiedad Fill (relleno) en amarillo en Pinceles en el panel Propiedades.

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

8. Con Rectangle aún seleccionado, busque la propiedad BitmapEffect (efecto de imagen) en la sección Opciones avanzadas de Apariencia en el panel Propiedades. Haga clic en la flecha de lista desplegable y, a continuación, en Bevel (bisel). Deje la propiedad BevelWidth (ancho de bisel) establecida en 5 y cambie las demás propiedades de bisel hasta que logre el efecto que desee.

9. En Desencadenadores, en el panel Interacción, haga clic en el desencadenador IsMouseOver = True para activar la grabación de desencadenadores. En el panel Propiedades, haga clic otra vez en la flecha de lista desplegable situada junto a la propiedad BitmapEffect (efecto de imagen), haga clic en Bevel (bisel) y cambie el valor de la propiedad BevelWidth (ancho de bisel) a 10.

   Aparece una nueva línea en Propiedades cuando está activo, en 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 Interacción para ver todos los desencadenadores y acciones en Desencadenadores. Use el mouse para ajustar el tamaño de las ventanas.

10. En Desencadenadores del panel Interacción, haga clic en el desencadenador IsPressed = True para activar la grabación de desencadenadores y, en el panel Propiedades, haga clic otra vez en la flecha desplegable situada junto a la propiedad BitmapEffect (efecto de imagen), elija Bevel (bisel) y cambie el valor de la propiedad BevelWidth (ancho de bisel) a 2.

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

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

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

    Sugerencia:
    Los efectos de imagen no están acelerados mediante hardware, por lo que es mejor establecer un valor explícito y no intentar animar los valores mediante un desencadenador de eventos y una escala de tiempo de animación.

Vea también

Conceptos

SimpleButton

Agregar o quitar un desencadenador

Información general sobre desencadenadores

Agregar un efecto de imagen a un objeto