Xamarin.Forms RadioButton

  • Article
  • 10 minutes to read

Download Sample Download the sample

The Xamarin.Forms RadioButton is a type of button that allows users to select i option from a fix. Each choice is represented by one radio button, and you tin just select one radio button in a group. By default, each RadioButton displays text:

Screenshot of default RadioButtons

However, on some platforms a RadioButton can display a View, and on all platforms the appearance of each RadioButton can be redefined with a ControlTemplate:

Screenshot of redefined RadioButtons

The RadioButton control defines the following backdrop:

  • Content, of blazon object, which defines the cord or View to be displayed by the RadioButton.
  • IsChecked, of type bool, which defines whether the RadioButton is checked. This property uses a TwoWay binding, and has a default value of false.
  • GroupName, of type string, which defines the name that specifies which RadioButton controls are mutually sectional. This belongings has a default value of null.
  • Value, of blazon object, which defines an optional unique value associated with the RadioButton.
  • BorderColor, of type Color, which defines the border stroke colour.
  • BorderWidth, of type double, which defines the width of the RadioButton edge.
  • CharacterSpacing, of blazon double, which defines the spacing between characters of any displayed text.
  • CornerRadius, of type int, which defines the corner radius of the RadioButton.
  • FontAttributes, of blazon FontAttributes, which determines text style.
  • FontFamily, of type cord, which defines the font family.
  • FontSize, of type double, which defines the font size.
  • TextColor, of type Color, which defines the colour of any displayed text.
  • TextTransform, of type TextTransform, which defines the casing of whatever displayed text.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

The RadioButton control too defines a CheckedChanged outcome that's fired when the IsChecked holding changes, either through user or programmatic manipulation. The CheckedChangedEventArgs object that accompanies the CheckedChanged issue has a single property named Value, of type bool. When the event is fired, the value of the CheckedChangedEventArgs.Value property is set to the new value of the IsChecked holding.

RadioButton grouping can be managed by the RadioButtonGroup form, which defines the following attached properties:

  • GroupName, of type string, which defines the group name for RadioButton objects in a Layout<View>.
  • SelectedValue, of type object, which represents the value of the checked RadioButton object within a Layout<View> group. This fastened property uses a TwoWay bounden by default.

For more information most the GroupName fastened property, see Group RadioButtons. For more information most the SelectedValue fastened belongings, see Answer to RadioButton state changes.

Create RadioButtons

The appearance of a RadioButton is defined by the type of data assigned to the RadioButton.Content property:

  • When the RadioButton.Content belongings is assigned a cord, it will be displayed on each platform, horizontally aligned side by side to the radio button circumvolve.
  • When the RadioButton.Content is assigned a View, information technology will be displayed on supported platforms (iOS, UWP), while unsupported platforms will fallback to a string representation of the View object (Android). In both cases, the content is displayed horizontally aligned next to the radio push circumvolve.
  • When a ControlTemplate is practical to a RadioButton, a View tin exist assigned to the RadioButton.Content property on all platforms. For more data, see Redefine RadioButton appearance.

Display cord-based content

A RadioButton displays text when the Content holding is assigned a string:

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

In this example, RadioButton objects are implicitly grouped within the same parent container. This XAML results in the appearance shown in the post-obit screenshots:

Screenshot of text-based RadioButtons

Display arbitrary content

On iOS and UWP, a RadioButton can display arbitrary content when the Content holding is assigned a View:

              <StackLayout>     <Label Text="What'southward 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>             <Paradigm Source="elephant.png" />         </RadioButton.Content>     </RadioButton>     <RadioButton>         <RadioButton.Content>             <Image Source="monkey.png" />         </RadioButton.Content>     </RadioButton> </StackLayout>

In this example, RadioButton objects are implicitly grouped inside the same parent container. This XAML results in the appearance shown in the post-obit screenshots:

Screenshot of view-based RadioButtons

On Android, RadioButton objects volition display a string-based representation of the View object that'due south been set every bit content:

Screenshot of view-based RadioButton on Android

Associate values with RadioButtons

Each RadioButton object has a Value property, of type object, which defines an optional unique value to associate with the radio push button. This enables the value of a RadioButton to exist different to its content, and is particularly useful when RadioButton objects are displaying View objects.

The following XAML shows setting the Content and Value properties on each RadioButton object:

              <StackLayout>     <Characterization Text="What'south your favorite animal?" />     <RadioButton Value="Cat">         <RadioButton.Content>             <Image Source="cat.png" />         </RadioButton.Content>     </RadioButton>     <RadioButton Value="Canis familiaris">         <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>             <Paradigm Source="monkey.png" />         </RadioButton.Content>     </RadioButton> </StackLayout>

In this example, each RadioButton has an Image every bit its content, while besides defining a string-based value. This enables the value of the checked radio push to exist hands identified.

Group RadioButtons

Radio buttons work in groups, and there are three approaches to grouping radio buttons:

  • Place them inside the same parent container. This is known as implicit grouping.
  • Set up the GroupName belongings on each radio button in the group to the same value. This is known as explicit grouping.
  • Gear up the RadioButtonGroup.GroupName attached property on a parent container, which in plough sets the GroupName property of whatever RadioButton objects in the container. This is also known as explicit grouping.

