OptionsfelderRadio buttons

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

Mithilfe von Optionsfeldern können Benutzer eine Option aus einer Gruppe von Optionen auswählen.Radio buttons allow users to select one option from a set. Jede Option wird durch ein Optionsfeld dargestellt, und Benutzer können nur ein Optionsfeld in einer Gruppe von Optionsfeldern auswählen.Each option is represented by one radio button, and users can only select one radio button in a radio button group.

(Falls Sie sich über die englische Bezeichnung „Radio Button” wundern: Optionsfelder sind im Englischen nach den Tasten mit voreingestellten Sendern an einem Radio benannt.)(If you're curious about the name, radio buttons are named after the channel preset buttons on a radio.)

Optionsfelder

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

Verwenden Sie Optionsfelder, um Benutzern mindestens zwei Optionen bereitzustellen, die sich gegenseitig ausschließen.Use radio buttons to present users with two or more mutually exclusive options.

Eine Gruppe von Optionsfeldern

Verwenden Sie Optionsfelder, wenn Benutzer alle Optionen sehen müssen, um eine Auswahl treffen zu können.Use radio buttons when users need to see all options to make a selection. Da Optionsfelder alle Optionen gleichermaßen hervorheben, schenken Benutzer den Optionen möglicherweise mehr Aufmerksamkeit, als eigentlich erforderlich ist.Since radio buttons emphasize all options equally, they may draw more attention to the options than necessary. Sie können auch andere Steuerelemente verwenden, es sei denn, die Optionen erfordern zusätzliche Aufmerksamkeit seitens des Benutzers.Unless the options deserve extra attention from the user, consider using other controls. Verwenden Sie beispielsweise demgegenüber eine Dropdownliste, wenn die standardmäßige Option für die meisten Benutzer in den meisten Situationen empfohlen ist.For example, if the default option is recommended for most users in most situations, use a drop-down list instead.

Dropdownliste

Wenn nur zwei sich gegenseitig ausschließende Optionen vorhanden sind, kombinieren Sie sie in einem einzelnen Kontrollkästchen oder Umschalter.If there are only two mutually exclusive options, combine them into a single checkbox or toggle switch. Verwenden Sie beispielsweise ein Kontrollkästchen für "Ich stimme zu" anstelle von zwei Optionsfeldern für "Ich stimme zu" und "Ich stimme nicht zu".For example, use a checkbox for "I agree" instead of two radio buttons for "I agree" and "I don't agree."

Zwei Möglichkeiten für die Darstellung einer binären Auswahl

Wenn der Benutzer mehrere Optionen auswählen kann, verwenden Sie ein Kontrollkästchen.When the user can select multiple options, use a checkbox.

Auswählen mehrerer Optionen mit Kontrollkästchen

Wenn Optionen Zahlen mit festgelegten Schritten (10, 20, 30) sind, verwenden Sie ein Schieberegler-Steuerelement.When options are numbers that have fixed steps (10, 20, 30), use a slider control.

Schiebereglersteuerelement

Wenn mehr als acht Optionen vorhanden sind, verwenden Sie eine Dropdownliste oder ein Listenfeld.If there are more than 8 options, use a drop-down list or list box.

Kombinationsfeld

Wenn die verfügbaren Optionen auf dem aktuellen Kontext der App basieren oder anderweitig dynamisch variieren können, verwenden Sie ein Listenfeld für die Einfachauswahl.If the available options are based on the app’s current context, or can otherwise vary dynamically, use a single-select list box.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

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

Optionsfelder in den Microsoft Edge-Browsereinstellungen.Radio buttons in the Microsoft Edge browser settings.

Optionsfelder in den Microsoft Edge-Browsereinstellungen

Erstellen eines OptionsfeldsCreate a radio button

Optionsfelder funktionieren in Gruppen.Radio buttons work in groups. Es gibt zwei Arten zur Gruppierung von Optionsfeld-Steuerelementen:There are 2 ways you can group radio button controls:

  • Platzieren Sie sie im gleichen übergeordneten Container.Put them inside the same parent container.
  • Legen Sie die GroupName-Eigenschaft für jedes Optionsfeld auf denselben Wert fest.Set the GroupName property on each radio button to the same value.

In diesem Beispiel wird die erste Gruppe von Optionsfeldern implizit gruppiert, da die Felder im selben StackPanel-Element enthalten sind.In this example, the first group of radio buttons is implicitly grouped by being in the same stack panel. Die zweite Gruppe ist auf zwei StackPanel-Elemente aufgeteilt, damit sie explizit nach GroupName gruppiert werden.The second group is divided between 2 stack panels, so they're explicitly grouped by GroupName.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="Green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="Yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Blue" Tag="Blue" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="White" Checked="BGRadioButton_Checked" IsChecked="True"/>
        </StackPanel>
    </StackPanel>
    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" GroupName="BorderBrush" Tag="Green" Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" GroupName="BorderBrush" Tag="Yellow" Checked="BorderRadioButton_Checked" IsChecked="True"/>
            </StackPanel>
            <StackPanel>
                <RadioButton Content="Blue" GroupName="BorderBrush" Tag="Blue" Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="White" GroupName="BorderBrush" Tag="White"  Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="BorderExample1" BorderThickness="10" BorderBrush="#FFFFD700" Background="#FFFFFFFF" Height="50" Margin="0,10,0,10"/>
</StackPanel>
private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && BorderExample1 != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "Yellow":
                BorderExample1.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "Green":
                BorderExample1.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                BorderExample1.Background = new SolidColorBrush(Colors.Blue);
                break;
            case "White":
                BorderExample1.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && BorderExample1 != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "Yellow":
                BorderExample1.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "Green":
                BorderExample1.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "Blue":
                BorderExample1.BorderBrush = new SolidColorBrush(Colors.DarkBlue);
                break;
            case "White":
                BorderExample1.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Die Optionsfeldgruppen sehen wie folgt aus.The radio button groups look like this.

Optionsfelder in zwei Gruppen

Ein Optionsfeld hat zwei Zustände: aktiviert und deaktiviert.A radio button has two states: selected or cleared. Wenn ein Optionsfeld aktiviert ist, ist die IsChecked-Eigenschaft auf true festgelegt.When a radio button is selected, its IsChecked property is true. Wenn ein Optionsfeld deaktiviert ist, lautet die IsChecked-Eigenschaft false.When a radio button is cleared, its IsChecked property is false. Ein Optionsfeld kann durch Klicken auf ein anderes Optionsfeld in derselben Gruppe deaktiviert werden, jedoch nicht durch erneutes Klicken auf das Optionsfeld selbst.A radio button can be cleared by clicking another radio button in the same group, but it cannot be cleared by clicking it again. Sie können ein Optionsfeld jedoch programmgesteuert durch Festlegen der IsChecked-Eigenschaft auf false deaktivieren.However, you can clear a radio button programmatically by setting its IsChecked property to false. Sie können die IsChecked-Eigenschaft tatsächlich mit einem booleschen Wert vergleichen, indem Sie den Wert der IsChecked-Eigenschaft abrufen.You can actually compare the IsChecked property with a bool by getting the Value of the IsChecked property

EmpfehlungenRecommendations

  • Stellen Sie sicher, dass der Zweck und der aktuelle Status einer Gruppe von Optionsfeldern nachvollziehbar ist.Make sure the purpose and current state of a set of radio buttons is clear.
  • Begrenzen Sie den Text des Optionsfelds auf eine einzelne Zeile.Limit the radio button’s text content to a single line.
  • Wenn der Textinhalt dynamisch ist, bedenken Sie die Größenänderung der Schaltfläche und die visuellen Effekte herum.If the text content is dynamic, consider how the button will resize and what will happen to visuals around it.
  • 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.
  • Platzieren Sie keine zwei Optionsfeldgruppen nebeneinander.Don't put two radio button groups side by side. Wenn sich zwei Optionsfeldgruppen direkt nebeneinander befinden, ist es schwierig, festzustellen, welche Schaltflächen zu welcher Gruppe gehören.When two radio button groups are right next to each other, it's difficult to determine which buttons belong to which group.

Weitere Hinweise zur VerwendungAdditional usage guidance

Diese Abbildung zeigt die richtige Vorgehensweise zum Platzieren und Anordnen von Optionsfeldern in geeignetem Abstand.This illustration shows the proper way to position and space radio buttons.

Gruppe von Optionsfeldern

Abstandsrichtlinien für Optionsfelder

Beispielcode herunterladenGet the sample code

Für DesignerFor designers

Für Entwickler (XAML)For developers (XAML)