XAML CheckBox

This article demonstrates how to create and use a CheckBox control in WPF using XAML and C#.

Creating a CheckBox

The CheckBox element represents a WPF CheckBox control in XAML.

  1. <CheckBox/>  
The Content attribute represents the text of a CheckBox.

The Name attribute represents the name of the control, which is a unique identifier of a control.

The Foreground attribute defines the foreground color of the text of the CheckBox.

The Content attribute defines the text of the CheckBox.

FontFamily, FontStyle, FontWeight, FontSize and FontStretch are font related attributes.

The code snippet in Listing 1 creates a CheckBox control and sets the name, content, foreground and font related properties of a CheckBox control.
  1. <CheckBox Name="McCheckBox" Foreground="Orange"  
  2.    Canvas.Left="20" Canvas.Top="10" Content="Check Me"  
  3.    FontFamily="Georgia" FontSize="20" FontWeight="Bold" >  
  4. </CheckBox>  
Listing 1

The output looks like Figure 1.


Figure 1

The IsChecked property represents the state of the CheckBox control. The IsThreeState property represents whether the CheckBox has two or three states. The three states are checked, unchecked and indeterminate. The code snippet in Listing 2 sets the IsChecked and IsThreeState properties of the CheckBox.
  1. <CheckBox Name="McCheckBox"   
  2.    Canvas.Left="10" Canvas.Top="10"  
  3.    Content="Check Me"   
  4.    IsChecked="True" IsThreeState="True" >   
  5. </CheckBox>  
Listing 2

Adding a CheckBox Click Event Handler

The Checked and Unchecked attributes of the CheckBox element adds the checked and unchecked event handler. These events are fired when a CheckBox state is changed to checked and unchecked respectively. The code in Listing 3 adds these two event handlers.
  1. <CheckBox Name="McCheckBox"   
  2.    Canvas.Left="10" Canvas.Top="10"  
  3.    Content="Check Me"   
  4.    IsChecked="True" IsThreeState="True"  
  5.    Checked="McCheckBox_Checked" Unchecked="McCheckBox_Unchecked">   
  6. </CheckBox>  
Listing 3

The code for the click event handler looks like the following.
  1. private void McCheckBox_Checked(object sender, RoutedEventArgs e)  
  2. {  
  3. }  
  4. private void McCheckBox_Unchecked(object sender, RoutedEventArgs e)  
  5. {  
  6. }  
The code listed in Listing 4 sets the content of a CheckBox on both checked and unchecked events. When you check or uncheck the CheckBox, you will see the content of the CheckBox changing.
  1. private void McCheckBox_Checked(object sender, RoutedEventArgs e)  
  2. {  
  3.    McCheckBox.Content= "Checked";  
  4. }  
  5. private void McCheckBox_Unchecked(object sender, RoutedEventArgs e)  
  6. {  
  7.    McCheckBox.Content= "Unchecked";  
  8. }  
Listing 4

Creating a CheckBox Dynamically


The code listed in Listing 5 creates a CheckBox control and sets some of its properties at run-time.
  1. private void CreateDynamicCheckBox()  
  2. {  
  3.    CheckBox chb = new CheckBox();  
  4.    chb.Content = "Click me";  
  5.    chb.IsChecked = true;  
  6.    chb.Foreground = new SolidColorBrush(Colors.Orange);  
  7.    chb.IsChecked = true;  
  8.    LayoutRoot.Children.Add(chb);  
  9. }  
Listing 5

Summary


In this article, I discussed how to create a CheckBox control in WPF at design-time using XAML and at run-time using C#.