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 puede aplicar un efecto de imagen a cada estado.

Para crear efectos de imagen en 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 en la cuadrícula y, a continuación, establezca la propiedad Fill 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 mediante la etiqueta contextual Etiqueta contextual de radio de vértice 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 y RadiusY en Apariencia, en el panel Propiedades.
  8. Con el elemento Rectangle aún seleccionado, busque la propiedad BitmapEffect en la sección de Opciones avanzadas Botón de expansión del panel de propiedades avanzadas, en la categoría Apariencia del panel Propiedades. Haga clic en la flecha de lista desplegable y, a continuación, en Bevel. Deje la propiedad BevelWidth establecida en 5 y cambie las demás propiedades del 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, vuelva a hacer clic en la flecha de lista desplegable que hay al lado de la propiedad BitmapEffect, haga clic en Bevel y cambie la propiedad BevelWidth 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 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.
  10. En Desencadenadores, en el panel Interacción, haga clic en el desencadenador IsPressed = True para activar la grabación de desencadenadores y, a continuación, en el panel Propiedades, vuelva a hacer clic en la flecha de lista desplegable situada al lado de la propiedad BitmapEffect, haga clic en Bevel y, a continuación, cambie la propiedad BevelWidth a 2.
    Aparece una nueva línea en Propiedades cuando está activo, en Desencadenadores, que refleja el cambio de la propiedad que se producirá al hacer 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.