Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Los botones de radio, también denominados botones de opción, permiten a los usuarios seleccionar una opción de una colección de dos o más opciones mutuamente excluyentes, pero relacionadas. Los botones de radio siempre se usan en grupos y cada opción se representa mediante un botón de radio del grupo.
En el estado predeterminado, no se selecciona ningún botón de radio en un grupo RadioButtons. Es decir, se borran todos los botones de radio. Sin embargo, una vez que un usuario ha seleccionado un botón de radio, el usuario no puede anular la selección del botón para restaurar el grupo a su estado inicial despejado.
El comportamiento singular de un grupo de radiobotones lo distingue de casillas, que admiten la selección múltiple y la deselección o desactivación.
ejemplo de un grupo RadioButtons, con un botón de radio seleccionado
¿Es este el control adecuado?
Use botones de radio para permitir que los usuarios seleccionen entre dos o más opciones mutuamente excluyentes.
grupo RadioButtons, con un botón de radio seleccionado
Use botones de radio cuando los usuarios necesiten ver todas las opciones antes de realizar una selección. Los botones de radio resaltan todas las opciones igualmente, lo que significa que algunas opciones pueden llamar más atención de lo necesario o deseado.
A menos que todas las opciones merecen la misma atención, considere la posibilidad de usar otros controles. Por ejemplo, para recomendar una opción única para la mayoría de los usuarios y en la mayoría de las situaciones, use un cuadro combinado para mostrar esa mejor opción como opción predeterminada.
un cuadro combinado, mostrando una opción predeterminada
Si solo hay dos opciones posibles que se pueden expresar claramente como una única opción binaria, como activar/desactivar o sí/no, combínelas en una sola casilla de verificación o un control de interruptor . Por ejemplo, use una sola casilla para "Acepto" en lugar de dos botones de radio para "Acepto" y "No estoy de acuerdo".
No use dos botones de radio para una sola opción binaria:
dos botones de radio que presentan una opción binaria
Use una casilla en su lugar:
La casilla de verificación es una buena alternativa para presentar una elección binaria
Cuando los usuarios pueden seleccionar varias opciones, utilice casillas.
Las casillas admiten selección múltiple
Cuando las opciones de los usuarios se encuentran dentro de un intervalo de valores (por ejemplo,
un control deslizante, mostrando un valor en un intervalo de valores
Si hay más de ocho opciones, use un cuadro combinado .
un cuadro de lista, donde se muestran varias opciones
Si las opciones disponibles se basan en el contexto actual de una aplicación o pueden variar dinámicamente, use un control de lista.
Recommendations
- Asegúrese de que el propósito y el estado actual de un conjunto de botones de radio sean explícitos.
- Limite la etiqueta de texto del botón de radio a una sola línea.
- Si la etiqueta de texto es dinámica, considere cómo cambiará automáticamente el tamaño del botón y qué ocurrirá con los objetos visuales que lo rodean.
- Use la fuente predeterminada a menos que las directrices de marca le indiquen lo contrario.
- No coloques dos grupos de RadioButtons en paralelo. Cuando dos grupos de RadioButtons están justo al lado de los demás, puede ser difícil que los usuarios determinen qué botones pertenecen a cada grupo.
Introducción a RadioButtons
RadioButtons frente a RadioButton
Hay dos maneras de crear grupos de botones de radio: RadioButtons y RadioButton.
- Recomendamos el control RadioButtons. Este control simplifica el diseño, controla la navegación por teclado y la accesibilidad, y admite el enlace a un origen de datos.
- Puede usar grupos de controles RadioButton individuales.
El acceso al teclado y el comportamiento de navegación se han optimizado en el control RadioButtons. Estas mejoras ayudan tanto a la accesibilidad como a los usuarios avanzados del teclado a desplazarse por la lista de opciones de forma más rápida y sencilla.
Además de estas mejoras, el diseño visual predeterminado de botones de radio individuales en un grupo RadioButtons se ha optimizado a través de la orientación automatizada, el espaciado y la configuración de margen. Esta optimización elimina el requisito de especificar estas propiedades, ya que es posible que tenga que hacerlo al utilizar un control de agrupación más primitivo, como StackPanel o Grid.
Navegación por un grupo RadioButtons
El control tiene un comportamiento de navegación especial que ayuda a los usuarios del teclado a navegar por la lista de forma más rápida y sencilla.
Foco del teclado
El control soporta dos estados:
- No se selecciona ningún botón de radio
- Se selecciona un botón de radio
En las secciones siguientes se describe el comportamiento de foco del control en cada estado.
No se selecciona ningún botón de radio
Cuando no se selecciona ningún botón de radio, el primer botón de radio de la lista obtiene el foco.
Nota:
El elemento que recibe el foco al navegar inicialmente con la tecla Tab no está seleccionado.
Lista sin foco de tabulación, sin selección
Lista sin foco de tabulación y ningún elemento seleccionado
Lista con foco de tabulación inicial, sin selección
Lista con el foco puesto en la tabulación inicial y sin ningún elemento seleccionado
Se selecciona un botón de radio
Cuando un usuario ficha en la lista donde ya está seleccionado un botón de radio, el botón de radio seleccionado obtiene el foco.
Lista sin foco de tabulador
Lista sin enfoque de tabulación y con un elemento seleccionado
Lista con enfoque inicial de tabulación
Lista con el foco de tabulación inicial y un elemento seleccionado
Navegación por teclado
Para obtener más información sobre los comportamientos generales de navegación por teclado, vea Interacciones de teclado: navegación.
Cuando un elemento de un grupo de ya tiene el foco, el usuario puede usar las teclas de dirección para la "navegación interna" entre los elementos del grupo. Las teclas de flecha Arriba y Abajo se mueven al elemento lógico "siguiente" o "anterior", tal como se define en el marcado XAML. Las teclas de flecha izquierda y derecha se mueven espacialmente.
Navegación dentro de diseños de una sola columna o de una sola fila
En un diseño de una sola columna o de una sola fila, la navegación por el teclado da como resultado el siguiente comportamiento:
de columna única
ejemplo de navegación por teclado en un grupo RadioButtons de una sola columna
Las teclas flecha arriba y Flecha abajo se mueven entre los elementos.Las teclas de flecha izquierda y flecha derecha no hacen nada.
de fila única
Ejemplo de navegación por teclado en un grupo radioButtons de una sola fila
Las teclas de dirección Izquierda y Arriba se mueven al elemento anterior y las teclas de flecha Derecha y Abajo se mueven al siguiente elemento.
Navegación dentro de diseños de varias columnas y de varias filas
En un diseño de cuadrícula de varias columnas y varias filas, la navegación por el teclado da como resultado este comportamiento:
teclas de dirección izquierda/derecha
ejemplo de navegación por teclado horizontal en un grupo RadioButtons de varias columnas o filas
Las teclas de dirección izquierda y derecha mueven el foco horizontalmente entre los elementos de una fila.
Ejemplo de navegación por teclado horizontal con foco en el último elemento de una columna
Cuando el foco está en el último elemento de una columna y se presiona la tecla de flecha derecha o izquierda, el foco se mueve al último elemento de la columna siguiente o anterior (si existe).
teclas de flecha arriba/abajo
ejemplo de navegación por teclado vertical en un grupo RadioButtons de varias columnas o filas
Las teclas de flecha Arriba y Abajo mueven el foco verticalmente entre los elementos de una columna.
ejemplo de navegación por teclado vertical con foco en el último elemento de una columna
Cuando el foco está en el último elemento de una columna y se presiona la tecla de flecha abajo, el foco se mueve al primer elemento de la columna siguiente (si existe). Cuando el foco está en el primer elemento de una columna y se presiona la tecla de flecha arriba, el foco se mueve al último elemento de la columna anterior (si existe).
Para obtener más información, vea interacciones del teclado.
Envoltura
El grupo RadioButtons no traslada el enfoque de la primera fila o columna a la última, ni de la última fila o columna a la primera. Esto se debe a que, cuando los usuarios usan un lector de pantalla, se pierde una sensación de límite y una indicación clara de principio y fin, lo que dificulta a los usuarios con discapacidad visual navegar por la lista.
El control tampoco admite la enumeración, ya que el control está pensado para contener un número razonable de elementos (vea ¿Es este el control correcto?).
La selección sigue el foco
Cuando se usa el teclado para navegar entre los elementos de un grupo de , a medida que el foco se mueve de un elemento al siguiente, se selecciona el elemento recién centrado y se borra el elemento centrado anteriormente.
antes de la navegación mediante teclado
Ejemplo de enfoque y selección antes de la navegación con teclado
Foco y selección antes de la navegación con el teclado.
Después de la navegación del teclado
Ejemplo de foco y selección tras la navegación mediante teclado
Foco y selección después de la navegación del teclado, donde la tecla de flecha abajo mueve el foco al botón de radio 3, lo selecciona y borra el botón de radio 2.
Puede mover el foco sin cambiar la selección mediante ctrl+teclas de dirección para navegar. Después de mover el foco, puede usar la barra espaciadora para seleccionar el elemento que tiene el foco actualmente.
Navegar con el panel de juego y el control remoto
Si usas un panel para juegos o un control remoto para moverte entre botones de radio, el comportamiento de "selección sigue el foco" está deshabilitado y el usuario debe presionar el botón "A" para seleccionar el botón de radio que tiene el foco actualmente.
Comportamiento de accesibilidad
En la tabla siguiente se describe cómo el Narrador gestiona un grupo de y lo que se anuncia. Este comportamiento depende de cómo un usuario haya establecido las preferencias de detalles del Narrador.
| Acción | Anuncio del narrador |
|---|---|
| El foco se mueve a un elemento seleccionado | "nombre, RadioButton, seleccionado, x de N" |
| El foco se mueve a un elemento no seleccionado (Si navega con teclas ctrl-flecha o Xbox controlador para juegos, que indica que la selección no sigue el enfoque. |
"nombre, RadioButton, no seleccionado, x de N" |
Nota:
El nombre que el Narrador anuncia para cada elemento es el valor de la propiedad adjunta AutomationProperties.Name si está disponible para el elemento; de lo contrario, es el valor devuelto por el método ToString del elemento.
x es el número del elemento actual. N es el número total de elementos del grupo.
Crear un grupo de RadioButtons de WinUI 3
- API importantes: clase RadioButtons, propiedad SelectedItem, propiedad SelectedIndex, evento SelectionChanged, clase RadioButton, propiedad IsChecked, evento Checked
Abra la aplicación Galería de WinUI 3 y vea radioButton en acción.
Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.
El control usa un modelo de contenido similar a un ItemsControl. Esto significa que puede:
- Rellénelo agregando elementos directamente a la colección Items o enlazando los datos a su propiedad ItemsSource.
- Use las propiedades SelectedIndex o SelectedItem para obtener y establecer qué opción está seleccionada.
- Controla el evento SelectionChanged para tomar medidas cuando se elige una opción.
Aquí, declara un control de simple con tres opciones. La propiedad encabezado
<RadioButtons Header="Background color"
SelectedIndex="0"
SelectionChanged="BackgroundColor_SelectionChanged">
<x:String>Red</x:String>
<x:String>Green</x:String>
<x:String>Blue</x:String>
</RadioButtons>
El resultado tiene este aspecto:
Grupo de tres botones de radio
Para realizar una acción cuando el usuario selecciona una opción, controle el evento SelectionChanged. Aquí, cambia el color de fondo de un elemento Border
private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ExampleBorder != null && sender is RadioButtons rb)
{
string colorName = rb.SelectedItem as string;
switch (colorName)
{
case "Red":
ExampleBorder.Background = new SolidColorBrush(Colors.Red);
break;
case "Green":
ExampleBorder.Background = new SolidColorBrush(Colors.Green);
break;
case "Blue":
ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
break;
}
}
}
Sugerencia
También puede obtener el elemento seleccionado de la propiedad SelectionChangedEventArgs.AddedItems. Solo habrá un elemento seleccionado, en el índice 0, por lo que podría obtener el elemento seleccionado de la siguiente manera: .
Estados de selección
Un botón de radio tiene dos estados: seleccionado o desactivado. Cuando seleccionas una opción en un grupo de , puedes obtener su valor a través de la propiedad SelectedItem y su ubicación en la colección mediante la propiedad SelectedIndex. Se puede borrar un botón de radio si un usuario selecciona otro botón de radio en el mismo grupo, pero no se puede borrar si el usuario lo selecciona de nuevo. Sin embargo, puede borrar un grupo de botones de radio mediante programación estableciendo o . (Si se establece en cualquier valor fuera del intervalo de la colección de , no se obtiene ninguna selección).
Contenido de RadioButtons
En el ejemplo anterior, ha rellenado el control con cadenas simples. El control proporcionó los botones de radio y usó las cadenas como etiqueta para cada uno.
Sin embargo, puede rellenar el control con cualquier objeto . Normalmente, desea que el objeto proporcione una representación de cadena que se pueda usar como etiqueta de texto. En algunos casos, una imagen podría ser adecuada en lugar de texto.
Aquí, los elementos SymbolIcon se usan para poblar el control.
<RadioButtons Header="Select an icon option:">
<SymbolIcon Symbol="Back"/>
<SymbolIcon Symbol="Attach"/>
<SymbolIcon Symbol="HangUp"/>
<SymbolIcon Symbol="FullScreen"/>
</RadioButtons>
Botones de radio de grupo con iconos de símbolos
También puede usar controles RadioButton individuales para rellenar los elementos de . Este es un caso especial que tratamos más adelante. Vea los controles de botón de radio en un grupo de botones de radio.
Una ventaja de poder usar cualquier objeto es que puede enlazar el control a un tipo personalizado en el modelo de datos. En la sección siguiente se muestra esto.
Vinculación de datos
El control admite el enlace de datos a su propiedad ItemsSource. En este ejemplo se muestra cómo puede enlazar el control a un origen de datos personalizado. La apariencia y la funcionalidad de este ejemplo son las mismas que el ejemplo de color de fondo anterior, pero aquí, los pinceles de color se almacenan en el modelo de datos en lugar de crearse en el controlador de eventos .
<RadioButtons Header="Background color"
SelectedIndex="0"
SelectionChanged="BackgroundColor_SelectionChanged"
ItemsSource="{x:Bind colorOptionItems}"/>
public sealed partial class MainPage : Page
{
// Custom data item.
public class ColorOptionDataModel
{
public string Label { get; set; }
public SolidColorBrush ColorBrush { get; set; }
public override string ToString()
{
return Label;
}
}
List<ColorOptionDataModel> colorOptionItems;
public MainPage1()
{
this.InitializeComponent();
colorOptionItems = new List<ColorOptionDataModel>();
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
}
private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var option = e.AddedItems[0] as ColorOptionDataModel;
ExampleBorder.Background = option?.ColorBrush;
}
}
Controles RadioButton en un grupo RadioButtons
Puede usar controles individuales RadioButton para rellenar los elementos de . Puede hacerlo para obtener acceso a determinadas propiedades, como ; o es posible que tenga código , pero quiera aprovechar el diseño y la navegación de .
<RadioButtons Header="Background color">
<RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
<RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
<RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>
Al usar controles en un grupo de , el control sabe cómo presentar el , por lo que no terminará con dos círculos de selección.
Sin embargo, hay algunos comportamientos que debe tener en cuenta. Se recomienda controlar el estado y los eventos en los controles individuales o en , pero no ambos, para evitar conflictos.
En esta tabla se muestran los eventos y propiedades relacionados en ambos controles.
| RadioButton | Botones de radio |
|---|---|
| activado, desactivado, Haga clic en | CambioDeSelección |
| EstáMarcado | ElementoSeleccionado, ÍndiceSeleccionado |
Si gestionas eventos de forma individual , como o , y también gestionas el evento , ambos eventos se dispararán. El evento se produce primero y, a continuación, se produce el evento , lo que podría dar lugar a conflictos.
Las propiedades , y permanecen sincronizadas. Un cambio en una propiedad actualiza las otras dos.
Se omite la propiedad RadioButton.GroupName. El grupo es creado por el control .
Definición de varias columnas
De forma predeterminada, el control organiza sus botones de radio verticalmente en una sola columna. Puede establecer la propiedad
<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
<x:String>Item 4</x:String>
<x:String>Item 5</x:String>
<x:String>Item 6</x:String>
</RadioButtons>
botones de radio en dos grupos de tres columnas
Sugerencia
Para tener elementos organizados en una sola fila horizontal, establezca igual al número de elementos del grupo.
Creación de su propio grupo radioButton
Importante
Se recomienda usar el control para agrupar elementos .
Los botones de radio funcionan en grupos. Puede agrupar controles individuales RadioButton de dos maneras:
- Colóquelos dentro del mismo contenedor primario.
- Establezca la propiedad GroupName en cada botón de radio en el mismo valor.
En este ejemplo, el primer grupo de botones de radio se agrupa implícitamente al estar en el mismo panel de apilamiento. El segundo grupo se divide entre dos paneles de pila, por lo que se usa para agruparlos explícitamente en un único grupo.
<StackPanel>
<StackPanel>
<TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
<!-- Group 1 - implicit grouping -->
<StackPanel Orientation="Horizontal">
<RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
<RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
<RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
IsChecked="True"/>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
<!-- Group 2 - grouped by GroupName -->
<StackPanel Orientation="Horizontal">
<StackPanel>
<RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked"/>
<RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked" IsChecked="True"/>
<RadioButton Content="White" Tag="white" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked"/>
</StackPanel>
</StackPanel>
</StackPanel>
<Border x:Name="ExampleBorder"
BorderBrush="#FFFFD700" Background="#FFFFFFFF"
BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>
private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
if (rb != null && ExampleBorder != null)
{
string colorName = rb.Tag.ToString();
switch (colorName)
{
case "yellow":
ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
break;
case "green":
ExampleBorder.Background = new SolidColorBrush(Colors.Green);
break;
case "white":
ExampleBorder.Background = new SolidColorBrush(Colors.White);
break;
}
}
}
private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
if (rb != null && ExampleBorder != null)
{
string colorName = rb.Tag.ToString();
switch (colorName)
{
case "yellow":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
break;
case "green":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
break;
case "white":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
break;
}
}
}
Estos dos grupos de controles de tienen este aspecto:
botones de radio en dos grupos
Estados del botón de radio
Un botón de radio tiene dos estados: seleccionado o desactivado. Cuando se selecciona un botón de radio, su propiedad IsChecked es . Cuando se borra un botón de radio, su propiedad es . Se puede borrar un botón de radio si un usuario selecciona otro botón de radio en el mismo grupo, pero no se puede borrar si el usuario lo selecciona de nuevo. Sin embargo, puede borrar un botón de radio programáticamente estableciendo su propiedad en .
Visuales a considerar
El espaciado predeterminado de los controles de individuales es diferente del espaciado proporcionado por un grupo de . Para aplicar el espaciado de a controles de individuales, use un valor de , como se muestra aquí.
<StackPanel>
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="Margin" Value="0,0,7,3"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="Background"/>
<RadioButton Content="Item 1"/>
<RadioButton Content="Item 2"/>
<RadioButton Content="Item 3"/>
</StackPanel>
Las imágenes siguientes muestran el espaciado preferido de botones de radio en un grupo.
Imagen que muestra un conjunto de botones de radio, organizados verticalmente
Imagen que muestra instrucciones de espaciado para botones de radio
Nota:
Si usa un control RadioButtons de WinUI, el espaciado, los márgenes y la orientación ya están optimizados.
Temas relacionados
- Botones
- Interruptores de palanca
- Casillas de verificación
- Listas y cuadros combinados
- controles deslizantes
- clase RadioButtons
- de clase RadioButton de
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
