Xamarin.Forms Radiobutton

Baixar o exemplo

O Xamarin.FormsRadioButton é um tipo de botão que permite que os usuários selecionem 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 um RadioButton exibe o texto:

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

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ço da borda.
• BorderWidth, do tipo double, que define a largura da RadioButton 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 de 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 uso de maiúsculas e minúsculas de qualquer texto exibido.

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

O RadioButton controle também define um CheckedChanged evento que é acionado quando a IsChecked propriedade é alterada, seja 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 valor da CheckedChangedEventArgs.Value 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>.
• SelectedValue, do tipo object, que representa o valor do objeto verificado RadioButton em 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 SelectedValue propriedade anexada, consulte Responder às alterações de estado de RadioButton.

Criar RadioButtons

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

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

Exibir conteúdo baseado em cadeia de caracteres

Um RadioButton exibe o 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:

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:

exibição

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

Observação

Quando um ControlTemplate é aplicado a um RadioButton, um View pode ser atribuído à RadioButton.Content propriedade em todas as plataformas. Para obter mais informações, consulte Redefinir a aparência de 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 um RadioButton seja diferente de seu conteúdo e é particularmente útil quando RadioButton os objetos estão exibindo View objetos.

O XAML a seguir mostra a configuração das Content 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, ao mesmo tempo em que define um valor baseado em cadeia de caracteres. Isso permite que o valor do botão de opção verificado seja facilmente identificado.

Agrupar RadioButtons

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 contêiner 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 RadioButtonGroup.GroupName propriedade anexada em um contêiner pai, que, por sua vez, define a GroupName propriedade de qualquer RadioButton objeto 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 o agrupamento explícito de objetos definindo RadioButton 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 colorse será mutuamente exclusiva.

Observação

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

Responder às alterações de estado de RadioButton

Um botão de opção tem dois estados: marcado ou desmarcado. Quando um botão de opção é verificado, sua IsChecked propriedade é true. Quando um botão de opção é 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 limpo 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 evento disparado

Quando a IsChecked propriedade é alterada, por meio de manipulação programática ou de usuário, o evento é acionado CheckedChanged . 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 do 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 em um grupo definido em um layout.

Quando a IsChecked propriedade é alterada, por meio de manipulação programática ou de usuário, a RadioButtonGroup.SelectedValue propriedade anexada também é alterada. Portanto, a RadioButtonGroup.SelectedValue propriedade anexada pode ser de dados associados 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 RadioButtonGroup.GroupName propriedade anexada é definido pela GroupName propriedade no contexto de associação. Da mesma forma, o valor da RadioButtonGroup.SelectedValue propriedade anexada é definido pela Selection propriedade no contexto de associação. Além disso, a Selection propriedade é atualizada para a Value propriedade do verificado RadioButton.

Estados visuais de RadioButton

RadioButton os objetos têm Checked estados visuais e Unchecked que podem ser usados para iniciar uma alteração visual quando um RadioButton é verificado 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>

Neste exemplo, os objetos de destino RadioButton implícitosStyle. O CheckedVisualState especifica que, quando um RadioButton for verificado, sua TextColor propriedade será definida como verde com um Opacity valor de 1. O UncheckedVisualState especifica que quando um RadioButton está em um estado desmarcado, sua TextColor propriedade será definida como vermelha com um Opacity valor de 0,5. Portanto, o efeito geral é que, quando um RadioButton é desmarcado, ele é vermelho e parcialmente transparente e fica verde sem transparência quando é verificado:

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

Redefinir a aparência de 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 Gridobjetos , Ellipsee ContentPresenter para definir a estrutura visual de um RadioButton. O exemplo também inclui um estilo implícito que atribuirá o RadioButtonTemplateControlTemplate à propriedade de quaisquer RadioButton objetos na página.

Observação

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

O XAML a seguir mostra RadioButton objetos que consomem o ControlTemplate por meio do 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 RadioButton é substituída pela estrutura visual definida no ControlTemplatee, portanto, em runtime, os objetos no ControlTemplate tornam-se parte da árvore visual para cada RadioButton. Além disso, o conteúdo de cada RadioButton um é substituído no ContentPresenter definido no modelo de controle. Isso resulta na seguinte RadioButton aparência:

com modelo

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

Desabilitar um RadioButton

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

Links relacionados

• Demonstrações de RadioButton (exemplo)
• Xamarin.Forms Botão
• Xamarin.Forms Gerenciador de Estado Visual