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 Visibility de cada panel de cuadrícula.

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

1. Dibuje un SimpleButton en la mesa de trabajo.

   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 objeto Button 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 o modificar una plantilla.

   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. En la Barra de herramientas, agregue tres controles Grid  al objeto Grid raíz de la plantilla. Para que los nuevos objetos Grid rellenen el objeto Grid primario, selecciónelos, elija Redimensionar automáticamente en el menú Objeto y, a continuación, haga clic en Relleno.

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

7. En el panel 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 Default en el panel Desencadenadores, haga clic en los objetos de 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 el panel Desencadenadores, 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. Seleccione el objeto de cuadrícula MouseOver y establezca la propiedad Visibility en Visible.

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. Seleccione el objeto de cuadrícula Pressed y establezca la propiedad Visibility en Visible.

11. Ahora puede diseñar cada objeto de cuadrícula como desee que aparezca en diferentes situaciones seleccionadas en el panel Desencadenadores.

    Puede usar las herramientas de dibujo y las escalas de tiempo de animación para crear un comportamiento único para el botón.

    Para obtener más información, vea Dibujar objetos y Animar objetos.

    Para diseñar uno de los objetos de cuadrícula sin que los otros estén visibles, puede hacer clic en el botón Mostrar u ocultar, situado al lado de los demás objetos de cuadrícula en el panel Objetos y escala de tiempo.

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

Vea también

Conceptos

SimpleButton