Important

RadioButton objects don't take to belong to the same parent to be grouped. They are mutually exclusive provided that they share a group proper noun.

Explicit grouping with the GroupName holding

The following XAML instance shows explicitly group RadioButton objects by setting their GroupName properties:

              <Label Text="What's your favorite colour?" /> <RadioButton Content="Red"              GroupName="colors" /> <RadioButton Content="Dark-green"              GroupName="colors" /> <RadioButton Content="Blue"              GroupName="colors" /> <RadioButton Content="Other"              GroupName="colors" />

In this example, each RadioButton is mutually exclusive considering it shares the same GroupName value.

Explicit grouping with the RadioButtonGroup.GroupName attached property

The RadioButtonGroup grade defines a GroupName fastened property, of blazon string, which can be assault a Layout<View> object. This enables any layout to exist turned into a radio button group:

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

In this instance, each RadioButton in the StackLayout volition accept its GroupName property set to colors, and will be mutually exclusive.

Note

When a Layout<View> object that sets the RadioButtonGroup.GroupName attached property contains a RadioButton that sets its GroupName holding, the value of the RadioButton.GroupName property will take precedence.

Respond to RadioButton land changes

A radio push has 2 states: checked or unchecked. When a radio button is checked, its IsChecked holding is truthful. When a radio button is unchecked, its IsChecked property is false. A radio push can exist cleared past borer some other radio button in the same group, only information technology cannot be cleared by tapping it once again. However, yous can clear a radio button programmatically past setting its IsChecked property to false.

Respond to an event firing

When the IsChecked property changes, either through user or programmatic manipulation, the CheckedChanged event fires. An event handler for this event can be registered to reply to the modify:

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

The code-backside contains the handler for the CheckedChanged effect:

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

The sender argument is the RadioButton responsible for this issue. Y'all can use this to admission the RadioButton object, or to distinguish between multiple RadioButton objects sharing the same CheckedChanged event handler.

Respond to a belongings change

The RadioButtonGroup class defines a SelectedValue attached property, of blazon object, which can be set on a Layout<View> object. This attached belongings represents the value of the checked RadioButton within a grouping defined on a layout.

When the IsChecked holding changes, either through user or programmatic manipulation, the RadioButtonGroup.SelectedValue fastened belongings as well changes. Therefore, the RadioButtonGroup.SelectedValue attached holding can be data spring to a property that stores the user's selection:

              <StackLayout RadioButtonGroup.GroupName="{Bounden GroupName}"              RadioButtonGroup.SelectedValue="{Binding Pick}">     <Label Text="What's your favorite fauna?" />     <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>     </Characterization> </StackLayout>

In this instance, the value of the RadioButtonGroup.GroupName attached property is set past the GroupName holding on the binding context. Similarly, the value of the RadioButtonGroup.SelectedValue attached property is prepare by the Selection holding on the binding context. In addition, the Selection property is updated to the Value property of the checked RadioButton.

RadioButton visual states

RadioButton objects have Checked and Unchecked visual states that can be used to initiate a visual change when a RadioButton is checked or unchecked.

The following XAML example shows how to define a visual land for the Checked and Unchecked states:

              <ContentPage ...>     <ContentPage.Resources>         <Style TargetType="RadioButton">             <Setter Property="VisualStateManager.VisualStateGroups">                 <VisualStateGroupList>                     <VisualStateGroup x:Proper noun="CheckedStates">                         <VisualState ten:Name="Checked">                             <VisualState.Setters>                                 <Setter Property="TextColor"                                         Value="Dark-green" />                                 <Setter Property="Opacity"                                         Value="one" />                             </VisualState.Setters>                         </VisualState>                         <VisualState x:Proper name="Unchecked">                             <VisualState.Setters>                                 <Setter Property="TextColor"                                         Value="Red" />                                 <Setter Property="Opacity"                                         Value="0.5" />                             </VisualState.Setters>                         </VisualState>                     </VisualStateGroup>                 </VisualStateGroupList>             </Setter>         </Way>     </ContentPage.Resources>     <StackLayout>         <Label Text="What's your favorite mode of send?" />         <RadioButton Content="Machine" />         <RadioButton Content="Bike" />         <RadioButton Content="Train" />         <RadioButton Content="Walking" />     </StackLayout> </ContentPage>

In this case, the implicit Style targets RadioButton objects. The Checked VisualState specifies that when a RadioButton is checked, its TextColor belongings will be ready to dark-green with an Opacity value of 1. The Unchecked VisualState specifies that when a RadioButton is in a unchecked state, its TextColor property will be set to red with an Opacity value of 0.5. Therefore, the overall event is that when a RadioButton is unchecked it'southward red and partially transparent, and is dark-green without transparency when it's checked:

Screenshot of RadioButton visual states

For more information about visual states, see Xamarin.Forms Visual Country Manager.

Redefine RadioButton advent

