.NET MAUI CheckBox Styling
The CheckBox provides a set of styling options by exposing properties for customizing its visual appearance.
You can set the color of the check mark as well as the control itself in each of the available states.
Background, Border, and Symbol Colors
To set the background and border colors of the CheckBox, use the following properties:
-
CheckedColor—Defines the Color applied to the control when it is checked. This is both the border and background color. -
UncheckedColor—Defines the Color applied to the control when it is unchecked. This is the border color only, the background is transparent when unchecked. -
IndeterminateColor—Defines the Color applied to the control when it is in Indeterminate state. This is both the border and background color.
To set the symbol colors of the CheckBox, use the following properties:
-
CheckedSymbolColor—Defines the Color applied to the check symbol of the control when it is in Checked state. -
IndeterminateSymbolColor—Defines the Color applied to the Indeterminate symbol of the control.
The following example demonstrates how to set the CheckedColor property.
<telerik:RadCheckBox CheckedColor="Aqua" />
UncheckedColor property.
<telerik:RadCheckBox UncheckedColor="DarkBlue" />
The following example demonstrates how to set the CheckedSymbolColor property.
<telerik:RadCheckBox CheckedSymbolColor="Black" />
IndeterminateColor and IndeterminateSymbolColor properties.
<telerik:RadCheckBox x:Name="checkbox" IsChecked="{x:Null}" IndeterminateColor="Brown" IndeterminateSymbolColor="Coral" />
The image below shows the end result.
Corner Radius
Easily apply corner radius to the Checkbox control using the CornerRadius(double?) property.
<telerik:RadCheckBox x:Name="checkbox" CornerRadius="3"/>
Stroke Thickness
The CheckBox exposes a StrokeWidth(double) property that specifies the width of the lines with which the Checkbox element is drawn. It affects the border of the control as well as the check mark. The default value is 2.
The following example demonstrates how to apply a StrokeWidth value.
<telerik:RadCheckBox x:Name="checkboxStrokeWidth" StrokeWidth="5"/>
The image below shows the result at runtime displaying the defined Indeterminate state together with the configured StrokeWidth and Length.
