Visual States in .NET MAUI CheckBox (SfCheckBox)

20 May 20255 minutes to read

The visual appearance of the CheckBox can be customized using VisualStates. The SfCheckBox control includes the following three visual states:

• Checked
• Unchecked
• Intermediate

XAML

<syncfusion:SfCheckBox Text="CheckBox" IsThreeState="True">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="Blue"/>
                        <Setter Property="CheckedColor" Value="Blue"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#ea3737"/>
                        <Setter Property="UncheckedColor" Value="#ea3737"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Intermediate">
                    <VisualState.Setters>
                        <Setter Property="CheckedColor" Value="Blue"/>
                        <Setter Property="Text" Value="Intermediate State"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </syncfusion:SfCheckBox>

C#

SfCheckBox checkBox = new SfCheckBox() { Text = "CheckBox", IsThreeState = true };
        VisualStateGroupList visualStateGroupList = new VisualStateGroupList();
        VisualStateGroup commonStateGroup = new VisualStateGroup();

        VisualState checkedState = new VisualState
        {
            Name = "Checked"
        };

        checkedState.Setters.Add(new Setter { Property = SfCheckBox.TextColorProperty, Value = Colors.Blue });
        checkedState.Setters.Add(new Setter { Property = SfCheckBox.CheckedColorProperty, Value = Colors.Blue });

        VisualState uncheckedState = new VisualState
        {
            Name = "Unchecked"
        };
        uncheckedState.Setters.Add(new Setter { Property = SfCheckBox.TextColorProperty, Value = Color.FromHex("#ea3737") });
        uncheckedState.Setters.Add(new Setter { Property = SfCheckBox.UncheckedColorProperty, Value = Color.FromHex("#ea3737") });

        VisualState intermediateState = new VisualState
        {
            Name = "Intermediate"
        };

        intermediateState.Setters.Add(new Setter { Property = SfCheckBox.TextProperty, Value = "Intermediate State" });
        intermediateState.Setters.Add(new Setter { Property = SfCheckBox.CheckedColorProperty, Value = Colors.Blue});

        commonStateGroup.States.Add(checkedState);
        commonStateGroup.States.Add(uncheckedState);
        commonStateGroup.States.Add(intermediateState);

        visualStateGroupList.Add(commonStateGroup);
        VisualStateManager.SetVisualStateGroups(checkBox, visualStateGroupList);
        this.Content = checkBox;

Checked visual state:

Unchecked visual state:

Intermediate visual state: