Xamarin.Forms Radiobutton

  • Artículo
  • 11 minutos para leer

Ejemplo de descarga Descarga del ejemplo

es un tipo de botón que permite a los Xamarin.FormsRadioButton usuarios seleccionar una opción de un conjunto. Cada opción se representa mediante un botón de radio y solo puede seleccionar un botón de radio en un grupo. De forma predeterminada, cada RadioButton una muestra texto:

Captura de pantalla de radiobuttons predeterminados RadioButtons

Sin embargo, en algunas plataformas un puede mostrar un y en todas las plataformas, la apariencia de cada se RadioButton puede volver a definir con ViewRadioButtonControlTemplate :

Captura de pantalla de radiobuttons

El RadioButton control define las siguientes propiedades:

  • Content, de tipo , que define o que va a objectstring mostrar View . RadioButton
  • IsChecked, de tipo bool , que define si se comprueba RadioButton . Esta propiedad usa un TwoWay enlace y tiene un valor predeterminado de false .
  • GroupName, de tipo string , que define el nombre que especifica qué controles son RadioButton mutuamente excluyentes. Esta propiedad tiene un valor predeterminado de null .
  • Value, de tipo object , que define un valor único opcional asociado a RadioButton .
  • BorderColor, de tipo Color , que define el color del trazo del borde.
  • BorderWidth, de tipo double , que define el ancho del RadioButton borde.
  • CharacterSpacing, de tipo double , que define el espaciado entre caracteres de cualquier texto mostrado.
  • CornerRadius, de tipo int , que define el radio de la esquina de RadioButton .
  • FontAttributes, de tipo FontAttributes , que determina el estilo de texto.
  • FontFamily, de tipo string , que define la familia de fuentes.
  • FontSize, de tipo double , que define el tamaño de fuente.
  • TextColor, de tipo Color , que define el color de cualquier texto mostrado.
  • TextTransform, de tipo TextTransform , que define el uso de mayúsculas y minúsculas de cualquier texto mostrado.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

El control también define un evento que se desencadena cuando cambia la propiedad, ya sea mediante la manipulación de usuarios RadioButtonCheckedChanged o mediante IsChecked programación. El CheckedChangedEventArgs objeto que acompaña al evento tiene una sola propiedad denominada , de tipo CheckedChangedValuebool . Cuando se desencadena el evento, el valor de la CheckedChangedEventArgs.Value propiedad se establece en el nuevo valor de la propiedad IsChecked .

RadioButton La agrupación se puede administrar mediante la RadioButtonGroup clase , que define las siguientes propiedades adjuntas:

  • GroupName, de tipo string , que define el nombre del grupo para los objetos de RadioButtonLayout<View> .
  • SelectedValue, de tipo object , que representa el valor del objeto activado dentro de un RadioButtonLayout<View> grupo. Esta propiedad adjunta usa un TwoWay enlace de forma predeterminada.

Para obtener más información sobre GroupName la propiedad adjunta, vea GroupName. Para obtener más información sobre la SelectedValue propiedad adjunta, vea SelectedValue

Crear radiobuttons

El tipo de datos asignado a la propiedad define la apariencia RadioButton de RadioButton.Content un objeto :

  • Cuando se asigna a la propiedad , se mostrará en cada plataforma, alineada horizontalmente junto al RadioButton.Content círculo del botón de string radio.
  • Cuando se asigna un , se mostrará en las plataformas admitidas RadioButton.Content (iOS, UWP), mientras que las plataformas no admitidas se reservarán a una representación de cadena del ViewView objeto (Android). En ambos casos, el contenido se muestra alineado horizontalmente junto al círculo del botón de radio.
  • Cuando se ControlTemplate aplica a , se puede asignar un a la propiedad en todas las RadioButtonViewRadioButton.Content plataformas. Para obtener más información, vea Redefine RadioButton appearance.

Mostrar contenido basado en cadenas

