Inténtelo: crear un botón de sustitución

Se puede crear un efecto de sustitución en una plantilla de botón si se cambia la apariencia del botón en función de la interacción del usuario. Como alternativa a desencadenar una escala de tiempo de animación o desencadenar cambios en la propiedad para generar un efecto de sustitución, puede usar el siguiente procedimiento para crear varios paneles de cuadrícula para representar cada estado del botón y, a continuación, alternar las propiedades de visibilidad de cada panel de cuadrícula.

Para crear un efecto de sustitución en un botón

1. Dibuje un control SimpleButton en la mesa de trabajo de Microsoft Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en la categoría Simple Styles, en 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, a continuación, 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 plantillas y volver al ámbito del documento, haga clic en el botón Ámbito superior, que está encima del árbol de elementos en el panel Interacción. Para volver al modo de edición de plantillas para una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desee 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. En la Barra de herramientas, agregue tres controles Grid al elemento Grid de la plantilla. Para agregarlos rápidamente, haga doble clic en el icono de cuadrícula del cuadro de herramientas, haga clic con el botón secundario en cada control Grid en Objetos y escala de tiempo, elija Ajuste automático de tamaño y, a continuación, haga clic en Relleno.

6. Haga clic con el botón secundario en el elemento ContentPresenter, elija Ordenar y, a continuación, haga clic en Traer al frente para colocarlo en la capa situada al frente de los nuevos objetos Grid.

7. En Objetos y escala de tiempo, cambie el nombre de los nuevos objetos de cuadrícula a "Default", "Pressed" y "MouseOver" respectivamente; para ello, haga clic con el botón secundario en cada objeto y, a continuación, haga clic en Cambiar nombre.

8. Para configurar el comportamiento del desencadenador, es necesario hacer que un solo objeto de cuadrícula sea visible por desencadenador. Por ejemplo, si se ha seleccionado Predeterminado en Desencadenadores en el panel Interacción, haga clic en los objetos de la cuadrícula Pressed y MouseOver mientras mantiene presionada la tecla Ctrl para seleccionar esos objetos. A continuación, en Apariencia, en el panel Propiedades, establezca la propiedad Visibility en Hidden.

9. Haga clic en IsMouseOver = True en Desencadenadores, en el panel Interacción, seleccione los objetos de cuadrícula Pressed y Default y, a continuación, en Apariencia en el panel Propiedades, establezca la propiedad Visibility en Hidden.

10. Por último, con IsPressed = True seleccionado en Desencadenadores, seleccione los objetos de cuadrícula MouseOver y Default y, a continuación, en Apariencia en el panel Propiedades, establezca la propiedad Visibility en Hidden.

11. Ahora puede diseñar cada objeto de cuadrícula como desee que aparezca en diferentes situaciones. Puede usar las herramientas de dibujo y las escalas de tiempo de animación para crear un comportamiento único para el botón. Para diseñar uno de los objetos de cuadrícula sin que los otros estén visibles, puede hacer clic en el botón Ocultar/Mostrar, situado al lado de los demás objetos de cuadrícula en Objetos y escala de tiempo.

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

Vea también

Conceptos

SimpleButton