KontrollkästchenCheck boxes

Ein Kontrollkästchen dient zum Aktivieren oder Deaktivieren von Aktionselementen.A check box is used to select or deselect action items. Es kann für einzelne oder mehrere Listenelemente verwendet werden, die dem Benutzer zur Auswahl stehen.It can be used for a single item or for a list of multiple items that a user can choose from. Das Steuerelement verfügt über drei Auswahlzustände: „Deaktiviert“, „Aktiviert“ und „Unbestimmt“.The control has three selection states: unselected, selected, and indeterminate. Verwenden Sie den unbestimmten Zustand, wenn für eine Sammlung von Unteroptionen eine Mischung aus deaktivierten als aktivierten Zuständen vorliegt.Use the indeterminate state when a collection of sub-choices have both unselected and selected states.

Wichtige APIs: CheckBox-Klasse, Checked-Ereignis, IsChecked-EigenschaftImportant APIs: CheckBox class, Checked event, IsChecked property

Bespiel für Kontrollkästchenzustände

Ist dies das richtige Steuerelement?Is this the right control?

Verwenden Sie ein einzelnes Kontrollkästchen für eine binäre Ja/Nein-Auswahl – beispielsweise für ein Anmeldeszenario vom Typ „E-Mail-Adresse speichern?”Use a single check box for a binary yes/no choice, such as with a "Remember me?" oder für Vertragsbedingungen.login scenario or with a terms of service agreement.

Ein einzelnes Kontrollkästchen für eine einzelne Auswahl

Bei einer binären Auswahl besteht der Hauptunterschied zwischen einem Kontrollkästchen und einem Umschalter darin, dass das Kontrollkästchen für einen Zustand und der Umschalter für eine Aktion verwendet wird.For a binary choice, the main difference between a check box and a toggle switch is that the check box is for status and the toggle switch is for action. Sie können das Commit einer Kontrollkästcheninteraktion (etwa im Rahmen der Übermittlung eines Formulars) verzögern, während für die Interaktion eines Umschalters sofort ein Commit ausgeführt werden muss.You can delay committing a check box interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Eine Mehrfachauswahl ist nur mit Kontrollkästchen möglich.Also, only check boxes allow for multi-selection.

Verwenden Sie mehrere Kontrollkästchen für Mehrfachauswahlszenarien, in denen der Benutzer einzelne oder mehrere Elemente aus einer Gruppe von Optionen auswählt, die sich nicht gegenseitig ausschließen.Use multiple check boxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

Erstellen Sie eine Kontrollkästchengruppe, wenn die Benutzer eine beliebige Kombination von Optionen auswählen können.Create a group of check boxes when users can select any combination of options.

Auswählen mehrerer Optionen mit Kontrollkästchen

Bei gruppierbaren Optionen kann die gesamte Gruppe durch ein unbestimmtes Kontrollkästchen dargestellt werden.When options can be grouped, you can use an indeterminate check box to represent the whole group. Verwenden Sie den unbestimmten Zustand des Kontrollkästchens, wenn ein Benutzer nur einige untergeordneten Elemente der Gruppe aktiviert.Use the check box's indeterminate state when a user selects some, but not all, sub-items in the group.

Kontrollkästchen für die Anzeige einer gemischten Auswahl

Benutzer können sowohl über Kontrollkästchen als auch über Optionsfelder eine Auswahl in einer Liste von Optionen treffen.Both check box and radio button controls let the user select from a list of options. Mit Kontrollkästchen können Benutzer eine Kombination von Optionen auswählen.Check boxes let the user select a combination of options. Bei Optionsfeldern kann der Benutzer dagegen nur eine der (sich gegenseitig ausschließenden) Optionen auswählen.In contrast, radio buttons let the user make a single choice from mutually exclusive options. Wenn mehrere Optionen verfügbar sind, aber nur eine ausgewählt werden kann, verwenden Sie ein Optionsfeld.When there is more than one option but only one can be selected, use a radio button instead.

BeispieleExamples

XAML controls gallery

Wenn Sie die App XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und CheckBox in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the CheckBox in action.

Erstellen eines KontrollkästchensCreate a checkbox

Um dem Kontrollkästchen eine Beschriftung zuzuweisen, legen Sie die Content-Eigenschaft fest.To assign a label to the checkbox, set the Content property. Die Beschriftung wird neben dem Kontrollkästchen angezeigt.The label displays next to the checkbox.

Der folgende XAML-Code erstellt ein einzelnes Kontrollkästchen, mit dem vor dem Übermitteln eines Formulars den Servicebedingungen zugestimmt werden muss:This XAML creates a single check box that is used to agree to terms of service before a form can be submitted.

<CheckBox x:Name="termsOfServiceCheckBox" 
          Content="I agree to the terms of service."/>

