Visual Customization in .NET MAUI CheckBox

18 Nov 201814 minutes to read

This section covers the visual properties of .NET MAUI CheckBox and how to customize them.

Prerequisites

Before using the SfCheckBox, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Buttons

For a step-by-step setup, refer to the Getting Started documentation.

Customizing a shape

The shape of the CheckBox can be customized using the CornerRadius property. Pass a single double to apply a uniform radius to every corner.

<syncfusion:SfCheckBox x:Name="checkBox" 
                       Text="CheckBox" 
                       IsChecked="True" 
                       CornerRadius="5.0"/>
SfCheckBox checkBox = new SfCheckBox();
    checkBox.Text = "CheckBox";
    checkBox.IsChecked = true;
    checkBox.CornerRadius = 5.0;
    this.Content = checkBox;

.NET MAUI CheckBox with custom CornerRadius

Customizing state colors

You can customize the state colors using the CheckedColor and UncheckedColor properties. The CheckedColor property sets the color for both the checked and the indeterminate states; UncheckedColor sets the color for the unchecked state.

<StackLayout>
        <syncfusion:SfCheckBox x:Name="check" 
                               Text="CheckBox" 
                               IsChecked="True" 
                               CheckedColor="Green"/>
        <syncfusion:SfCheckBox x:Name="unCheck" 
                               Text="CheckBox" 
                               UncheckedColor="Violet"/>
        <syncfusion:SfCheckBox x:Name="intermediate" 
                               Text="CheckBox" 
                               IsThreeState="True" 
                               IsChecked="{x:Null}" 
                               CheckedColor="Purple"/>
    </StackLayout>
StackLayout stackLayout = new StackLayout();
    SfCheckBox check = new SfCheckBox();
    check.Text = "CheckBox";
    check.IsChecked = true;
    check.CheckedColor = Colors.Green;

    SfCheckBox uncheck = new SfCheckBox();
    uncheck.Text = "CheckBox";
    uncheck.UncheckedColor = Colors.Violet;

    SfCheckBox intermediate = new SfCheckBox();
    intermediate.Text = "CheckBox";
    intermediate.IsThreeState = true;
    intermediate.IsChecked = null;
    intermediate.CheckedColor = Colors.Purple;

    stackLayout.Children.Add(check);
    stackLayout.Children.Add(uncheck);
    stackLayout.Children.Add(intermediate);
    this.Content = stackLayout;

.NET MAUI CheckBox showing checked, unchecked, and indeterminate state colors

StrokeThickness

The stroke thickness of the CheckBox can be customized using the StrokeThickness property. The property accepts a double; larger values produce a thicker border.

<StackLayout>
    <syncfusion:SfCheckBox Text="Hello" 
                           StrokeThickness="2" 
                           UncheckedColor="Blue" FontSize="20"/>
    <syncfusion:SfCheckBox Text="Hello" 
                           StrokeThickness="4" 
                           UncheckedColor="Blue" FontSize="25"/>
    <syncfusion:SfCheckBox Text="Hello" 
                           StrokeThickness="6" 
                           UncheckedColor="Blue" FontSize="30"/>
</StackLayout>
StackLayout stackLayout = new StackLayout();
    SfCheckBox check1 = new SfCheckBox();
    check1.Text = "Hello";
    check1.StrokeThickness = 2;
    check1.FontSize = 20;
    check1.UncheckedColor = Colors.Blue;

    SfCheckBox check2 = new SfCheckBox();
    check2.Text = "Hello";
    check2.StrokeThickness = 4;
    check2.FontSize = 25;
    check2.UncheckedColor = Colors.Blue;

    SfCheckBox check3 = new SfCheckBox();
    check3.Text = "Hello";
    check3.StrokeThickness = 6;
    check3.FontSize = 30;
    check3.UncheckedColor = Colors.Blue;

    stackLayout.Children.Add(check1);
    stackLayout.Children.Add(check2);
    stackLayout.Children.Add(check3);
    this.Content = stackLayout;

.NET MAUI CheckBox showing three StrokeThickness values

Setting a caption text appearance

You can customize the appearance of the text in the CheckBox control using the following properties:

