How to add a checkbox (XAML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This tutorial walks you through the steps to add a check box to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add a check box in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add a check box in code at runtime.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Runtime apps using C# or Visual Basic
• Roadmap for Windows Runtime apps using C++

What you need to know

Technologies

• CheckBox

Prerequisites

• We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

Instructions

Step 1: Add a check box in XAML

To add a check box in XAML

1. Add a CheckBox control to a parent container.

2. To assign a name to the checkbox, set the x:Name attribute to a string value.

   To refer to a control in code, it must have a name. Otherwise, a name is not required.

3. To assign a label to the check box, set the Content property to a string value.

4. To perform an action when the check box state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.

   <CheckBox x:Name="checkbox1" Content="CheckBox" 
             Checked="CheckBox_Checked"/>
   

   void MainPage::CheckBox_Checked(Object^ sender, RoutedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void CheckBox_Checked(object sender, RoutedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub CheckBox_Checked()
       ' Add code to perform some action here.
   End Sub
   

   To check the state of the control outside of the Checked event, use the IsChecked property.

Step 2: Add a check box in code

To add a check box in code

1. Create a new CheckBox.

2. To assign a label to the check box, set the Content property to a string value.

3. To perform an action when the check box state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.

4. Add the CheckBox to a parent container in the visual tree to make the check box show in the UI.

   // Create a new check box, set it's content, 
   // and add a Checked event handler.
   CheckBox^ checkBox1 = ref new CheckBox();
   checkBox1->Content = "CheckBox";
   checkBox1->Checked += 
       ref new RoutedEventHandler(this, &MainPage::CheckBox_Checked);
   
   // Add the check box to a parent container in the visual tree.
   stackPanel1->Children->Append(checkBox1);
   

   // Create a new check box, set it's content, 
   // and add a Checked event handler.
   CheckBox checkBox1 = new CheckBox();
   checkBox1.Content = "CheckBox";
   checkBox1.Checked += CheckBox_Checked;
   
   // Add the check box to a parent container in the visual tree.
   stackPanel1.Children.Add(checkBox1);
   

   ' Create a new check box, set it's content, 
   ' and add a Checked event handler.
   Dim checkBox1 = New CheckBox()
   checkBox1.Content = "CheckBox"
   AddHandler checkBox1.Checked, AddressOf Me.CheckBox_Checked
   
   ' Add the check box to a parent container in the visual tree.
   stackPanel1.Children.Add(checkBox1)
   

   void MainPage::CheckBox_Checked(Object^ sender, RoutedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void CheckBox_Checked(object sender, RoutedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub CheckBox_Checked()
       ' Add code to perform some action here.
   End Sub
   

   To check the state of the control outside of the Checked event, use the IsChecked property.

Step 3: Add a check box using a design tool

To add a check box using a design tool

1. Select the CheckBox control.

   • In Microsoft Visual Studio, pick the CheckBox in the Toolbox pane.

   • In Blend for Visual Studio, pick the CheckBox in the Assets pane.

     Select Controls in the left side of the Assets pane if it's not selected.

2. Add a CheckBox to the design surface. Do one of these:

   • Double-click the check box. The check box is added to the selected parent container with default position and size settings.
   • Drag the check box to the design surface and drop it. The check box is added in the position where you drop it with default size and content settings.
   • Draw the check box control onto the design surface. The check box is added with the size and position settings that you draw.

3. If you need to, assign a name to the CheckBox. With the check box selected, type the name into the Name property text box.

   The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.

4. Update the CheckBox content. Do one of these:

   • Click the check box to select it, then click it again to make the label content editable. Type new content into the check box label on the design surface.

   • Type the content string into the Content property text box.

     If the Properties pane is arranged by Category, the Content property is in the Common category.

5. To perform an action when the check box state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.

   1. Select the Event view in the Property pane.
   2. With the check box selected on the design surface, do one of these:
      • Double click the Checked event text box to add a handler with a default name.
      • Type a name into the Checked event text box and press Enter to add a handler with a custom name.

Related topics

CheckBox

Guidelines for checkbox controls

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++