Modificar la apariencia de un control del sistema en diferentes estados

Artículo
10/11/2017

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 el usuario puede personalizar cualquier control del sistema que se incluya con Microsoft Expression Blend o cualquier control personalizado e importado de Microsoft Silverlight que se herede de la clase Control .

Modificar la apariencia de un botón en diferentes estados

Crear una plantilla reutilizable para un control del sistema, como el control Button .
Si no está en el modo de edición de una plantilla, haga clic con el botón secundario en la mesa de trabajo, seleccione Editar plantilla y, a continuación, haga clic en Editar actual. Otra opción es seleccionar el objeto y hacer clic en Plantilla en la barra de ruta de navegación.
Si está en el modo de edición de plantilla, los estados del botón (como Normal y MouseOver ) se muestran en el panel Estados. Los estados están contenidos en grupos de estados (como CommonStates y FocusStates ).

Los elementos de la plantilla se muestran en el panel Objetos y escala de tiempo. La apariencia de estos elementos es la que puede modificar para un estado seleccionado.
Haga clic en MouseOver en el panel 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 estado seleccionado. 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.

Para cambiar el tamaño del botón cuando tenga el estado MouseOver , haga clic en [Grid] en el panel 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 Organizar objetos y Usar el panel de diseño Grid.

En el panel Propiedades, en Transformación, haga clic en la ficha Escalar . Cambie los valores X e Y a 1.1.
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 a 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 amarillo. Si desea cambiar una propiedad enlazada mediante plantilla, haga clic primero en Opciones avanzadas 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 los temas siguientes:
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.

Para obtener más información, vea Instalar Silverlight Tools y el visor en tiempo de ejecución.

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.
Puede agregar animación, como hacer que el botón gire sobre sí mismo cuando el puntero del mouse se mueva sobre él. 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

Tareas

Dibujar un control en un proyecto
Modificar el tiempo de transición entre cambios de estado
Crear una plantilla reutilizable para aplicar estilo a un control del sistema