muestra RadioButton texto cuando se asigna a la propiedad un Contentstring :

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat" />
    <RadioButton Content="Dog" />
    <RadioButton Content="Elephant" />
    <RadioButton Content="Monkey"
                 IsChecked="true" />
</StackLayout>

En este ejemplo, RadioButton los objetos se agrupan implícitamente dentro del mismo contenedor primario. Este CÓDIGO XAML da como resultado la apariencia que se muestra en las capturas de pantalla siguientes:

Captura de pantalla de radioButtons basadosen texto

Mostrar contenido arbitrario

En iOS y UWP, puede mostrar contenido arbitrario cuando a RadioButton la propiedad se le asigna un ContentView :

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton>
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

En este ejemplo, RadioButton los objetos se agrupan implícitamente dentro del mismo contenedor primario. Este CÓDIGO XAML da como resultado la apariencia que se muestra en las capturas de pantalla siguientes:

Captura de pantalla de RadioButtons basados en vistas

En Android, los objetos mostrarán una representación basada en cadenas del objeto que RadioButton se ha establecido como View contenido:

Captura de pantalla de RadioButton basado en vistas en Android

Nota:

Cuando se ControlTemplate aplica a , se puede asignar un a la propiedad en todas las RadioButtonViewRadioButton.Content plataformas. Para obtener más información, vea Redefine RadioButton appearance.

Asociación de valores con RadioButtons

Cada RadioButton objeto tiene una Value propiedad, de tipo , que define un object valor único opcional para asociar con el botón de radio. Esto permite que el valor de un sea diferente de su contenido y es especialmente útil cuando RadioButtonRadioButton los objetos muestran View objetos.

El código XAML siguiente muestra cómo establecer las Content propiedades y en cada ValueRadioButton objeto:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Value="Cat">
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Dog">
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Elephant">
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Monkey">
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

En este ejemplo, cada uno tiene como su contenido, mientras RadioButton que también define un valor basado en Image cadenas. Esto permite identificar fácilmente el valor del botón de radio activado.

Group RadioButtons

Los botones de radio funcionan en grupos y hay tres enfoques para agrupar botones de radio:

  • Colóctelos dentro del mismo contenedor primario. Esto se conoce como agrupación implícita.
  • Establezca la GroupName propiedad de cada botón de radio del grupo en el mismo valor. Esto se conoce como agrupación explícita.
  • Establezca la propiedad adjunta en un contenedor primario, que a su RadioButtonGroup.GroupName vez establece la propiedad de cualquier objeto del GroupNameRadioButton contenedor. Esto también se conoce como agrupación explícita.

Importante

RadioButton Los objetos no tienen que pertenecer al mismo elemento primario que se va a agrupar. Se excluyen mutuamente siempre que compartan un nombre de grupo.

Agrupación explícita con la propiedad GroupName

En el ejemplo xaml siguiente se muestra la agrupación explícita RadioButton de objetos estableciendo sus GroupName propiedades:

<Label Text="What's your favorite color?" />
<RadioButton Content="Red"
             GroupName="colors" />
<RadioButton Content="Green"
             GroupName="colors" />
<RadioButton Content="Blue"
             GroupName="colors" />
<RadioButton Content="Other"
             GroupName="colors" />

En este ejemplo, cada RadioButton uno es mutuamente excluyente porque comparte el mismo GroupName valor.

Agrupación explícita con la propiedad adjunta RadioButtonGroup.GroupName

La RadioButtonGroup clase define una propiedad GroupName adjunta, de tipo , que se puede string establecer en un objeto Layout<View> . Esto permite que cualquier diseño se transforme en un grupo de botones de radio:

<StackLayout RadioButtonGroup.GroupName="colors">
    <Label Text="What's your favorite color?" />
    <RadioButton Content="Red" />
    <RadioButton Content="Green" />
    <RadioButton Content="Blue" />
    <RadioButton Content="Other" />
</StackLayout>

En este ejemplo, cada RadioButton de tendrá su propiedad establecida en y será StackLayoutGroupNamefruits mutuamente excluyente.

Nota:

Cuando un objeto que establece la propiedad adjunta contiene un que Layout<View> establece su RadioButtonGroup.GroupNameRadioButtonGroupName propiedad, el valor de la RadioButton.GroupName propiedad tendrá prioridad.

Respuesta a los cambios de estado de RadioButton

Un botón de radio tiene dos estados: seleccionado o sin seleccionar. Cuando se comprueba un botón de radio, su IsChecked propiedad es true . Cuando se desactiva un botón de radio, su IsChecked propiedad es false . Un botón de radio se puede borrar pulsando otro botón de radio del mismo grupo, pero no se puede borrar pulsando de nuevo. Sin embargo, para desactivar un botón de radio mediante programación puede establecer su propiedad IsChecked en false.

Respuesta a la activación de un evento

Cuando cambia la propiedad, ya sea mediante la manipulación del usuario o IsChecked mediante programación, el CheckedChanged evento se desanfila. Se puede registrar un controlador de eventos para este evento para responder al cambio:

<RadioButton Content="Red"
             GroupName="colors"
             CheckedChanged="OnColorsRadioButtonCheckedChanged" />

El código subyacente contiene el controlador del CheckedChanged evento:

void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation
}

El sender argumento es el responsable de este RadioButton evento. Puede usarlo para tener acceso al objeto o para distinguir entre RadioButton varios RadioButton objetos que comparten el mismo controlador CheckedChanged de eventos.

Respuesta a un cambio de propiedad

La RadioButtonGroup clase define una propiedad SelectedValue adjunta, de tipo , que se puede object establecer en un objeto Layout<View> . Esta propiedad adjunta representa el valor de checked RadioButton dentro de un grupo definido en un diseño.

Cuando cambia la propiedad, ya sea mediante la manipulación de usuarios o IsChecked mediante programación, también RadioButtonGroup.SelectedValue cambia la propiedad adjunta. Por lo tanto, RadioButtonGroup.SelectedValue la propiedad adjunta puede estar enlazada a datos a una propiedad que almacena la selección del usuario:

<StackLayout RadioButtonGroup.GroupName="{Binding GroupName}"
             RadioButtonGroup.SelectedValue="{Binding Selection}">
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat"
                 Value="Cat" />
    <RadioButton Content="Dog"
                 Value="Dog" />
    <RadioButton Content="Elephant"
                 Value="Elephant" />
    <RadioButton Content="Monkey"
                 Value="Monkey"/>
    <Label x:Name="animalLabel">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="You have chosen:" />
                <Span Text="{Binding Selection}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

En este ejemplo, la propiedad establece el valor de la propiedad adjunta RadioButtonGroup.GroupName en el contexto de GroupName enlace. De forma similar, el valor de la RadioButtonGroup.SelectedValue propiedad adjunta se establece mediante la propiedad en el contexto de Selection enlace. Además, la Selection propiedad se actualiza a la propiedad del ValueRadioButton activado.

Estados visuales de RadioButton

RadioButton Los objetos Checked tienen estados visuales y que se pueden usar para iniciar un cambio visual cuando se comprueba o Unchecked desactiva RadioButton .

En el ejemplo xaml siguiente se muestra cómo definir un estado visual para los Checked estados Unchecked y :

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CheckedStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Green" />
                                <Setter Property="Opacity"
                                        Value="1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Red" />
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Label Text="What's your favorite mode of transport?" />
        <RadioButton Content="Car" />
        <RadioButton Content="Bike" />
        <RadioButton Content="Train" />
        <RadioButton Content="Walking" />
    </StackLayout>
</ContentPage>

En este ejemplo, la clase Style implícita se destina a objetos RadioButton. especifica que cuando se comprueba , su propiedad se establecerá CheckedVisualState en verde con un valor RadioButtonTextColor de Opacity 1. especifica que cuando un objeto está en un estado desactivado, su propiedad se establecerá en rojo con un UncheckedVisualState valor de RadioButtonTextColorOpacity 0,5. Por lo tanto, el efecto general es que cuando se desactiva , es rojo y parcialmente transparente, y es verde sin transparencia cuando RadioButton se comprueba:

