Visual States in .NET MAUI CheckBox (SfCheckBox)

8 Jun 20265 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

You can change the state of the CheckBox using the IsChecked property of the SfCheckBox. In the checked state, a tick mark is added to the visualization of the CheckBox.

State	Property	Value
checked	IsChecked	true
unchecked	IsChecked	false
indeterminate	IsChecked	null

NOTE

To report the indeterminate state for the CheckBox, set the IsThreeState property to true.

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: