Compartir a través de


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 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

  1. Crear una plantilla reutilizable para un control del sistema, como el control Button Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(ES-ES,Expression.30).png.

  2. 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.

    Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(ES-ES,Expression.30).png

  3. 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).

    Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(ES-ES,Expression.30).png

    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.

    Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(ES-ES,Expression.30).png

  4. 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 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.

    Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(ES-ES,Expression.30).png

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

    Dd185522.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Grid Dd185522.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ES-ES,Expression.30).png 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.

  6. En el panel Propiedades, en Transformación, haga clic en la ficha Escalar Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(ES-ES,Expression.30).png. 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 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 de la propiedad Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png junto a la propiedad y elija Restablecer.

    Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(ES-ES,Expression.30).png

  • 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

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