Captura de pantalla de los estados visualesde

Para obtener más información sobre los estados visuales, vea Xamarin.Forms Visual State Manager .

Redefinición de la apariencia de RadioButton

De forma predeterminada, RadioButton los objetos usan representadores de plataforma para utilizar controles nativos en plataformas admitidas. Sin embargo, la estructura visual se puede volver a definir con , para que los objetos RadioButton tengan una apariencia idéntica en todas las ControlTemplateRadioButton plataformas. Esto es posible porque RadioButton la clase hereda de la TemplatedView clase .

El código XAML siguiente muestra ControlTemplate un objeto que se puede usar para volver a definir la estructura visual de los RadioButton objetos:

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate">
            <Frame BorderColor="#F3F2F1"
                   BackgroundColor="#F3F2F1"
                   HasShadow="False"
                   HeightRequest="100"
                   WidthRequest="100"
                   HorizontalOptions="Start"
                   VerticalOptions="Start"
                   Padding="0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Property="BorderColor"
                                            Value="#FF3300" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="#F3F2F1" />
                                    <Setter Property="BorderColor"
                                            Value="#F3F2F1" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid Margin="4"
                      WidthRequest="100">
                    <Grid WidthRequest="18"
                          HeightRequest="18"
                          HorizontalOptions="End"
                          VerticalOptions="Start">
                        <Ellipse Stroke="Blue"
                                 Fill="White"
                                 WidthRequest="16"
                                 HeightRequest="16"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                        <Ellipse x:Name="check"
                                 Fill="Blue"
                                 WidthRequest="8"
                                 HeightRequest="8"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                    </Grid>
                    <ContentPresenter />
                </Grid>
            </Frame>
        </ControlTemplate>

        <Style TargetType="RadioButton">
            <Setter Property="ControlTemplate"
                    Value="{StaticResource RadioButtonTemplate}" />
        </Style>
    </ContentPage.Resources>
    <!-- Page content -->
</ContentPage>

En este ejemplo, el elemento raíz de es ControlTemplate un objeto que define los estados visuales y FrameCheckedUnchecked . El Frame objeto utiliza una combinación de objetos , y para definir la estructura visual de GridEllipseContentPresenter . RadioButton En el ejemplo también se incluye un estilo implícito que asignará a la propiedad de ControlTemplate cualquier objeto de la RadioButton página.

Nota:

El ContentPresenter objeto marca la ubicación en la estructura visual donde se mostrará el RadioButton contenido.

El código XAML siguiente muestra RadioButton los objetos que ControlTemplate consumen a través del RadioButton implícito:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <StackLayout RadioButtonGroup.GroupName="animals"
                 Orientation="Horizontal">
        <RadioButton Value="Cat">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="cat.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Cat"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Dog">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="dog.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Dog"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Elephant">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="elephant.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Elephant"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Monkey">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="monkey.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Monkey"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
    </StackLayout>
</StackLayout>

En este ejemplo, la estructura visual definida para cada se reemplaza por la estructura visual definida en y, por tanto, en tiempo de ejecución, los objetos del se convierten en parte del árbol visual para RadioButtonControlTemplate cada ControlTemplateRadioButton . Además, el contenido de cada RadioButton se sustituye por el definido en la plantilla de ContentPresenter control. Esto da como resultado la siguiente RadioButton apariencia:

Captura de pantalla de radioButtons con plantilla

Para obtener más información sobre las plantillas de control, vea Xamarin.Forms control templates .

Deshabilitar un RadioButton

A veces, una aplicación entra en un estado en el que RadioButton una operación que se comprueba no es una operación válida. En tales casos, se puede deshabilitar el objeto RadioButton estableciendo su propiedad IsEnabled en false.