Visual Customization in .NET MAUI Radio Button (SfRadioButton)

14 Dec 20246 minutes to read

Customizing a state color

The default state colors can be customized using the CheckedColor and UncheckedColor properties. The checked state color is updated to the value of the CheckedColor property when the state changes to check. The unchecked state color is updated to the value of the UncheckedColor property when the state changes to unchecked.

XAML

<syncfusion:SfRadioGroup x:Name="radioGroup">
		<syncfusion:SfRadioButton x:Name="check" Text="Radio Button" IsChecked="True" CheckedColor="Green"/>
		<syncfusion:SfRadioButton x:Name="uncheck" Text="Radio Button" UncheckedColor="Violet"/>
	</syncfusion:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup();
	SfRadioButton check = new SfRadioButton();
	check.Text = "Radio Button";
	check.IsChecked = true;
	check.CheckedColor = Color.Green;
	SfRadioButton uncheck = new SfRadioButton();
	uncheck.Text = "Radio Button";
	uncheck.UncheckedColor = Colors.Violet;
	radioGroup.Children.Add(check);
	radioGroup.Children.Add(uncheck);
	this.Content = radioGroup;

StrokeThickness

The stroke thickness of the circle in the Radio Button control can be customized using the StrokeThickness property.

XAML

<syncfusion:SfRadioGroup>
		<syncfusion:SfRadioButton Text="Checked state" IsChecked="True" StrokeThickness="3"/>
		<syncfusion:SfRadioButton Text="Unchecked state" StrokeThickness="3"/>
	</syncfusion:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup();
	SfRadioButton check = new SfRadioButton();
	check.Text = "Checked State";
	check.IsChecked = true;
	check.StrokeThickness = 3;
	SfRadioButton uncheck = new SfRadioButton();
	uncheck.Text = "Unchecked State";
	uncheck.StrokeThickness = 3;
	radioGroup.Children.Add(check);
	radioGroup.Children.Add(uncheck);
	this.Content = radioGroup;

NOTE

StrokeThickness support has not been provided for Android Platform.

Setting a caption text appearance

You can customize the display text appearance of the SfRadioButton control using the following properties:

• TextColor : Changes the color of the text.
• HorizontalTextAlignment : Changes the horizontal alignment of the caption text.
• FontFamily : Changes the font family of the caption text.
• FontAttributes : Sets font attributes(bold/italic/none) of the caption text.
• FontSize : Sets font size of the caption text.

XAML

<syncfusion:SfRadioButton x:Name="radioButton" 
				  Text="Radio Button" 
				  IsChecked="True" 
				  TextColor="Blue" 
				  HorizontalTextAlignment="Center" 
			          FontFamily="Arial" 
				  FontAttributes="Bold" 
				  FontSize="20"/>

C#

SfRadioButton radioButton = new SfRadioButton();
	radioButton.Text = "Radio Button";
	radioButton.IsChecked = true;
	radioButton.TextColor = Colors.Blue;
	radioButton.HorizontalTextAlignment = TextAlignment.Center;
	radioButton.FontFamily = "Arial";
	radioButton.FontAttributes = FontAttributes.Bold;
	radioButton.FontSize = 20;
	this.Content = radioButton;

LineBreakMode

The LineBreakMode allows you to wrap or truncate the text. The default value of this property is NoWrap. The following other options are available in LineBreakMode:

• NoWrap - Avoids the text wrap.
• WordWrap - Wraps the text by words.
• CharacterWrap - Wraps the text by character.
• HeadTruncation - Truncates the text at the start.
• MiddleTruncation - Truncates the text at the center.
• TailTruncation - Truncates the text at the end.

XAML

<syncfusion:SfRadioButton   x:Name="RadioButton" 
				IsChecked="True" 
				WidthRequest="200" 
				LineBreakMode="WordWrap" 
				Text="The LineBreakMode allows you to wrap or truncate the text.">
				</syncfusion:SfRadioButton>

C#

StackLayout stackLayout = new StackLayout();
    SfRadioButton radioButton = new SfRadioButton();
    radioButton.Text = "The LineBreakMode allows you to wrap or truncate the text.";
    radioButton.LineBreakMode = LineBreakMode.WordWrap;
    radioButton.WidthRequest = 200;
    stackLayout.Children.Add(radioButton);

This demo can be downloaded from GitHub link

Size customization

The ControlSize property is used to customize the RadioButton control size.

XAML

<StackLayout>
    <syncfusion:SfRadioButton Text="RadioButton" ControlSize="40"/>
</StackLayout>

C#

StackLayout stackLayout = new StackLayout();
	SfRadioButton radioButton = new SfRadioButton();
	radioButton.Text = "Radio Button";
	radioButton.ControlSize = 40;
	stackLayout.Children.Add(radioButton);
	this.Content = stackLayout;

Font auto scaling enabled

The FontAutoScalingEnabled property is used to automatically scale the Radio button’s font size based on the operating system’s text size. The default value of the FontAutoScalingEnabled property is false.

XAML

<syncfusion:SfRadioButton Text="RadioButton" FontAutoScalingEnabled="True"/>

C#

SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
radioButton.FontAutoScalingEnabled = true;

Enable animation

The EnabledAnimation property is used to enable or disable the animation for the .NET MAUI RadioButton control. By default, this property is set to true, which means animations are enabled.

XAML

<syncfusion:SfRadioButton Text="Radio Button" EnabledAnimation="False"/>

C#

SfRadioButton radioButton = new SfRadioButton
{
	Text = "Radio Button",
	EnabledAnimation = false
};

Content spacing

The ContentSpacing property is used to adjust the content spacing in the SfRadioButton control.

XAML

<syncfusion:SfRadioButton Text="Radio Button" ContentSpacing="25"/>

C#

StackLayout stackLayout = new StackLayout();
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
radioButton.ContentSpacing = 25;
stackLayout.Children.Add(radioButton);
this.Content = stackLayout;