#853 – A CheckBox Can Always Be in an Indeterminate State

If you set the IsThreeState property of a CheckBox to true, the user can cycle the CheckBox through three states, rather than true–checked, not checked and indeterminate.

<CheckBox Content="I cycle through 3 states" IsThreeState="True"/>

853-001
853-002
853-003
If the IsThreeState property is set to false, the user can only cycle the CheckBox through the checked and unchecked states.  You can, however, still set the CheckBox to an indeterminate state using data binding or from code.

        <CheckBox Name="chkTest" Content="I cycle through 2 states" IsThreeState="False"/>
        <Button Content="Set Indeterminate" Click="Button_Click" Margin="15"/>

</span>
<pre>        private void Button_Click(object sender, RoutedEventArgs e)
        {
            chkTest.IsChecked = null;
        }

853-004

Advertisement

#355 – Implementing Three-State CheckBox Dependent Behavior

You can use a three-state CheckBox to reflect the state of a set of other CheckBox controls.

Here’s some sample code that implements this behavior.  (See the previous post for the XAML).

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool doEat;
        public bool DoEat
        {
            get { return doEat; }
            set
            {
                doEat = value;
                OnPropertyChanged("DoEat");
                OnPropertyChanged("DoEverything");
            }
        }

        // Add same code for DoPray and DoLove properties here

        // Nullable bool - can be true, false or null
        public bool? DoEverything
        {
            get
            {
                if (DoEat && DoPray && DoLove)
                    return true;
                else if (!DoEat && !DoPray && !DoLove)
                    return false;
                else
                    return null;
            }

            set
            {
                if (value == true)
                    DoEat = DoPray = DoLove = true;
                else
                    DoEat = DoPray = DoLove = false;
            }
        }

        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;
        }

        private void OnPropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }

#354 – Use Three-State CheckBox to Show State of Other CheckBoxes

Three-state CheckBox controls are often used in conjunction with other CheckBox controls. The three-state CheckBox appears checked if all other checkboxes are checked, unchecked if nothing else is checked, or the indeterminate state if some other CheckBox controls are checked.

Here’s an example, starting with the XAML:

        <CheckBox Content="Do Everything" IsChecked="{Binding DoEverything}" IsThreeState="True"/>
        <CheckBox Content="Eat" IsChecked="{Binding DoEat}" Margin="20,0,0,0"/>
        <CheckBox Content="Pray" IsChecked="{Binding DoPray}" Margin="20,0,0,0"/>
        <CheckBox Content="Love" IsChecked="{Binding DoLove}" Margin="20,0,0,0"/>

At run-time, you want the following behavior:

  • User checks Do Everything, all other items become checked

  • User unchecks Do Everything, all other items become unchecked

  • User checks individual items, Do Everything becomes checked if everything else is checked, unchecked if nothing is checked, or indeterminate if at some items are checked

See post #355 for an example of the code-behind that implements this behavior.

 

 

#353 – Binding a Three-State CheckBox to a Nullable Bool

Because a three-state CheckBox can take on any one of three different values, its current value can’t be represented by a simple bool.  A bool can only take on true and false values.

A three-state CheckBox can instead be bound to a nullable bool (represented by bool?), which can take on three different values.

  • true  (checked)
  • false  (not checked)
  • null  (indeterminate)

In the example below, we bind a CheckBox control’s IsChecked property to a nullable bool property.

        <CheckBox Content="Happy" IsChecked="{Binding IsHappy}" IsThreeState="True"/>

In the code-behind, we define the property and set the main window’s data context.

        // Nullable bool - can be true, false or null
        public bool? IsHappy { get; set; }

		public MainWindow()
		{
			this.InitializeComponent();
            this.DataContext = this;
        }

#352 – Use IsThreeState Property to Create a CheckBox that Has an Indeterminate State

The CheckBox control normally has two states–checked or unchecked.  The current state can be determined by reading the IsChecked property, which can take on the values true and false.

You can also use a CheckBox to represent an indeterminate value–a value that is neither true nor false.  To indicate that a CheckBox can have three states (checked, not checked and indetermine), set the IsThreeState property to true.

        <CheckBox Content="Happy" IsThreeState="True"/>

At run-time, you’ll notice that the CheckBox will cycle through the three states. A solid box rather than a check mark indicates the indeterminate state.

In code, you can read the IsChecked property to determine the state.  IsChecked is a nullable bool and can have one of the values:

  • true  (checked)
  • false  (not checked)
  • null  (indeterminate)