Modificar la apariencia de un control del sistema en diferentes estados

Los controles tienen un aspecto diferente según el estado en el que están. Por ejemplo, un botón cambia de color ligeramente cuando se le pasa por encima el puntero del mouse. "MouseOver" es uno de los estados de un botón. Puede personalizar la apariencia de diferentes estados de los controles del sistema.

El siguiente procedimiento usa un botón, pero puede personalizar cualquier control del sistema que se incluya con Microsoft Expression Blend 2 o cualquier control de Silverlight 2 personalizado que haya importado que se herede de la clase Control.

Modificar la apariencia de un botón en diferentes estados

1. Crear una plantilla reutilizable para un control del sistema como el control Button .

2. Si no está en el modo de edición de una plantilla, haga clic con el botón secundario en un control de la mesa de trabajo, elija Editar partes del control (Plantilla) y haga clic en Editar plantilla. Otra opción es seleccionar el objeto y hacer clic en Plantilla en la barra de ruta de navegación.

   

3. En el modo de edición de plantilla, los estados del botón (como Normal y MouseOver) se muestran en Estados en el panel Interacción. Los estados están contenidos en grupos de estados (como CommonStates y FocusStates).

   

   Los elementos de la plantilla se muestran en Objetos y escala de tiempo. La apariencia de estos elementos es la que puede modificar para un estado seleccionado.

   

4. Haga clic en MouseOver en Estados. Observe que aparece un círculo rojo en la parte superior de la mesa de trabajo para indicarle que está activa la grabación del estado. Esto significa que cualquier cambio de propiedad que realice se grabará para el estadoseleccionado. En Objetos y escala de tiempo, los elementos de la plantilla que tienen propiedades establecidas de forma diferente respecto a cuando se selecciona Base se identifican con círculos rojos alrededor de los botones de expansión.

   

5. Para cambiar el tamaño del botón cuando tenga el estado MouseOver, haga clic en [Grid] en Objetos y escala de tiempo.

   Sugerencia:
   Grid  es un panel de diseño que organiza los objetos secundarios en una alineación horizontal, vertical o por los márgenes. Para obtener más información acerca de los paneles de diseño, vea Información general acerca del diseño y Panel de cuadrícula.

6. En el panel Propiedades, en Transformación, haga clic en la ficha Escalar . Cambie los valores X e Y a 1.1.

7. Guarde el trabajo (CTRL+S) y presione F5 para generar y probar la aplicación. Una vez abierta la aplicación en la ventana del explorador, mueva el puntero del mouse sobre el botón para ver cómo se expande.

Solución de problemas

• Algunos elementos de plantilla tienen propiedades que están enlazadas a valores fuera de la plantilla. Por ejemplo, la propiedad Fill del elemento Background está enlazada mediante plantilla a la propiedad Background del botón. Esto significa que cuando dibuje un botón que use esta plantilla, la plantilla tomará el valor que estableció en el botón. Los enlaces mediante plantilla permiten diseñar un control personalizado, pero también permiten realizar algunos cambios cuando se incluyen los controles en la aplicación.

  Las propiedades enlazadas están identificadas en la plantilla con un rectángulo de selección naranja. Si desea cambiar una propiedad enlazada mediante plantilla, haga clic primero en el botón Opciones avanzadas de la propiedad  junto a la propiedad y elija Restablecer.

  

• No se pueden agregar estados personalizados ni grupos de estados a la plantilla de un control del sistema. No obstante, puede crear un control de usuario personalizado y definir después estados personalizados y agregar código para cambiar los estados en función de la interacción con el usuario. Para obtener más información, vea Crear un nuevo control de usuario en un proyecto Silverlight 2, Definir estados visuales y tiempos de transición diferentes en un control de usuario y Cambiar el estado en respuesta a una interacción del usuario.

• Si encuentra problemas al ver la aplicación en un explorador, quizá no tiene instalado el motor en tiempo de ejecución correcto de Silverlight 2. Para obtener más información, vea Instalar el visor en tiempo de ejecución y las herramientas de Silverlight 2.

Pasos siguientes

• Puede cambiar el tiempo que tarda el botón en expandirse cuando se pasa sobre él el puntero del mouse. Para obtener más información, vea Modificar el tiempo de transición entre cambios de estado en controles del sistema.

• Puede agregar animación, como hacer que un botón gire cuando se pasa sobre él el puntero del mouse. Para obtener más información, vea Agregar animación que se reproducirá después de cambiar un estado.

• Puede aplicar esta plantilla a otro botón del proyecto o dibujar un nuevo botón que ya tenga la plantilla asignada. Para obtener más información, vea Aplicar un recurso de estilo.

Vea también

Conceptos

Dibujar un control en un proyecto Silverlight 2

Modificar el tiempo de transición entre cambios de estado en controles del sistema