#833 – CheckBox is a ContentControl

CheckBox control derives from ContentControl, which means that it can contain a single piece of content.  In the case of a CheckBox, this content is rendered next to the actual check box that a user can check on or off.

You typically set the content of a CheckBox to a string, which gets rendered next to the check box.

        <CheckBox Content="Learn to juggle"/>
        <CheckBox Content="Read War and Peace"/>
        <CheckBox Content="Visit Japan"/>

833-001
You can, however, set the Content property to anything that you like, including a panel that contains other controls.

        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="Juggler.png" Height="85"/>
                    <Label Content="Learn to juggle"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="leo.jpg" Height="85"/>
                    <Label Content="Read War and Peace"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox VerticalContentAlignment="Center">
            <CheckBox.Content>
                <StackPanel>
                    <Image Source="kinkakuji.jpg" Height="85"/>
                    <Label Content="Visit Japan"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>

833-002

#825 – Two Way Binding for a CheckBox

You can bind the IsChecked property of a CheckBox to a boolean variable, so that the variable will always reflect the current value of the CheckBox in the user interface.

You can also do two-way binding, where the boolean variable changes when the user toggles the CheckBox, but the CheckBox also toggles when the value of the variable changes.

        <Label Content="Things my dog can do:"/>
        <CheckBox Content="Sit" IsChecked="{Binding CanSit, Mode=TwoWay}"/>
        <CheckBox Content="Stay" IsChecked="{Binding CanStay, Mode=TwoWay}"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Report State" Click="btnReportState_Click"
                    Margin="5"/>
            <Button Content="Change State" Click="btnChangeState_Click"
                    Margin="5"/>
        </StackPanel>

Code-behind:

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private bool canSit;
        public bool CanSit
        {
            get { return canSit; }
            set
            {
                canSit = value;
                RaisePropertyChanged("CanSit");
            }
        }

        private bool canStay;
        public bool CanStay
        {
            get { return canStay; }
            set
            {
                canStay = value;
                RaisePropertyChanged("CanStay");
            }
        }

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

        private void btnReportState_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(string.Format("Sit: {0}, Stay: {1}", CanSit, CanStay));
        }

        private void btnChangeState_Click(object sender, RoutedEventArgs e)
        {
            CanSit = CanSit ? false : true;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

#540 – Adding Common Controls in Blend

You can add various common controls to your application in Blend using buttons on the tools panel.  You select the icon for the control that you want to add and then double-click the icon to add it.

If you left-click and hold on the Button icon on the tools panel, or right-click, you’ll see a series of controls that you can insert by clicking on the icon at this location in the tools panel.

  • Button – Click on a button to perform some action
  • CheckBox – Check an item in a list
  • ComboBox – Select an item from a dropdown list
  • ListBox – Select an item from a list
  • RadioButton – Select one item from a group
  • ScrollBar – Scroll stuff
  • Slider – Pick a value from a range
  • TabControl – Switch between separate tabbed parts of app
  • GridSplitter – Make section of app bigger/smaller

Select the control that you want and then double-click to add to your GUI.

#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)

#351 – Binding a CheckBox’s IsChecked Property to a Boolean Variable

Instead of handling the Checked and Unchecked events of a CheckBox and then setting a boolean variable to represent the current state, you’ll most often just use data binding to bind the IsChecked property to a boolean variable.

In the example below, we have three CheckBox controls, each bound to a boolean property.

        <Label Content="Things my dog can do:"/>
        <CheckBox Content="Sit" IsChecked="{Binding CanSit}"/>
        <CheckBox Content="Stay" IsChecked="{Binding CanStay}"/>
        <CheckBox Content="Fetch" IsChecked="{Binding CanFetch}"/>
        <Button Content="Test" Click="Test_Click"/>

In the code-behind, we define the boolean properties that we can bind to and then set the data context to refer to the parent class.

        public bool CanSit { get; set; }
        public bool CanStay { get; set; }
        public bool CanFetch { get; set; }

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

        private void Test_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(string.Format("Sit: {0}, Stay: {1}, Fetch: {2}", CanSit, CanStay, CanFetch));
        }

#350 – CheckBox Basics

The CheckBox control allows a user to toggle the state of something in an application.  The user uses the left mouse button to check/uncheck the control, turning something on or off.

You specify a label for each CheckBox using its Content property.

    <StackPanel HorizontalAlignment="Center">
        <Label Content="Things my dog can do:"/>
        <CheckBox Content="Sit"/>
        <CheckBox Content="Stay"/>
        <CheckBox Content="Fetch"/>
    </StackPanel>

The IsChecked property indicates whether a CheckBox is currently checked.  It can be read from or written to.  You can also use data binding to bind the IsChecked property to a boolean variable.

The Checked event fires when a user checks the CheckBox.  The Unchecked event fires when a user unchecks the CheckBox.  The Click event fires whenever the user checks or unchecks the CheckBox.

Follow

Get every new post delivered to your Inbox.

Join 238 other followers