Note: This is a guest post by Vinod Satapara. The author’s views are entirely her own and may not reflect the opinions of CodeItBro.
Xamarin.Forms 5 has included so many stunning features that make app development much more enjoyable. It has some excellent resources and styles that help in implementing incredible App themes.
In this blog, we are going to discuss how to create a beautiful radio button using Xamarin.forms 5. RadioButton is a type of button that allows users to select an option from a set. The radio button represents many options, and you have to choose only one radio button in a group.
Also Read: How To Create ASP.net Login Page Using C# with SQL Database [Download]
Properties of Radio Button
1. Content: Content is the type of object that defines the string or View element displayed by RadioButton.
2. IsChecked: IsChecked property is a Boolean type that defines whether RadioButton is checked or not. This property uses TwoWay binding and has a default value of false.
3. GroupName: GroupName is a Type of string that defines the name that specifies which RadioButton controls will be mutually exclusive. By default, the GroupName property is null.
4. Value: Value is an object type that defines an optional unique value associated with the RadioButton.
5. BorderColor: The Color type that defines the border stroke color.
6. BorderWidth: The controls are mutually exclusive. By default, the BorderWidth property is null.
7. CharachterSpacing: CharachterSpacing property type is double, which defines the spacing between characters of any text displayed.
8. CornerRadius: CornerRadius property type is int, defining the corner radius of the RadioButton.
9. FontAttributes: FontAttributes type that determines the font style.
10. FontFamily: String type defining the font family.
11. FontSize: Type double, which defines the font size.
12. TextColor: The Color type that defines the color of any displayed text.
13. TextTransform: TextTransform type, which defines the case of any displayed text.
14. SelectedValue: SelectedValue property represents the value of selected RadioButton, and SelectedValue property is by default Two-way binding uses.
Also Read: How to create ASP.NET Registration Form Using C# and SQL Server Database.
Events of Radio Button
CheckedChanged: The RadioButton control also defines a CheckedChanged event triggered when the IsChecked property changes by the user or programmatic editor. When the event is triggered, the worth of the CheckedChangedEventArgs, value property is ready for the new value of the IsChecked property.
How many types to create a Radio Button in Xamarin.Forms 5?
Using RadioButton.Content: There are three approaches for assign the RadioButton.content to the Radio Button.
1. When a string is assigned to the RadioButton.Content property appears horizontally aligned next to the radio button circle on each platform.
2. Once a View is assigned to RadioButton.Content will revert to a string representation of the View object (Android) while viewing supported platforms (iOS, UWP).
3. If implemented in the RadioButton Controltemplate, you can assign a View to the RadioButton.Content property on all platforms.
Also Read: CQRS and Event sourcing in ASP.NET [Explained]
1. Example of Radio Button using RadioButton.Content using String, View, and also using CheckedChanged Event
File Name: RadioButtonPage.xaml
Code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RadioButtonDemos.RadioButtonsPage"
Title="RadioButtons demo">
<StackLayout Margin="10">
<Label Text="What's your favorite animal?" />
<RadioButton Content="Cat"
CheckedChanged="OnAnimalRadioButtonCheckedChanged" />
<RadioButton Content="Dog"
CheckedChanged="OnAnimalRadioButtonCheckedChanged" />
<RadioButton Content="Elephant"
CheckedChanged="OnAnimalRadioButtonCheckedChanged" />
<RadioButton Content="Monkey"
IsChecked="True"
CheckedChanged="OnAnimalRadioButtonCheckedChanged" />
<Label x:Name="animalLabel"
Text="You have chosen: Monkey" />
<Label Text="What's your favorite animal?" />
<StackLayout>
<RadioButton Value="Cat"
CheckedChanged="OnAnimalImageRadioButtonCheckedChanged">
<RadioButton.Content>
<Image Source="cat.png" />
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Dog"
CheckedChanged="OnAnimalImageRadioButtonCheckedChanged">
<RadioButton.Content>
<Image Source="dog.png" />
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Elephant"
CheckedChanged="OnAnimalImageRadioButtonCheckedChanged">
<RadioButton.Content>
<Image Source="elephant.png" />
</RadioButton.Content>
</RadioButton>
<RadioButton Value="Monkey"
CheckedChanged="OnAnimalImageRadioButtonCheckedChanged">
<RadioButton.Content>
<Image Source="monkey.png" />
</RadioButton.Content>
</RadioButton>
</StackLayout>
<Label x:Name="animalImageLabel"
Text="You have chosen:" />
</StackLayout>
</ContentPage>
FIle Name: RadioButtonPage.xaml.cs
Code: You have added only two methods within the class file of the XAML page.
using Xamarin.Forms;
namespace RadioButtonDemos
{
public partial class BasicRadioButtonsPage : ContentPage
{
public BasicRadioButtonsPage()
{
InitializeComponent();
}
void OnAnimalRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
RadioButton button = sender as RadioButton;
animalLabel.Text = $"You have chosen: {button.Content}";
}
void OnAnimalImageRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
RadioButton button = sender as RadioButton;
animalImageLabel.Text = $"You have chosen: {button.Value}";
}
}
}
Output:
2. Using Group Radio Button
There are three ways to join the group on the radio button.
1. Place them in the same parent repository. This is known as an implicit grouping.
2. You have set the GroupName property on each radio button in the group with the same value. This is known as an explicit grouping.
3. Set the attached property RadioButtonGroup.GroupName in a parent container, which sets the GroupName property of any RadioButton object in the container. This is also known as an open grouping.
Example of Radio Button Using Group:
File Name: GroupingRadioButtonPage.xaml
Code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RadioButtonDemos.GroupedRadioButtonsPage"
Title="Grouped RadioButtons demo">
<StackLayout Margin="10">
<Label Text="What's your favorite color?" />
<RadioButton Content="Red"
GroupName="colors"
TextColor="Red"
CheckedChanged="OnColorsRadioButtonCheckedChanged" />
<RadioButton Content="Green"
GroupName="colors"
TextColor="Green"
CheckedChanged="OnColorsRadioButtonCheckedChanged" />
<RadioButton Content="Blue"
GroupName="colors"
TextColor="Blue"
CheckedChanged="OnColorsRadioButtonCheckedChanged" />
<RadioButton Content="Other"
GroupName="colors"
CheckedChanged="OnColorsRadioButtonCheckedChanged" />
<Label x:Name="colorLabel"
Text="You have chosen:" />
<Label Text="What's your favorite fruit?" />
<StackLayout RadioButtonGroup.GroupName="fruits">
<RadioButton Content="Apple"
CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
<RadioButton Content="Banana"
CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
<RadioButton Content="Pineapple"
CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
<RadioButton Content="Other"
CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
</StackLayout>
<Label x:Name="fruitLabel"
Text="You have chosen:" />
</StackLayout>
</ContentPage>
Output:
Also Read: React Native Vs. Ionic Vs. Xamarin Vs. NativeScript – Which One Is Better?
3. Radio Button using Visual State
RadioButton objects have Controlled and Unchecked visual states that can initiate a visual change when a RadioButton is checked or unchecked.
Example of Radio button using Visual State:
File Name: RadioButtonVisualStatePage.xaml
Code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RadioButtonDemos.BasicRadioButtonsVisualStatePage"
Title="RadioButton VisualState demo">
<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 Margin="10">
<Label Text="What's your favorite Mobile Company?" />
<RadioButton Content="Apple"
CheckedChanged="OnRadioButtonCheckedChanged" />
<RadioButton Content="MI"
CheckedChanged="OnRadioButtonCheckedChanged" />
<RadioButton Content="OnePlus"
CheckedChanged="OnRadioButtonCheckedChanged" />
<RadioButton Content="RealMe"
CheckedChanged="OnRadioButtonCheckedChanged" />
<RadioButton Content="VIVO"
CheckedChanged="OnRadioButtonCheckedChanged" />
<RadioButton Content="Samsung"
CheckedChanged="OnRadioButtonCheckedChanged" />
<Label x:Name="resultLabel"
Text="You have chosen:" />
</StackLayout>
</ContentPage>
File Name: RadioButtonVisualStatePage.xaml.cs
Code:
using Xamarin.Forms;
namespace RadioButtonDemos
{
public partial class BasicRadioButtonsVisualStatePage : ContentPage
{
public BasicRadioButtonsVisualStatePage()
{
InitializeComponent();
}
void OnRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
RadioButton button = sender as RadioButton;
resultLabel.Text = $"You have chosen: {button.Content}";
}
}
}
Output:
Also Read: How To Secure Azure Resources With Azure Governance Tools
Conclusion
In this tutorial, you learned how to create a stunning Radio button using Xamarin.Forms 5. We have also explained all types of creating radio buttons with the examples in xamarin.forms 5.
Author Bio: Vinod Satapara – Technical Director, iFour Technolab Pvt. Ltd.
Technocrat and entrepreneur with years of experience building large-scale enterprise web, cloud, and mobile applications using the latest technologies like ASP.NET, CORE, .NET MVC, Angular, and Blockchain. Keen interest in addressing business problems using the latest technologies and help organizations to achieve goals.
Hello Friends! I am Himanshu, a hobbyist programmer, tech enthusiast, and digital content creator.
With CodeItBro, my mission is to promote coding and help people from non-tech backgrounds to learn this modern-age skill!