Hier sehen Sie das gleiche Kontrollkästchen im Code:Here's the same check box created in code.

CheckBox checkBox1 = new CheckBox();
checkBox1.Content = "I agree to the terms of service.";

Binden an „IsChecked“Bind to IsChecked

Mit der IsChecked-Eigenschaft können Sie den Aktivierungszustand des Kontrollkästchens ermitteln.Use the IsChecked property to determine whether the check box is checked or cleared. Der Wert der IsChecked-Eigenschaft kann an einen anderen binären Wert gebunden werden.You can bind the value of the IsChecked property to another binary value. Da es sich bei „IsChecked“ aber um einen booleschen Wert vom Typ Nullable handelt, müssen Sie einen Wertkonverter verwenden, um sie an einen booleschen Wert zu binden.However, because IsChecked is a nullable boolean value, you must use a value converter to bind it to a boolean value.

In diesem Beispiel wird die IsChecked-Eigenschaft des Kontrollkästchens zum Akzeptieren der Servicebedingungen an die IsEnabled-Eigenschaft der Schaltfläche zum Absenden gebunden.In this example, the IsChecked property of the check box to agree to terms of service is bound to the IsEnabled property of a Submit button. Die Schaltfläche zum Absenden wird nur aktiviert, wenn die Vertragsbedingungen akzeptiert werden.The Submit button is enabled only if the terms of service are agreed to.

Hinweis  Wir zeigen hier nur den relevanten Code.Note  We only show the relevant code here. Weitere Informationen zu Datenbindungen und Wertkonvertern finden Sie unter Übersicht "Datenbindung".For more info about data binding and value converters, see Data binding overview.

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit" 
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked, 
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>
public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Behandeln von Click- und Checked-EreignissenHandle Click and Checked events

Wenn bei einer Änderung des Kontrollkästchenzustands eine Aktion ausgeführt werden soll, behandeln Sie das Click-Ereignis oder die Ereignisse Checked und Unchecked.To perform an action when the check box state changes, you can handle either the Click event, or the Checked and Unchecked events.

Das Click-Ereignis tritt bei jeder Änderung des Aktivierungszustands auf.The Click event occurs whenever the checked state changes. Verwenden Sie beim Behandeln des Click-Ereignisses die IsChecked-Eigenschaft, um den Zustand des Kontrollkästchens zu ermitteln.If you handle the Click event, use the IsChecked property to determine the state of the check box.

Die Ereignisse Checked und Unchecked treten unabhängig voneinander auf.The Checked and Unchecked events occur independently. Daher müssen immer beide Ereignisse behandelt werden, um auf Zustandsänderungen des Kontrollkästchens zu reagieren.If you handle these events, you should handle both of them to respond to state changes in the check box.

In den folgenden Beispielen wird die Behandlung des Click-Ereignis und der Ereignisse „Checked“ und „Unchecked“ gezeigt.In the following examples, we show handling the Click event, and the Checked and Unchecked events.

Mehrere Kontrollkästchen können den gleichen Ereignishandler verwenden.Multiple checkboxes can share the same event handler. Im folgenden Beispiel werden vier Kontrollkästchen zum Auswählen von Pizzabelägen erstellt.This example creates four checkboxes for selecting pizza toppings. Die vier Kontrollkästchen verwenden den gleichen Click-Ereignishandler, um die Liste mit den gewählten Belägen zu aktualisieren.The four checkboxes share the same Click event handler to update the list of selected toppings.

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox" 
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Hier sehen Sie den Ereignishandler für das Click-Ereignis.Here's the event handler for the Click event. Bei jedem Klick auf ein Kontrollkästchen wird der Aktivierungszustand der Kontrollkästchen überprüft und die Liste mit den gewählten Belägen aktualisiert.Every time a checkbox is clicked, it examines the checkboxes to see which ones are checked and update list of selected toppings.

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

Verwenden des unbestimmten ZustandsUse the indeterminate state

Das CheckBox-Steuerelement erbt von ToggleButton und kann über drei Zustände verfügen:The CheckBox control inherits from ToggleButton and can have three states:

StatusState EigenschaftProperty WertValue
Aktiviertchecked IsCheckedIsChecked truetrue
Deaktiviertunchecked IsCheckedIsChecked falsefalse
Unbestimmtindeterminate IsCheckedIsChecked Nullnull

Damit das Kontrollkästchen einen unbestimmten Zustand meldet, müssen Sie die IsThreeState-Eigenschaft auf true festlegen.For the check box to report the indeterminate state, you must set the IsThreeState property to true.

Bei gruppierbaren Optionen kann die gesamte Gruppe durch ein unbestimmtes Kontrollkästchen dargestellt werden.When options can be grouped, you can use an indeterminate check box to represent the whole group. Verwenden Sie den unbestimmten Zustand des Kontrollkästchens, wenn ein Benutzer nur einige untergeordneten Elemente der Gruppe aktiviert.Use the check box's indeterminate state when a user selects some, but not all, sub-items in the group.

