Articles in this section
Category / Section

How to set intermediate state in the .NET MAUI CheckBox?

3 mins read

This section explains how to set intermediate state in .NET MAUI CheckBox. In a .NET MAUI Checkbox application, you can set the intermediate state to indicate that it is in a partially selected state. This is commonly used when you have the “Select All” CheckBox and want to reflect the state of the child CheckBoxes. In this guide, we’ll show you how to set the intermediate state in a .NET MAUI CheckBox.

Step 1: Create CheckBoxes
Create the CheckBoxes in your XAML layout. When the “Select All” checkbox is checked, it triggers the StateChanged event. In the event handler, the IsChecked property of the “Select All” checkbox is used to determine whether it is checked or unchecked.

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

Note
The Intermediate state of the check box is enabled by setting the IsThreeState property as True.

Step 2: Handle CheckBox State Changes
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

Screenshot 2023-11-02 111338.png

Screenshot 2023-11-02 111306.png

Download the complete sample from the GitHub

Conclusion
I hope you enjoyed learning about how to set intermediate state in .NET MAUI CheckBox.

Refer to our .NET MAUI CheckBox feature tour page to learn about its 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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied