WinUI | ComponentOne
Controls / Input / CheckBox
In This Topic
    CheckBox
    In This Topic

    The Input library provides the CheckBox control to select (check) or clear (uncheck) items. The CheckBox also lets the user report its value as indeterminate.

    The check box works like a selection control which lets users select one or more options from a set.

    Changing the CheckBox Color

    The Input CheckBox control lets you change the appearance of the control by adding a color to the box using the Color property.

    The following code snippet depicts setting color for the CheckBox using the Color property.

    XAML
    Copy Code
    <c1:C1CheckBox Content="Show button" Color="DarkSeaGreen" HorizontalAlignment="Left" Margin="346,240,0,0" VerticalAlignment="Top" />
    

    Using Checked and UnChecked events

    A checkbox can be checked and unchecked, and these actions follow two events Checked event, which fires when a CheckBox is checked and Unchecked event, which occurs when a CheckBox is unchecked.

    The following code snippet shows how to use both the events:

    <c1:C1CheckBox Name="checkBox1"  Content="Show button" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" Color="DarkSeaGreen" HorizontalAlignment="Left" Margin="346,240,0,0" VerticalAlignment="Top" Height="20" Width="120"  />
    <Button Content="Button" Name="button1" Visibility="Collapsed" HorizontalAlignment="Left" Height="40" Margin="187,334,0,0" VerticalAlignment="Top" Width="174" />

     private void checkBox1_Checked(object sender, RoutedEventArgs e)
           {
              // Show button              

              button1.Visibility = Visibility.Visible;
           }

     private void checkBox1_Unchecked(object sender, RoutedEventArgs e)
           {
              // Hide button           

             button1.Visibility = Visibility.Collapsed;
           }

    Indeterminate State

    The Input CheckBox control provides a third state, the 'Indeterminate' state. For instance, you can use the indeterminate check box to denote a state when a user selects few, but not all items in the group. Also, for the indeterminate state to work in the CheckBox control, you need to set the IsThreeState property to true.

    In the GIF below, you can observe the Select All checkbox indicating an indeterminate mode , when only one or two of the Option 1, Option 2 and Option 3 checkboxes are checked.

    The code snippets depict how the "Select all items" checkbox behavior in different states: checked, unchecked and indeterminate using IsThreeState property and Indeterminate event.

    <Grid>
    <StackPanel>
    <c1:C1CheckBox Name="optionAll" Content="Select all hiking gear items" IsThreeState="True" Indeterminate="SelectAll_Indeterminate" Checked="SelectAll_Check" Unchecked="SelectAll_Uncheck" />
    <c1:C1CheckBox Name="option1" Content="Camping Tent" Margin="24,0,0,0"
      Checked="Option_Check" Unchecked="Option_Uncheck" />
    <c1:C1CheckBox Name="option2" Content="Trekking Boots" Margin="24,0,0,0"
      Checked="Option_Check" Unchecked="Option_Uncheck" IsChecked="True"/>
    <c1:C1CheckBox Name="option3" Content="Hiking Bag" Margin="24,0,0,0"
      Checked="Option_Check" Unchecked="Option_Uncheck" />
    </StackPanel>
    </Grid>

    private void Option_Check(object sender, RoutedEventArgs e)

    {
        SetCheckedState();
    }

    private void Option_Uncheck(object sender, RoutedEventArgs e)
    {
        SetCheckedState();
    }

    private void SelectAll_Check(object sender, RoutedEventArgs e)
    {
        option1.IsChecked = option2.IsChecked = option3.IsChecked = true;
    }

    private void SelectAll_Uncheck(object sender, RoutedEventArgs e)
    {
        option1.IsChecked = option2.IsChecked = option3.IsChecked = false;
    }

    private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
    {

        if (option1.IsChecked == true &&
    option2.IsChecked == true &&
    option3.IsChecked == true)
        {

    optionAll.IsChecked = false;
        }
    }

    private void SetCheckedState()
    {
        if (option1 != null)
        {
    if (option1.IsChecked == true &&
        option2.IsChecked == true &&
        option3.IsChecked == true)
    {
        optionAll.IsChecked = true;
    }
    else if (option1.IsChecked == false &&
        option2.IsChecked == false &&
        option3.IsChecked == false)
    {
        optionAll.IsChecked = false;
    }
    else
    {
       
        optionAll.IsChecked = null;
    }
       
    }