Xamarin.Forms Botão de opção
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:
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
:
O RadioButton
controle define as seguintes propriedades:
Content
, do tipoobject
, que define ostring
ouView
a ser exibido peloRadioButton
.IsChecked
, do tipobool
, que define se oRadioButton
está marcado. Essa propriedade usa umaTwoWay
associação e tem um valor padrão defalse
.GroupName
, do tipostring
, que define o nome que especifica quaisRadioButton
controles são mutuamente exclusivos. Essa propriedade tem um valor padrão denull
.Value
, do tipoobject
, que define um valor exclusivo opcional associado aoRadioButton
.BorderColor
, do tipoColor
, que define a cor do traçado da borda.BorderWidth
, do tipodouble
, que define aRadioButton
largura da borda.CharacterSpacing
, do tipodouble
, que define o espaçamento entre caracteres de qualquer texto exibido.CornerRadius
, do tipoint
, que define o raio de canto doRadioButton
.FontAttributes
, do tipoFontAttributes
, que determina o estilo do texto.FontFamily
, do tipostring
, que define a família de fontes.FontSize
, do tipodouble
, que define o tamanho da fonte.TextColor
, do tipoColor
, que define a cor de qualquer texto exibido.TextTransform
, do tipoTextTransform
, 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 tipostring
, que define o nome do grupo paraRadioButton
objetos em umLayout<View>
arquivo .SelectedValue
, do tipoobject
, que representa o valor do objeto verificadoRadioButton
dentro de umLayout<View>
grupo. Essa propriedade anexada usa umaTwoWay
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 umstring
, 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 asRadioButton.Content
plataformas não suportadas retornarão para uma representação de cadeia de caracteres doView
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 umRadioButton
, aView
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:
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:
No Android, RadioButton
os View
objetos exibirão uma representação baseada em cadeia de caracteres do objeto que foi definido como conteúdo:
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 aGroupName
propriedade de quaisquerRadioButton
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 Checked
Unchecked
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 Checked
VisualState
especifica que, quando um RadioButton
é marcado, sua TextColor
propriedade será definida como verde com um Opacity
valor de 1. O Unchecked
VisualState
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:
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
, Ellipse
e ContentPresenter
objetos para definir a estrutura visual de um RadioButton
arquivo . 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:
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
.