Sugerencias para la aplicación de estilos a controles Silverlight comunes en Blend

Artículo
10/09/2014

JJ169940.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(es-es,VS.120).png

Blend para Visual Studio incluye numerosos controles de Microsoft Silverlight que puede usar para crear una fabulosa experiencia de usuario. También puede descargar los controles de orígenes de confianza.

Para obtener más información, vea Import a custom control by adding a reference (Blend).

Si encuentra un control cuya funcionalidad se ajusta a sus necesidades pero no tiene la apariencia que desea, y dicho control admite plantillas, puede modificar las plantillas del control para cambiar su apariencia.

Para facilitar la tarea, céntrese en el diseño dibujando todo primero en la mesa de trabajo con las herramientas de dibujo e importando imágenes y otros activos. Una vez que lo haya hecho, puede usar el comando Convertir en control para convertir sus objetos a una plantilla para cualquier control.

Enlace de plantillas

Los controles tienen propiedades a las que se pueden enlazar los objetos de una plantilla. Esto se denomina enlace de plantillas. El enlace de elementos de la plantilla a un control es una manera eficaz de crear parámetros para la plantilla. Por ejemplo, en lugar de expresar que "este Rectangle es azul", se indica que "este Rectangle es del mismo color que el Background del control". Por lo tanto, al aplicar la plantilla a un control con distintas propiedades Background, el resultado es una plantilla de un color diferente.

Para enlazar una propiedad mediante plantilla, seleccione un objeto de una plantilla, haga clic en Opciones avanzadas en el panel Propiedades y, a continuación, elija una propiedad en Enlace de plantillas.

Algunas propiedades como OpacityMask, Font, FontSize, LayoutTransform y RenderTransform no tienen que estar enlazadas mediante plantilla. Se aplicarán a los objetos de las plantillas automáticamente.

Propiedades Content y Header

Varios controles contienen una propiedad Content (Button, CheckBox y RadioButton, por ejemplo) o una propiedad Header (TabItem y MenuItem). Las propiedades Content y Header pueden usarse para mostrar contenido de cualquier tipo.

Para mostrar cualquier tipo de contenido

Si desea mostrar cualquier tipo de contenido (y no solo texto), necesitará un ContentPresenter en la plantilla con una propiedad Content (o Header) que esté enlazada mediante plantilla a la propiedad Content (o Header) del control. Si utiliza Crear en control para convertir ilustraciones en una plantilla, Blend agrega un ContentPresenter a la plantilla. Si estaba usando un TextBlock para mostrar el contenido, elimine el TextBlock después de convertir la ilustración en un control. ContentPresenter mostrará el contenido que se mostró previamente en TextBlock.

Para mostrar texto

Si desea mostrar solo texto, puede utilizar TextBlock en lugar de ContentPresenter. Coloque TextBlock en la plantilla y, a continuación, enlace mediante plantilla la propiedad Text de TextBlock a la propiedad Content (o Header) de Button. Si utiliza Crear en control para convertir ilustraciones en una plantilla y estaba usando un TextBlock para mostrar contenido, elimine el ContentPresenter que Blend agregó a la plantilla. Al agregar texto a la propiedad Content (o Header) de un control con este estilo aplicado, el TextBlock mostrará ese texto.

Convertir en ContentControl

Si utiliza Crear en control para convertir la ilustración que contiene un objeto TextBlock en una plantilla para un ContentControl (un botón, por ejemplo), Blend realiza lo siguiente:

Coloca un ContentPresenter en la plantilla en lugar del TextBlock.
Copia las propiedades de Diseño de TextBlock a ContentPresenter.
Copia las propiedades de Typography de TextBlock al estilo del control.
Copia la propiedad Text de TextBlock a la instancia de la propiedad Content del control.

Convertir en TextBox

Si utiliza Crear en control para convertir la ilustración que contiene un objeto TextBlock en una plantilla para un TextBox, Blend realiza lo siguiente:

Coloca un ScrollViewer que representa el elemento ContentElement en la plantilla en lugar del TextBlock.
Copia las propiedades de Diseño de TextBlock al elemento ContentElement.
Copia las propiedades de Typography de TextBlock al estilo TextBox.
Copia la propiedad Text de TextBlock a la instancia del control TextBox.

Estados visuales

Los estados visuales de un grupo de estados son mutuamente excluyentes. Sin embargo, los estados de un grupo son independientes de los estados de cualquier otro grupo. Esto significa que cualquier estado de cada uno de los grupos puede aplicarse en cualquier momento sin crear un conflicto.

Es habitual cambiar una propiedad de un objeto en más de un estado en el mismo grupo. Por ejemplo, puede cambiar la propiedad Fill de Rectangle en los estados MouseOver, Pressed y Disabled. Esto funciona porque cada vez solo se aplica un estado del grupo de estados CommonStates. Sin embargo, si se cambia la propiedad de un objeto en más de un grupo de estados se rompe la naturaleza independiente de los grupos de estados y se generan conflictos, ya que más de un estado intenta establecer la propiedad de un mismo objeto de manera simultánea. Blend mostrará una advertencia cuando se detecte un conflicto de estados.

Importante

Cada nombre de estado debe ser único dentro de una plantilla, incluso de un grupo de estados a otro.

Estado visual Normal

Cada grupo de estados tiene un estado predeterminado. Por ejemplo, el de CommonStates es Normal y el de CheckedStates es Unchecked. Se recomienda dejar el estado predeterminado sin cambios al modificar las propiedades de un objeto. Por ejemplo, en una casilla, la marca de verificación y los rectángulos de casilla están vacíos (ocultos) en Base y se muestran en Checked (en la marca de verificación) y Focused (en el rectángulo de casilla).

Conviene recordar que Base no es un estado. Por ese motivo, no se pueden definir ni controlar las transiciones a y desde Base. Por ejemplo, no se puede definir una transición de Base a MouseOver porque Base no es un estado. Base representa la plantilla en su formulario base, sin ningún estado aplicado. Los estados solo deben considerarse cuando se definen las transiciones.

Cuando cree sus propias plantillas de control, debería definir un estado normal en cada grupo de estados y establecer que el control se cargue con el estado normal como estado predeterminado. Si el control (por ejemplo, un Button) no está en su estado normal cuando se carga, la transición (por ejemplo, del estado Normal al estado MouseOver) no se ejecutará.