Im folgenden Beispiel ist die IsThreeState-Eigenschaft des Kontrollkästchens „Alle auswählen“ auf true festgelegt.In the following example, the "Select all" checkbox has its IsThreeState property set to true. Das Kontrollkästchen „Alle auswählen“ ist aktiviert, wenn alle untergeordneten Elemente ausgewählt sind, und deaktiviert, wenn alle untergeordneten Elemente deaktiviert sind. Andernfalls ist der Zustand unbestimmt.The "Select all" checkbox is checked if all child elements are checked, unchecked if all child elements are unchecked, and indeterminate otherwise.

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True" 
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked" 
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0" 
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0" 
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>
private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

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

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected), 
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programatically. The indeterminate state should
    // only be set programatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just 
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

Empfohlene und nicht empfohlene VorgehensweisenDo's and don'ts

  • Stellen Sie sicher, dass der Zweck und der aktuelle Zustand des Kontrollkästchens eindeutig sind.Verify that the purpose and current state of the check box is clear.

  • Geben Sie nicht mehr als zwei Zeilen für den Text von Kontrollkästchen an.Limit check box text content to no more than two lines.

  • Formulieren Sie die Beschriftung des Kontrollkästchens als Aussage, die bei aktiviertem Kontrollkästchen wahr ist und bei deaktiviertem Kontrollkästchen falsch.Word the checkbox label as a statement that the check mark makes true and the absence of a check mark makes false.

  • Verwenden Sie die standardmäßige Schriftart, es sei denn, Sie müssen gemäß Ihren Markenrichtlinien eine andere verwenden.Use the default font unless your brand guidelines tell you to use another.

  • Bei dynamischem Text müssen Sie die Skalierung des Steuerelements und die Auswirkungen auf visuelle Elemente in der Nähe bedenken.If the text content is dynamic, consider how the control will resize and what will happen to visuals around it.

  • Bei mindestens zwei Auswahloptionen, die sich gegenseitig ausschließen, können Sie die Verwendung von Optionsfeldern in Erwägung ziehen.If there are two or more mutually exclusive options from which to choose, consider using radio buttons.

  • Zwei Kontrollkästchengruppen sollten nicht direkt nebeneinander platziert werden.Don't put two check box groups next to each other. Verwenden Sie Gruppenbeschriftungen zum Trennen der Gruppen.Use group labels to separate the groups.

  • Verwenden Sie kein Kontrollkästchen als Ein/Aus-Steuerelement oder zum Ausführen eines Befehls. Verwenden Sie stattdessen einen Umschalter.Don't use a check box as an on/off control or to perform a command; instead, use a toggle switch.

  • Verwenden Sie kein Kontrollkästchen, um andere Steuerelemente (etwa ein Dialogfeld) anzuzeigen.Don't use a check box to display other controls, such as a dialog box.

  • Mit dem unbestimmten Zustand können Sie angeben, dass eine Option für einige, aber nicht für alle Unteroptionen festgelegt ist.Use the indeterminate state to indicate that an option is set for some, but not all, sub-choices.

  • Geben Sie bei Verwendung des unbestimmten Zustands mithilfe untergeordneter Kontrollkästchen an, welche Optionen aktiviert sind und welche nicht.When using indeterminate state, use subordinate check boxes to show which options are selected and which are not. Gestalten Sie die Benutzeroberfläche so, dass der Benutzer die Unteroptionen sehen kann.Design the UI so that the user can get see the sub-choices.

  • Verwenden Sie den unbestimmten Zustand nicht, um einen dritten Zustand darzustellen.Don't use the indeterminate state to represent a third state. Mit dem unbestimmten Zustand wird angezeigt, dass eine Option für einige, aber nicht für alle Unteroptionen gilt.The indeterminate state is used to indicate that an option is set for some, but not all, sub-choices. Benutzer dürfen daher nicht in der Lage sein, einen unbestimmten Zustand direkt festzulegen.So, don't allow users to set an indeterminate state directly. In diesem Negativbeispiel wird der unbestimmte Zustand eines Kontrollkästchens verwendet, um eine mittlere Schärfe anzugeben:For an example of what not to do, this check box uses the indeterminate state to indicate medium spiciness:

    Ein unbestimmtes Kontrollkästchen

    Verwenden Sie stattdessen eine Optionsfeldgruppe mit drei Optionen: Nicht scharf, Scharf, Besonders scharf.Instead, use a radio button group that has three options: Not spicy, Spicy, and Extra spicy.

    Optionsfeldgruppe mit drei Optionen: Nicht scharf, Scharf, Besonders scharf

Beispielcode herunterladenGet the sample code