Sugerencias para la aplicación de estilos al control RadioButton para controles de Silverlight en Blend

Artículo
10/09/2014

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

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

JJ170621.a79fb949-5f67-4c15-afd5-5f28abd2ae07(es-es,VS.120).png

Estados del control RadioButton

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

Nombre del estado	Descripción
Normal	Apariencia del control RadioButton cuando no hay interacción con el control.
MouseOver	Apariencia del control RadioButton cuando el usuario mueve el puntero sobre él.
Pressed	Apariencia del control RadioButton 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 RadioButton cuando la propiedad IsEnabled está establecida en False.

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

Nombre del estado	Descripción
Unfocused	Apariencia del control RadioButton cuando no tiene el foco del teclado.
Focused	Apariencia del control RadioButton 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 RadioButton.

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

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

El control RadioButton puede estar en alguno de los tres estados siguientes del grupo de estados ValidationStates:

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

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 JJ170621.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(es-es,VS.120).png o 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 Trasladar propiedades de objetos a la plantilla en Blend.

Para convertir objetos en un control RadioButton

Las imágenes siguientes representan un diseño integral de un botón de opción que incluye los estados Normal, MouseOver, Pressed, Disabled y Focused:

Normal

RadioButton en estado Normal

MouseOver

RadioButton en estado MouseOver

Pressed

RadioButton en estado Presionado

Disabled

RadioButton en estado Deshabilitado

Focused

RadioButton en estado Enfocado

Nota

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

Este ejemplo utiliza el código XAML en el paso 4 del procedimiento siguiente.

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.
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.
En la vista Código, busque el código siguiente y, a continuación, elimine la barra de cierre (/).
```
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
```

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

<Grid>
   <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
   <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
   <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
</Grid>

Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.
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 RadioButton y, a continuación, haga clic en Aceptar.

En la vista Código, observe que el código que pegó en el paso anterior ha sido reemplazado por el código correspondiente a un nuevo RadioButton. Además, Blend convirtió Grid en una plantilla para un nuevo estilo RadioButton y aplicó esa plantilla a Grid.

Dado que TextBlock en la cuadrícula original tenía un primer plano blanco, el nuevo estilo RadioButton también lo tiene. El texto del elemento TextBlock era Lorem, por lo que se convierte en el valor de la propiedad Content del nuevo RadioButton. En la plantilla, TextBlock se ha reemplazado por un ContentPresenter, que tiene las mismas propiedades de diseño que TextBlock.
Para agregar un estado MouseOver a RadioButton, siga este procedimiento:
1. En el panel Objetos y escala de tiempo, haga clic en Elipse.
2. En el panel Estados, haga clic en MouseOver.
3. En el panel Propiedades, en la categoría Pinceles, haga clic en Fill y en la categoría Editor, establezca la propiedad Alpha en 25.
4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.
Nota

También puede finalizar la grabación de estado haciendo clic en el Indicador de modo de grabación en la esquina superior izquierda de la ventana del documento.
Haga clic con el botón secundario en MouseOver en el panel Estados, haga clic en Copiar estado a y, a continuación, haga clic en Pressed.
Para crear el desplazamiento, con el estado Pressed seleccionado en el panel Estados, seleccione Cuadrícula en el panel Objetos y escala de tiempo. En la categoría Transformación del panel Propiedades, establezca X e Y en 1. Haga clic en Base para finalizar la grabación de estado. Tenga en cuenta que Cuadrícula ahora se denomina cuadrícula.
En el panel Estados, haga clic en Disabled. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 50. Haga clic en Base para finalizar la grabación de estado.
En el panel Estados, haga clic en Normal. Haga clic en Agregar transición y, a continuación, haga clic en Normal a MouseOver. Establezca Duración de la transición en 0,2. Haga clic en Base para finalizar la grabación de estado.
En el panel Objetos y escala de tiempo, haga clic en viñeta. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 0.
En el panel Estados, haga clic en Checked. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 100. Haga clic en Base para finalizar la grabación de estado.
El diseño integral incluye un rectángulo azul alrededor del botón cuando el botón de opción se encuentra en el estado Focused. 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.
El siguiente paso es establecer las propiedades del nuevo rectángulo. Las propiedades deben cambiarse en el estado Base, no en el estado Focused. Sin embargo, ahora el rectángulo es transparente y no será visible en el estado Base. Haga clic en el botón de grabación para mantener la visibilidad del rectángulo. Tenga en cuenta que el nuevo rectángulo (rectángulo) sigue seleccionado en el panel Objetos y escala de tiempo. En el panel Propiedades, establezca las propiedades siguientes para rectángulo:
- 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
Haga clic en **Devolver ámbito a **. Con RadioButton seleccionado en el panel Objetos y escala de tiempo, presione Ctrl+C para copiarlo. Presione cuatro veces Ctrl+V para pegar otros cuatro controles RadioButton en el contenedor. Use la herramienta Selección para organizar las casillas en una columna. Con uno de los objetos RadioButton seleccionados en el panel Objetos y escala de tiempo, desactive la casilla IsEnabled en la categoría Propiedades comunes del panel Propiedades.
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 RadioButton a otros objetos RadioButton, vea Aplicar o quitar un recurso en Blend.

Referencias

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