Our Insights

Innovative Ways - Satisfied Clientele

get a free quote

Custom Radio button with Xamarin. Forms 5

iFour Team - June 24, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Custom Radio button with Xamarin. Forms 5

Table of Content

1.Introduction
2.Create RadioButtons
3.Display string-based content
4.Associate values with RadioButtons
5.Group Radio Buttons
6.Respond to RadioButton state changes
7.Respond to a property change
8.Control Template
9.Conclusion

Introduction

A radio button is a type of selection control that allows users to choose one option from a set of options. There is no default RadioButton control in Xamarin. Forms, so we must build our own custom RadioButton control.

A RadioButton can, however, show a View on certain platforms, and the presence of each RadioButton on all platforms can be redefined with a ControlTemplate.

The properties of the RadioButton control are as follows:

Content:The string or View to be displayed by the RadioButton is described by the content, which is of type object.
IsChecked: IsChecked is a bool value that indicates whether the RadioButton is tested. The default value of this property is false, and it uses a Two-way binding.
GroupName: The name that specifies which RadioButton controls are mutually exclusive is described by GroupName, which is of type string.
Value: Value is an entity of type value that specifies an optional specific value for the RadioButton.
BorederColor: BorderColor is a Color variable that specifies the color of the border stroke.
BorderWidth: BorderWidth is a double-valued property that determines the width of the RadioButton border.
CharacterSpacing: CharacterSpacing is a double-valued variable that controls the spacing between characters in any displayed text.
CornerRadius: CornerRadius is an int variable that determines the RadioButton's corner radius.
FontAttributes: FontAttributes is a form of FontAttributes that controls text style.
FontFamily: FontFamily is a string of type and specifies the font family.
FontSize: FontSize is a double-valued variable that specifies the font size.
TextColor: TextColor is a Color variable that specifies the color of any displayed text.
text-transform: The casing of any displayed text is specified by TextTransform, which is of type TextTransform.

These properties are backed by BindableProperty objects, so they can be styled and used as data binding targets.

The CheckedChanged event is fired by the RadioButton control when the IsChecked property changes, either by the user or programmatic manipulation. The CheckedChangedEventArgs object has a single bool property called Value that is associated with the CheckedChanged event. The value of the CheckedChangedEventArgs.Value property is set to the new value of the IsChecked property when the event is fired.

The RadioButtonGroup class, which specifies the following attached properties, can be used to handle radio button grouping.

GroupName: The value of the checked RadioButton object within a LayoutView category is represented by SelectedValue, an object of type object. By default, this attached property uses a Two-way binding. The group name for RadioButton objects in a LayoutView is specified by GroupName, which is of type string.
SelectedValue: The value of the checked RadioButton object within a LayoutView category is represented by SelectedValue, an object of type object. By default, this attached property uses a Two-way binding.

Create RadioButtons

The type of data allocated to a RadioButton determines the appearance of the RadioButton. Property of the content:

When a string is allocated to the RadioButton. The content property is shown horizontally next to the radio button circle on each platform.
When a View is assigned to the RadioButton.Content, it will be shown on platforms that support it (iOS, UWP), while platforms that don't support it will fall back to a string representation of the View object (Android). The material is shown horizontally next to the radio button circle in both cases.
A View may be allocated to a RadioButton when a ControlTemplate is added to it. Content ownership across all channels.

Display string-based content

When the Content property of a RadioButton is set to a string, it displays the text:

RadioButton objects are implicitly grouped within the same parent container in this example.

Associate values with RadioButtons

Value property of type object exists on each RadioButton object, which specifies an optional unique value to associate with the radio button. This allows a RadioButton's value to vary from its content, which is especially useful when RadioButton objects are used to display View objects.

Each RadioButton in this example has an Image as its material, as well as a string-based value. This makes it simple to figure out what the meaning of the checked radio button is.

Group Radio Buttons

Radio buttons are grouped together, and there are three ways to group radio buttons:

Value Types

Placing them in the same container as the parent is known as an implicit grouping.
Setting the GroupName value on each of the group's radio buttons to the same value is known as Explicit grouping.
Set the RadioButtonGroup to the desired value. A parent container's GroupName attached property sets the GroupName property of any RadioButton objects in the container. Explicit grouping is another name for this.

Respond to RadioButton state changes

There are two states for a radio button: checked and unchecked. The IsChecked property of a radio button is valid when it is checked. The IsChecked property of a radio button is incorrect when it is unchecked. It is possible to clear a radio button by tapping another radio button in the same category, but it is not possible to clear it by tapping it again. You can, however, programmatically clear a radio button by setting its IsChecked property to false.

Respond to a property change

A SelectedValue attached property of type object is described by the RadioButtonGroup class and can be set on a Layout object. The value of the verified RadioButton within a group identified on a layout is represented by this attached property.

The RadioButtonGroup.SelectedValue attached property changes when the IsChecked property is modified, whether by a user or a program. As a result, the attached property RadioButtonGroup.SelectedValue can be data bound to a property stores the user's selection:

Control Template

We should add a new control template to our ContentPage.Resources that can be added to the RadioButton. It manages the appearance of the RadioButton and also has access to the VisualStateManager, allowing us to customize the Checked state. Now, this is a bit of code, but what we're doing is drawing a circle in the top right corner of a frame that has a ContentPresenter in the main region where we can fill in any UI we want.

One Stop Solution for Xamarin App Development Company ? Contact here

Reach out us

In this example, we can use image and text on the bottom of radio button:

XAML for RadioButton Controls:

Output

Figure 1: Output of the Radio button

Conclusion

In this blog, we have learned - How to create a Custom Radio button using Xamarin.Forms 5 in detail. We've also gone through all of the different ways to make radio buttons in Xamarin with examples.

Technology Stacks

Technology that meets your business requirements

Planning a cutting-edge technology software solution? Our team can assist you to handle any technology challenge. Our custom software development team has great expertise in most emerging technologies. At iFour, our major concern is towards driving acute flexibility in your custom software development. For the entire software development life-cycle, we implement any type of workflow requested by the client. We also provide a set of distinct flexible engagement models for our clients to select the most optimal solution for their business. We assist our customers to get the required edge that is needed to take their present business to next level by delivering various out-reaching technologies.