<syncfusion:SfCheckBox  x:Name="caption" 
                        Text="CheckBox" 
                        IsChecked="True" 
                        TextColor="Blue" 
                        HorizontalTextAlignment="Center" 
                        FontFamily="Arial" 
                        FontAttributes="Bold" 
                        FontSize="20"/>
SfCheckBox caption = new SfCheckBox();
caption.IsChecked = true;
caption.Text = "CheckBox";
caption.TextColor = Colors.Blue;
caption.HorizontalTextAlignment = TextAlignment.Center;
caption.FontFamily = "Arial";
caption.FontAttributes = FontAttributes.Bold;
caption.FontSize = 20;
this.Content = caption;

.NET MAUI CheckBox with custom text appearance

TickColor

The TickColor property customizes the color of the check mark inside the CheckBox control.

<syncfusion:SfCheckBox x:Name="checkBox"        
                       IsChecked="True" 
                       CheckedColor="Aqua" 
                       TickColor="Fuchsia" 
                       Text="CheckBox" />
SfCheckBox checkBox = new SfCheckBox();
checkBox.IsChecked = true;
checkBox.Text = "CheckBox";
checkBox.CheckedColor = Colors.Aqua;
checkBox.TickColor = Colors.Fuchsia;
this.Content = checkBox;

.NET MAUI CheckBox with custom TickColor over an Aqua CheckedColor

LineBreakMode

The LineBreakMode property allows you to wrap or truncate the text. The default value is NoWrap, with other options available such as:

  • NoWrap - Does not wrap the text.
  • WordWrap - Wraps the text at word boundaries.
  • CharacterWrap - Wraps the text at character boundaries.
  • HeadTruncation - Truncates the text at the start.
  • MiddleTruncation - Truncates the text in the middle.
  • TailTruncation - Truncates the text at the end.
<syncfusion:SfCheckBox x:Name="checkBox" 
                       IsChecked="True" 
                       WidthRequest="200" 
                       LineBreakMode="WordWrap" 
                       Text="The LineBreakMode allows you to wrap or truncate the text."/>
SfCheckBox checkBox = new SfCheckBox();
checkBox.Text = "The LineBreakMode allows you to wrap or truncate the text.";
checkBox.LineBreakMode = LineBreakMode.WordWrap;
checkBox.WidthRequest = 200;
this.Content = checkBox;

.NET MAUI CheckBox with wrapped text using LineBreakMode as WordWrap

This demo can be downloaded from GitHub link.

Size customization

The ControlSize property is used to customize the size of the CheckBox control. The property accepts a double (in device-independent units) and represents both the width and the height of the CheckBox indicator.

<syncfusion:SfCheckBox Text="CheckBox" 
                       ControlSize="40"/>
SfCheckBox sfCheckBox = new SfCheckBox();
sfCheckBox.Text = "CheckBox";
sfCheckBox.ControlSize = 40;
this.Content = sfCheckBox;

Font auto-scaling

The FontAutoScalingEnabled property automatically scales the CheckBox’s font size based on the operating system’s text size. The default value is false.

<syncfusion:SfCheckBox Text="CheckBox"
                       FontAutoScalingEnabled="True"/>
SfCheckBox sfCheckBox = new SfCheckBox();
sfCheckBox.Text = "CheckBox";
sfCheckBox.FontAutoScalingEnabled = true;
this.Content = sfCheckBox;

Enable animation

The EnabledAnimation property enables or disables the state-change animation for the CheckBox control. The default value is true.

<syncfusion:SfCheckBox Text="CheckBox" 
                       EnabledAnimation="False"/>
SfCheckBox checkBox = new SfCheckBox
{
    Text = "CheckBox",
    EnabledAnimation = false
};

Content spacing

The ContentSpacing property adjusts the space between the CheckBox indicator and the caption text.

<syncfusion:SfCheckBox Text="Check Box" 
                       ContentSpacing="25"/>
SfCheckBox sfCheckBox = new SfCheckBox();
sfCheckBox.Text = "Check Box";
sfCheckBox.ContentSpacing = 25;
this.Content = sfCheckBox;

.NET MAUI CheckBox with custom ContentSpacing between the box and the caption

See Also