How to add a checkbox (XAML)

Applies to Windows and Windows Phone

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:

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Add a check box in XAML

Hh868194.wedge(en-us,WIN.10).gifTo 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"/>
    
    
    
    
    private void CheckBox_Checked(object sender, RoutedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

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

Step 2: Add a check box in code

Hh868194.wedge(en-us,WIN.10).gifTo 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 = 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);
    
    
    
    
    private void CheckBox_Checked(object sender, RoutedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    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

Hh868194.wedge(en-us,WIN.10).gifTo 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++

 

 

Show:
© 2014 Microsoft