By default, RadioButton objects use platform renderers to utilize native controls on supported platforms. However, RadioButton visual structure can be redefined with a ControlTemplate, then that RadioButton objects accept an identical appearance on all platforms. This is possible because the RadioButton class inherits from the TemplatedView class.

The following XAML shows a ControlTemplate that can be used to redefine the visual structure of RadioButton objects:

              <ContentPage ...>     <ContentPage.Resources>         <ControlTemplate x:Fundamental="RadioButtonTemplate">             <Frame BorderColor="#F3F2F1"                    BackgroundColor="#F3F2F1"                    HasShadow="Imitation"                    HeightRequest="100"                    WidthRequest="100"                    HorizontalOptions="Start"                    VerticalOptions="Showtime"                    Padding="0">                 <VisualStateManager.VisualStateGroups>                     <VisualStateGroupList>                         <VisualStateGroup 10:Name="CheckedStates">                             <VisualState x:Proper name="Checked">                                 <VisualState.Setters>                                     <Setter Holding="BorderColor"                                             Value="#FF3300" />                                     <Setter TargetName="bank check"                                             Property="Opacity"                                             Value="1" />                                 </VisualState.Setters>                             </VisualState>                             <VisualState x:Name="Unchecked">                                 <VisualState.Setters>                                     <Setter Belongings="BackgroundColor"                                             Value="#F3F2F1" />                                     <Setter Property="BorderColor"                                             Value="#F3F2F1" />                                     <Setter TargetName="check"                                             Belongings="Opacity"                                             Value="0" />                                 </VisualState.Setters>                             </VisualState>                         </VisualStateGroup>                     </VisualStateGroupList>                 </VisualStateManager.VisualStateGroups>                 <Grid Margin="4"                       WidthRequest="100">                     <Filigree WidthRequest="18"                           HeightRequest="18"                           HorizontalOptions="End"                           VerticalOptions="First">                         <Ellipse Stroke="Blue"                                  Fill="White"                                  WidthRequest="16"                                  HeightRequest="16"                                  HorizontalOptions="Center"                                  VerticalOptions="Centre" />                         <Ellipse x:Proper name="cheque"                                  Fill up="Bluish"                                  WidthRequest="8"                                  HeightRequest="8"                                  HorizontalOptions="Middle"                                  VerticalOptions="Center" />                     </Filigree>                     <ContentPresenter />                 </Grid>             </Frame>         </ControlTemplate>          <Mode TargetType="RadioButton">             <Setter Belongings="ControlTemplate"                     Value="{StaticResource RadioButtonTemplate}" />         </Style>     </ContentPage.Resource>     <!-- Folio content --> </ContentPage>

In this case, the root chemical element of the ControlTemplate is a Frame object that defines Checked and Unchecked visual states. The Frame object uses a combination of Grid, Ellipse, and ContentPresenter objects to define the visual structure of a RadioButton. The example as well includes an implicit fashion that will assign the RadioButtonTemplate to the ControlTemplate holding of any RadioButton objects on the folio.

The following XAML shows RadioButton objects that consume the ControlTemplate via the implicit way:

              <StackLayout>     <Characterization Text="What'southward your favorite beast?" />     <StackLayout RadioButtonGroup.GroupName="animals"                  Orientation="Horizontal">         <RadioButton Value="True cat">             <RadioButton.Content>                 <StackLayout>                     <Paradigm Source="cat.png"                            HorizontalOptions="Middle"                            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="Domestic dog"                            HorizontalOptions="Center"                            VerticalOptions="End" />                 </StackLayout>             </RadioButton.Content>         </RadioButton>         <RadioButton Value="Elephant">             <RadioButton.Content>                 <StackLayout>                     <Image Source="elephant.png"                            HorizontalOptions="Middle"                            VerticalOptions="CenterAndExpand" />                     <Label Text="Elephant"                            HorizontalOptions="Center"                            VerticalOptions="Stop" />                 </StackLayout>             </RadioButton.Content>         </RadioButton>         <RadioButton Value="Monkey">             <RadioButton.Content>                 <StackLayout>                     <Prototype Source="monkey.png"                            HorizontalOptions="Center"                            VerticalOptions="CenterAndExpand" />                     <Characterization Text="Monkey"                            HorizontalOptions="Heart"                            VerticalOptions="Stop" />                 </StackLayout>             </RadioButton.Content>         </RadioButton>     </StackLayout> </StackLayout>

In this example, the visual construction defined for each RadioButton is replaced with the visual structure defined in the ControlTemplate, and so at runtime the objects in the ControlTemplate get part of the visual tree for each RadioButton. In improver, the content for each RadioButton is substituted into the ContentPresenter divers in the command template. This results in the following RadioButton appearance:

Screenshot of templated RadioButtons

For more data about control templates, see Xamarin.Forms control templates.

Disable a RadioButton

Sometimes an application enters a state where a RadioButton being checked is not a valid operation. In such cases, the RadioButton can exist disabled by setting its IsEnabled holding to false.

  • RadioButton Demos (sample)
  • Xamarin.Forms Push
  • Xamarin.Forms Visual Country Manager