How to Customize the CheckBox Appearance for Different States in .NET MAUI?

This section explains how to customize the appearance of a .NET MAUI CheckBox using the VisualStateManager to control its appearance in different states, such as Normal, NormalNull, Hover, HoverNull, Pressed, PressedNull, Disabled, DisabledNull state.

Step 1: Define Visual States

First, define the visual states for your CheckBox.These states will determine how the CheckBox appears in different situations.

XAML

<ContentPage.Resources>
    <ResourceDictionary>

        <Style TargetType="syncfusion:SfCheckBox">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#4A90E2"/>
                                <!-- Normal Checked Color -->
                                <Setter Property="UncheckedColor" Value="#7B8D93"/>
                                <!-- Normal Unchecked Color -->
                                <Setter Property="TextColor" Value="#333333"/>
                                <!-- Normal Text Color -->
                                <Setter Property="TickColor" Value="#FFFFFF"/>
                                <!-- Normal Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NormalNull">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#4A90E2"/>
                                <!-- NormalNull Checked Color -->
                                <Setter Property="TextColor" Value="#333333"/>
                                <!-- NormalNull Text Color -->
                                <Setter Property="TickColor" Value="#FFFFFF"/>
                                <!-- NormalNull Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Hover">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#34C759"/>
                                <!-- Hover Checked Color -->
                                <Setter Property="UncheckedColor" Value="#1C1B1F"/>
                                <!-- Hover Unchecked Color -->
                                <Setter Property="TextColor" Value="#FF9500"/>
                                <!-- Hover Text Color -->
                                <Setter Property="TickColor" Value="#FFFFFF"/>
                                <!-- Hover Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="HoverNull">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#34C759"/>
                                <!-- HoverNull Checked Color -->
                                <Setter Property="TextColor" Value="#FF9500"/>
                                <!-- HoverNull Text Color -->
                                <Setter Property="TickColor" Value="#FFFFFF"/>
                                <!-- HoverNull Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#FF3B30"/>
                                <!-- Pressed Checked Color -->
                                <Setter Property="UncheckedColor" Value="#FF2D55"/>
                                <!-- Pressed Unchecked Color -->
                                <Setter Property="TextColor" Value="#FFCC00"/>
                                <!-- Pressed Text Color -->
                                <Setter Property="TickColor" Value="#000000"/>
                                <!-- Pressed Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PressedNull">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#FF3B30"/>
                                <!-- PressedNull Checked Color -->
                                <Setter Property="TextColor" Value="#FFCC00"/>
                                <!-- PressedNull Text Color -->
                                <Setter Property="TickColor" Value="#000000"/>
                                <!-- PressedNull Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#8E8E93"/>
                                <!-- Disabled Checked Color -->
                                <Setter Property="UncheckedColor" Value="#C7C7CC"/>
                                <!-- Disabled Unchecked Color -->
                                <Setter Property="TextColor" Value="#AEAEB2"/>
                                <!-- Disabled Text Color -->
                                <Setter Property="TickColor" Value="#D1D1D6"/>
                                <!-- Disabled Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="DisabledNull">
                            <VisualState.Setters>
                                <Setter Property="CheckedColor" Value="#8E8E93"/>
                                <!-- DisabledNull Checked Color -->
                                <Setter Property="UncheckedColor" Value="#C7C7CC"/>
                                <!-- DisabledNull Unchecked Color -->
                                <Setter Property="TextColor" Value="#AEAEB2"/>
                                <!-- DisabledNull Text Color -->
                                <Setter Property="TickColor" Value="#D1D1D6"/>
                                <!-- DisabledNull Tick Color -->
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>

    </ResourceDictionary>
</ContentPage.Resources>

Initialize the Control

To create a CheckBox selection UI, initialize the SfCheckBox controls. The example below demonstrates a “Select All” checkbox that manages the selection state of individual pizza topping checkboxes.

<StackLayout Padding="20">
    <Label x:Name="label" Margin="10" Text="Pizza Toppings"/>
    <syncfusion:SfCheckBox x:Name="selectAll" Text="Select All" IsThreeState="True" IsChecked="{x:Null}" StateChanged="SelectAll_StateChanged"/>
    <syncfusion:SfCheckBox x:Name="pepperoni" Text="Pepperoni" StateChanged="CheckBox_StateChanged" Margin="30,0"/>
    <syncfusion:SfCheckBox x:Name="beef" Text="Beef" IsChecked="True" StateChanged="CheckBox_StateChanged" Margin="30,0" IsEnabled="False"/>
    <syncfusion:SfCheckBox x:Name="mushroom" Text="Mushrooms" StateChanged="CheckBox_StateChanged" Margin="30,0"/>
    <syncfusion:SfCheckBox x:Name="onion" Text="Onions" IsChecked="True" StateChanged="CheckBox_StateChanged" Margin="30,0"/>
</StackLayout>

Step 2: Handle CheckBox State Changes

Next, handle the CheckBox state changes to set the intermediate state and synchronize the “Select All” CheckBox with the child CheckBoxes.

C#

bool skip = false;
private void SelectAll_StateChanged(object sender, Syncfusion.Maui.Buttons.StateChangedEventArgs e)
{
   if (!skip)
   {
      skip = true;
      pepperoni.IsChecked = beef.IsChecked = mushroom.IsChecked = onion.IsChecked = e.IsChecked;
      skip = false;
    }
}

private void CheckBox_StateChanged(object sender, Syncfusion.Maui.Buttons.StateChangedEventArgs e)
{
   if (!skip)
   {
     skip = true;
     if (pepperoni.IsChecked.Value && beef.IsChecked.Value && mushroom.IsChecked.Value && onion.IsChecked.Value)
        selectAll.IsChecked = true;
     else if (!pepperoni.IsChecked.Value && !beef.IsChecked.Value && !mushroom.IsChecked.Value && !onion.IsChecked.Value)
	selectAll.IsChecked = false;
      else
         selectAll.IsChecked = null;
         skip = false;
    }
 }

Output

Download the complete sample from the GitHub

Conclusion

I hope you enjoyed learning how to customize the checkbox appearance for different states in .NET MAUI.

Refer to our .NET MAUI CheckBox page for other groundbreaking feature representations. You can explore our .NET MAUI CheckBox documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI CheckBox and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!