How to achieve intermediate state in .NET MAUI CheckBox using MVVM?

Overview

Implementing an intermediate state in a .NET MAUI CheckBox control can be achieved using the MVVM (Model-View-ViewModel) pattern. Below is a guide on how to set up the intermediate state for a group of CheckBoxes using MVVM in a .NET MAUI application.

ViewModel Implementation

Create a ViewModel class that implements the INotifyPropertyChanged interface to handle property changes and manage the intermediate state logic:

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private bool skip = false;

    // Properties for individual CheckBoxes
    private bool isPepperoniChecked;
    public bool IsPepperoniChecked
    {
        get => isPepperoniChecked;
        set
        {
            isPepperoniChecked = value;
            CheckIfSelectAll();
            OnPropertyChanged(nameof(IsPepperoniChecked));
        }
    }

    private bool isMushroomsChecked;
    public bool IsMushroomsChecked
    {
        get => isMushroomsChecked;
        set
        {
            isMushroomsChecked = value;
            CheckIfSelectAll();
            OnPropertyChanged(nameof(IsMushroomsChecked));
        }
    }

    private bool isOnionsChecked;
    public bool IsOnionsChecked
    {
        get => isOnionsChecked;
        set
        {
            isOnionsChecked = value;
            CheckIfSelectAll();
            OnPropertyChanged(nameof(IsOnionsChecked));
        }
    }

    // Property for the "Select All" CheckBox
    private bool? isIntermediate;
    public bool? IsIntermediate
    {
        get => isIntermediate;
        set
        {
            isIntermediate = value;
            IntermediateState();
            OnPropertyChanged(nameof(IsIntermediate));
        }
    }

    public ViewModel() 
    {
        IsIntermediate = true;
    }

    private void CheckIfSelectAll()
    {
        if (!skip)
        {
            skip = true;
            if (IsPepperoniChecked && IsMushroomsChecked && IsOnionsChecked)
            {
                IsIntermediate = true;
            }
            else if (!IsPepperoniChecked && !IsMushroomsChecked && !IsOnionsChecked)
            {
                IsIntermediate = false;
            }
            else
            {
                IsIntermediate = null;
            }
            skip = false;
        }
    }

    private void IntermediateState()
    {
        if (!skip)
        {
            skip = true;
            if (IsIntermediate == true)
            {
                IsPepperoniChecked = IsMushroomsChecked = IsOnionsChecked = true;
            }
            else
            {
                IsPepperoniChecked = IsMushroomsChecked = IsOnionsChecked = false;
            }
            skip = false;
        }
    }
}

The ViewModel class contains properties for each CheckBox and a special property IsIntermediate for the “Select All” CheckBox. The CheckIfSelectAll method checks the state of individual CheckBoxes to determine the state of the “Select All” CheckBox. The IntermediateState method updates the state of individual CheckBoxes based on the “Select All” CheckBox.

XAML Setup

Define the binding context and the layout with CheckBoxes in your XAML file:

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<StackLayout Padding="20">
    <Label x:Name="label" Margin="10" Text="Pizza Toppings"/>
    <syncfusion:SfCheckBox x:Name="selectAll" Text="Select All"
                           IsThreeState="True" 
                           IsChecked="{Binding IsIntermediate}"/>
    <syncfusion:SfCheckBox x:Name="pepperoni" Text="Pepperoni" 
                           IsChecked="{Binding IsPepperoniChecked}" Margin="30,0"/>
    <syncfusion:SfCheckBox x:Name="mushroom" Text="Mushrooms" 
                           IsChecked="{Binding IsMushroomsChecked}" Margin="30,0"/>
    <syncfusion:SfCheckBox x:Name="onion" Text="Onions" 
                           IsChecked="{Binding IsOnionsChecked}" Margin="30,0"/>
</StackLayout>

By following the above steps, you can successfully implement an intermediate state for CheckBoxes in a .NET MAUI application using the MVVM pattern.

Output

Download the sample from the GitHub

Conclusion

I hope you enjoyed learning how to achieve an intermediate state in .NET MAUI CheckBox.

Refer to our .NET MAUI CheckBox’s feature tour 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!