Share via

Xamarin.Forms Botão de opção

  • Artigo

O Xamarin.FormsRadioButton é um tipo de botão que permite aos usuários selecionar uma opção de um conjunto. Cada opção é representada por um botão de opção, e você só pode selecionar um botão de opção em um grupo. Por padrão, cada RadioButton um exibe texto:

Captura de tela dos RadioButtons padrão

No entanto, em algumas plataformas um RadioButton pode exibir um View, e em todas as plataformas a aparência de cada RadioButton um pode ser redefinida com um ControlTemplate:

Captura de tela de RadioButtons redefinidos

O RadioButton controle define as seguintes propriedades:

  • Content, do tipo object, que define o string ou View a ser exibido pelo RadioButton.
  • IsChecked, do tipo bool, que define se o RadioButton está marcado. Essa propriedade usa uma TwoWay associação e tem um valor padrão de false.
  • GroupName, do tipo string, que define o nome que especifica quais RadioButton controles são mutuamente exclusivos. Essa propriedade tem um valor padrão de null.
  • Value, do tipo object, que define um valor exclusivo opcional associado ao RadioButton.
  • BorderColor, do tipo Color, que define a cor do traçado da borda.
  • BorderWidth, do tipo double, que define a RadioButton largura da borda.
  • CharacterSpacing, do tipo double, que define o espaçamento entre caracteres de qualquer texto exibido.
  • CornerRadius, do tipo int, que define o raio de canto do RadioButton.
  • FontAttributes, do tipo FontAttributes, que determina o estilo do texto.
  • FontFamily, do tipo string, que define a família de fontes.
  • FontSize, do tipo double, que define o tamanho da fonte.
  • TextColor, do tipo Color, que define a cor de qualquer texto exibido.
  • TextTransform, do tipo TextTransform, que define o invólucro de qualquer texto exibido.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

O RadioButton controle também define um CheckedChanged evento que é acionado quando a IsChecked propriedade é alterada, por meio de manipulação programática ou de usuário. O CheckedChangedEventArgs objeto que acompanha o CheckedChanged evento tem uma única propriedade chamada Value, do tipo bool. Quando o evento é acionado, o CheckedChangedEventArgs.Value valor da propriedade é definido como o novo valor da IsChecked propriedade.

RadioButton O RadioButtonGroup agrupamento pode ser gerenciado pela classe, que define as seguintes propriedades anexadas:

  • GroupName, do tipo string, que define o nome do grupo para RadioButton objetos em um Layout<View>arquivo .
  • SelectedValue, do tipo object, que representa o valor do objeto verificado RadioButton dentro de um Layout<View> grupo. Essa propriedade anexada usa uma TwoWay associação por padrão.

Para obter mais informações sobre a GroupName propriedade anexada, consulte Group RadioButtons. Para obter mais informações sobre a propriedade anexada, consulte Responder a alterações de SelectedValue estado do RadioButton.

Criar RadioButtons

A aparência de um RadioButton é definida pelo tipo de dados atribuídos à RadioButton.Content propriedade:

  • Quando a RadioButton.Content propriedade recebe um string, ela será exibida em cada plataforma, alinhada horizontalmente ao lado do círculo do botão de opção.
  • Quando o é atribuído um View, ele será exibido em plataformas suportadas (iOS, UWP), enquanto as RadioButton.Content plataformas não suportadas retornarão para uma representação de cadeia de caracteres do View objeto (Android). Em ambos os casos, o conteúdo é exibido alinhado horizontalmente ao lado do círculo do botão de opção.
  • Quando um ControlTemplate é aplicado a um RadioButton, a View pode ser atribuído à RadioButton.Content propriedade em todas as plataformas. Para obter mais informações, consulte Redefinir a aparência do RadioButton.

Exibir conteúdo baseado em cadeia de caracteres

Um RadioButton exibe texto quando a Content propriedade é atribuída a um string:

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

Neste exemplo, RadioButton os objetos são agrupados implicitamente dentro do mesmo contêiner pai. Esse XAML resulta na aparência mostrada nas seguintes capturas de tela:

Captura de tela de RadioButtons baseados em texto

Exibir conteúdo arbitrário

No iOS e na UWP, um RadioButton pode exibir conteúdo arbitrário quando a Content propriedade é atribuída a um View:

<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>

Neste exemplo, RadioButton os objetos são agrupados implicitamente dentro do mesmo contêiner pai. Esse XAML resulta na aparência mostrada nas seguintes capturas de tela:

Captura de ecrã de RadioButtons baseados em vista

No Android, RadioButton os View objetos exibirão uma representação baseada em cadeia de caracteres do objeto que foi definido como conteúdo:

Captura de tela do RadioButton baseado em visualização no Android

Observação

Quando um ControlTemplate é aplicado a um RadioButton, a View pode ser atribuído à RadioButton.Content propriedade em todas as plataformas. Para obter mais informações, consulte Redefinir a aparência do RadioButton.

Associar valores a RadioButtons

Cada RadioButton objeto tem uma Value propriedade, do tipo object, que define um valor exclusivo opcional a ser associado ao botão de opção. Isso permite que o valor de a RadioButton seja diferente de seu conteúdo e é particularmente útil quando RadioButton objetos estão exibindo View objetos.

O XAML a seguir mostra a Content configuração das propriedades e Value em cada RadioButton 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>

Neste exemplo, cada RadioButton um tem um Image como seu conteúdo, enquanto também define um valor baseado em cadeia de caracteres. Isso permite que o valor do botão de opção marcado seja facilmente identificado.

Botões de opção de grupo

Os botões de opção funcionam em grupos e há três abordagens para agrupar botões de opção:

  • Coloque-os dentro do mesmo recipiente pai. Isso é conhecido como agrupamento implícito .
  • Defina a GroupName propriedade em cada botão de opção no grupo com o mesmo valor. Isso é conhecido como agrupamento explícito .
  • Defina a propriedade anexada RadioButtonGroup.GroupName em um contêiner pai, que, por sua vez, define a GroupName propriedade de quaisquer RadioButton objetos no contêiner. Isso também é conhecido como agrupamento explícito .

Importante

RadioButton Os objetos não precisam pertencer ao mesmo pai para serem agrupados. Eles são mutuamente exclusivos, desde que compartilhem um nome de grupo.

Agrupamento explícito com a propriedade GroupName

O exemplo XAML a seguir mostra explicitamente o agrupamento de RadioButton objetos definindo suas GroupName propriedades:

<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" />

Neste exemplo, cada um RadioButton é mutuamente exclusivo porque compartilha o mesmo GroupName valor.

Agrupamento explícito com a propriedade anexada RadioButtonGroup.GroupName

A RadioButtonGroup classe define uma GroupName propriedade anexada, do tipo string, que pode ser definida em um Layout<View> objeto. Isso permite que qualquer layout seja transformado em um grupo de botões de opção:

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

Neste exemplo, cada RadioButton um no StackLayout terá sua GroupName propriedade definida como colors, e será mutuamente exclusivo.

Observação

Quando um Layout<View> objeto que define a propriedade anexada RadioButtonGroup.GroupName contém um RadioButton que define sua GroupName propriedade, o RadioButton.GroupName valor da propriedade terá precedência.

Responder a alterações de estado do RadioButton

Um botão de opção tem dois estados: marcado ou desmarcado. Quando um botão de opção é marcado, sua IsChecked propriedade é true. Quando um botão de opção está desmarcado, sua IsChecked propriedade é false. Um botão de opção pode ser limpo tocando em outro botão de opção no mesmo grupo, mas não pode ser apagado tocando nele novamente. No entanto, você pode desmarcar um botão de opção programaticamente, configurando a propriedade IsChecked dele como false.

Responder a um disparo de evento

Quando a IsChecked propriedade é alterada, por meio de manipulação programática ou do usuário, o CheckedChanged evento é acionado. Um manipulador de eventos para esse evento pode ser registrado para responder à alteração:

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

O code-behind contém o manipulador para o CheckedChanged evento:

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

O sender argumento é o RadioButton responsável por esse evento. Você pode usar isso para acessar o RadioButton objeto ou para distinguir entre vários RadioButton objetos que compartilham o mesmo CheckedChanged manipulador de eventos.

Responder a uma alteração de propriedade

A RadioButtonGroup classe define uma SelectedValue propriedade anexada, do tipo object, que pode ser definida em um Layout<View> objeto. Essa propriedade anexada representa o valor do verificado RadioButton dentro de um grupo definido em um layout.

Quando a propriedade é alterada, por meio de IsChecked manipulação de usuário ou programática, a propriedade anexada RadioButtonGroup.SelectedValue também é alterada. Portanto, a propriedade anexada RadioButtonGroup.SelectedValue pode ser vinculada a dados a uma propriedade que armazena a seleção do usuário:

<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>

Neste exemplo, o valor da propriedade anexada RadioButtonGroup.GroupName é definido pela GroupName propriedade no contexto de vinculação. Da mesma forma, o valor da propriedade anexada RadioButtonGroup.SelectedValue é definido pela Selection propriedade no contexto de vinculação. Além disso, a Selection propriedade é atualizada para a Value propriedade do verificado RadioButton.

Estados visuais RadioButton

RadioButton Os objetos têm CheckedUnchecked e estados visuais que podem ser usados para iniciar uma alteração visual quando A RadioButton é marcado ou desmarcado.

O exemplo XAML a seguir mostra como definir um estado visual para os Checked estados e Unchecked :

<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>

Nesse exemplo, o Style implícito tem como destino os objetos RadioButton. O CheckedVisualState especifica que, quando um RadioButton é marcado, sua TextColor propriedade será definida como verde com um Opacity valor de 1. O UncheckedVisualState especifica que quando um RadioButton está em um estado não verificado, sua TextColor propriedade será definida como vermelho com um Opacity valor de 0,5. Portanto, o efeito geral é que quando um RadioButton é desmarcado é vermelho e parcialmente transparente, e é verde sem transparência quando é verificado:

Captura de tela dos estados visuais do RadioButton

Para obter mais informações sobre estados visuais, consulte Xamarin.Forms Visual State Manager.

Redefinir a aparência do RadioButton

Por padrão, RadioButton os objetos usam renderizadores de plataforma para utilizar controles nativos em plataformas com suporte. No entanto, RadioButton a estrutura visual pode ser redefinida com um ControlTemplate, para que RadioButton os objetos tenham uma aparência idêntica em todas as plataformas. Isso é possível porque a RadioButton classe herda da TemplatedView classe.

O XAML a seguir mostra um ControlTemplate que pode ser usado para redefinir a estrutura visual de 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>

Neste exemplo, o elemento raiz do ControlTemplate é um Frame objeto que define Checked e Unchecked estados visuais. O Frame objeto usa uma combinação de Grid, Ellipsee ContentPresenter objetos para definir a estrutura visual de um RadioButtonarquivo . O exemplo também inclui um estilo implícito que atribuirá a RadioButtonTemplate propriedade de ControlTemplate quaisquer RadioButton objetos na página.

Observação

O ContentPresenter objeto marca o local na estrutura visual onde RadioButton o conteúdo será exibido.

O XAML a seguir mostra RadioButton objetos que consomem o ControlTemplate estilo 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>

Neste exemplo, a estrutura visual definida para cada um RadioButton é substituída pela estrutura visual definida no ControlTemplate, e assim em tempo de execução os ControlTemplate objetos no se tornam parte da árvore visual para cada RadioButton. Além disso, o conteúdo de cada um RadioButton é substituído no ContentPresenter definido no modelo de controle. Isso resulta na seguinte RadioButton aparência:

Captura de tela de RadioButtons modelo

Para obter mais informações sobre modelos de controle, consulte Xamarin.Forms modelos de controle.

Desativar um RadioButton

Às vezes, um aplicativo entra em um estado em que uma RadioButton verificação não é uma operação válida. Nesses casos, o pode ser desabilitado RadioButton definindo sua IsEnabled propriedade como false.