Sugerencias para la aplicación de estilos al control CheckBox

Puede utilizar la plantilla de control CheckBox integrada para crear una plantilla CheckBox personalizada. La apariencia predeterminada del control CheckBox es la siguiente:

Estados del control CheckBox

De forma predeterminada, el control CheckBox puede estar en uno de los cuatro estados siguientes del grupo de estados CommonStates, que se pueden ver en el panel Estados al modificar una plantilla CheckBox:

Nombre del estado	Descripción
Normal	Apariencia del control CheckBox cuando no hay interacción con el control.
MouseOver	Apariencia del control CheckBox cuando el usuario mueve el puntero sobre él.
Pressed	Apariencia del control CheckBox cuando el usuario hace clic en él, o cuando el control recibe el foco y el usuario presiona ENTRAR o la barra espaciadora.
Disabled	Apariencia del control CheckBox cuando la propiedad IsEnabled está establecida en False.

El control CheckBox puede estar en alguno de los dos estados siguientes del grupo de estados FocusStates:

Nombre del estado	Descripción
Unfocused	Apariencia del control CheckBox cuando no tiene el foco del teclado.
Focused	Apariencia del control CheckBox cuando tiene el foco del teclado. Por ejemplo, un usuario puede presionar la tecla Tab para pasar de un objeto a otro en la aplicación hasta que el foco del teclado esté en el control CheckBox.

El control CheckBox puede estar en alguno de los dos estados siguientes del grupo de estados ValidationStates:

Nombre del estado	Descripción
Valid	Apariencia del control CheckBox cuando es válido.
InvalidUnfocused	Apariencia del control CheckBox cuando no es válido y no tiene el foco.
InvalidFocused	Apariencia del control CheckBox cuando no es válido y tiene el foco.

El control CheckBox puede estar en alguno de los tres estados siguientes del grupo de estados CheckStates:

Nombre del estado	Descripción
Unchecked	Apariencia del control CheckBox cuando la propiedad IsChecked está establecida en False.
Checked	Apariencia del control CheckBox cuando la propiedad IsChecked está establecida en True.
Indeterminate	Apariencia del control CheckBox cuando la propiedad IsThreeState está establecida en True y la propiedad IsChecked está establecida en Null.

La apariencia predeterminada de los estados activados de un control CheckBox es la siguiente:

Sugerencia

Un grupo de estados contiene los estados visuales que forman parte de la misma categoría lógica y que no se pueden mostrar al mismo tiempo.Por ejemplo, el grupo CommonStates incluye estados relacionados con la interacción del usuario mediante un dispositivo de entrada como el mouse.Solo se puede mostrar un estado de este grupo de estados cada vez, pero un estado de un grupo sí se puede mostrar al mismo tiempo que un estado de otro grupo de estados.

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación del estado, haga clic en el botón de grabación  en la mesa de trabajo, o bien seleccione Base en el panel Estados. Para modificar la apariencia del control cuando dos estados diferentes están activos, puede anclar una vista previa de un estado de un grupo de estados mientras modifica un estado de otro grupo de estados.

Enlace de plantillas

Puede enlazar mediante plantilla las propiedades Background, BorderBrush, Foreground, BorderThickness o Padding. Para obtener más información, vea Carry object properties through to the template.

Para convertir objetos en un control CheckBox

Las imágenes siguientes son un diseño completo (comp) de una casilla que incluye los estados Normal, MouseOver, Pressed, Disabled, y Focused:

Normal

MouseOver

Pressed

Disabled

Focused

Nota

Es importante destacar que los gráficos anteriores aún no son controles CheckBox, sino ilustraciones que se pueden convertir en controles CheckBox.

En este ejemplo se utiliza el código XAML del paso 4 del procedimiento siguiente, que corresponde al estado Normal en los gráficos anteriores.

1. Abra un nuevo proyecto de Microsoft Silverlight. En la categoría Pinceles, haga clic en Pincel de color sólido. En Editor, en el cuadro Valor hexa, escriba #FF808080.

2. Haga doble clic en **Cuadrícula ** en el panel Herramientas para crear un nuevo contenedor en la mesa de trabajo. En el panel Propiedades, en la categoría Diseño, a la derecha de Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto.

3. En la vista Código, busque el código siguiente y, a continuación, elimine la barra de cierre (/).

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

4. Copie y pegue el código siguiente en el proyecto nuevo, a continuación del código que encontró en el paso 3.

   <Grid>
      <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
         Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
         C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
         C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
         C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
         C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
         C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
         C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
         C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
         C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
         C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
         HorizontalAlignment="Left" Margin="2,2,0,2"/>
      <TextBlock 
         Foreground="White" Text="Lorem" Margin="15,0,0,0" 
         VerticalAlignment="Center"/>
   </Grid>
   

5. Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.

6. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en Cuadrícula y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en CheckBox y, a continuación, haga clic en Aceptar.

   En la Vista de código, observe que el código que pegó en el paso anterior ha sido reemplazado por el código para un nuevo control CheckBox. Además, Blend convirtió el control CheckBox en una plantilla para un nuevo estilo CheckBox y aplicó dicha plantilla a CheckBox.

   El objeto TextBlock de la composición tiene un primer plano de color blanco. El objeto TextBlock de la composición también contiene el texto Lorem. Además, el objeto TextBlock en el código anterior se ha reemplazado por un elemento ContentPresenter con las mismas propiedades que el TextBlock original.

7. Para agregar un estado MouseOver al control Button, siga este procedimiento:

   1. En el panel Objetos y escala de tiempo, haga clic en Rectángulo.

   2. En el panel Estados, haga clic en MouseOver.

   3. En el panel Propiedades, seleccione Fill y establezca la propiedad Alfa en 25.

      Tenga en cuenta que Rectángulo ha pasado a denominarse rectángulo.

   4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

8. Para aplicar las mismas propiedades al estado Pressed, en el panel Estados, haga clic con el botón secundario en MouseOver, haga clic en Copiar estado a y, a continuación, haga clic en Pressed.

9. Para desplazar la plantilla CheckBox cuando la casilla está en el estado Pressed, haga lo siguiente:

   1. En el panel Estados, haga clic en Pressed.

   2. En el panel Objetos y escala de tiempo, haga clic en Grid.

   3. En el panel Propiedades, en la ficha Trasladar de la categoría Transformar, establezca X e Y en 1.

      Tenga en cuenta que Cuadrícula en el panel Objetos y escala de tiempo ha pasado a denominarse cuadrícula.

   4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

10. En el panel Estados, seleccione Disabled. En el panel Objetos y escala de tiempo, seleccione cuadrícula. En el panel Propiedades, establezca Opacity en 50. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

11. Para agregar interactividad al control CheckBox, haga lo siguiente:

    1. En el panel Estados, haga clic en Normal, haga clic en Agregar transición y, a continuación, en Normal a MouseOver.

    2. En el cuadro Duración de la transición, escriba 0,2.

    3. Haga clic en Base para finalizar la grabación de estado.

    Ahora, cuando sitúe el puntero sobre CheckBox, la transición desde el estado Normal al estado MouseOver tardará 0,2 segundos. Todas las demás transiciones se producirán instantáneamente.

12. En el panel Objetos y escala de tiempo, haga clic en check. En la categoría Apariencia del panel Propiedades, establezca Opacity en 0. En el panel Estados, haga clic en Checked y, a continuación, en el panel Propiedades, establezca Opacity en 100. Haga clic en Base para finalizar la grabación de estado.

13. La composición incluye un rectángulo redondeado de color azul claro en el estado Focused que no está presente en el código XAML del estado Normal.

    Para crear el rectángulo, agregue un nuevo objeto Rectangle con el estado Focused seleccionado. Esta acción se denomina "dibujar en estado", es decir, el nuevo objeto es visible solo en el estado en el que se dibujó.

    Para crear el rectángulo en el estado Focused, en el panel Estados, haga clic en Focused y, a continuación, haga doble clic en la herramienta Rectángulo del panel Herramientas para crear el nuevo objeto Rectangle.

14. El siguiente paso es establecer las propiedades del nuevo rectángulo. Las propiedades tienen que cambiarse en Base, no en el estado Focused. Sin embargo, el rectángulo es actualmente transparente y no será visible en Base. Para mantener la visibilidad del rectángulo, haga clic en el **Indicador de modo de grabación **. Tenga en cuenta que el nuevo rectángulo (rectangle1) sigue seleccionado en el panel Objetos y escala de tiempo.

    En el panel Propiedades, establezca las siguientes propiedades para rectangle1:

    • Fill   En la categoría Pinceles, haga clic en Sin pincel.

    • Stroke   En la categoría Pinceles, haga clic en Pincel de color sólido. En el Editor, establezca el color en #FF00C0FF.

    • RadiusX   En la categoría Apariencia, establezca RadiusX en 2.

    • RadiusY   En la categoría Apariencia, establezca RadiusY en 2.

    • Margin   En la categoría Diseño, establezca Margin en los siguientes valores:

      • Izquierdo   -2

      • Derecho   -2

      • Superior   0

      • Bottom   0

15. Haga clic en **Devolver ámbito a **. Con CheckBox seleccionado en el panel Objetos y escala de tiempo, presione Ctrl+C para copiarlo. Presione cuatro veces Ctrl+V para pegar otros cuatro controles CheckBox en el contenedor. Use la herramienta Selección  para organizar las casillas en una columna. Con uno de los objetos CheckBox seleccionados en el panel Objetos y escala de tiempo, desactive la casilla IsEnabled en la categoría Propiedades comunes del panel Propiedades.

16. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

Para obtener información acerca de cómo aplicar la nueva plantilla CheckBox a otros objetos CheckBox, vea Aplicar o quitar un recurso en Blend.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control CheckBox de Microsoft Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.

Vea también

Conceptos

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

SimpleCheckBox (soporte WPF en Blend)

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