OptionsfelderRadio buttons

• 05/19/2017
• 3 Minuten Lesedauer
• • 
  • 

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.)

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.

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.

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."

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

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.

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.

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

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. Beziehen der XAML-Steuerelementekatalog-App (Microsoft Store)Get the XAML Controls Gallery app (Microsoft Store) Abrufen des Quellcodes (GitHub)Get the source code (GitHub)

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

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.

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.

Beispielcode herunterladenGet the sample code

• Beispiel für einen XAML-Steuerelementekatalog – Hier werden alle XAML-Steuerelemente in einem interaktiven Format dargestellt.XAML Controls Gallery sample - See all the XAML controls in an interactive format.

Verwandte ThemenRelated topics

Für DesignerFor designers

• SchaltflächenButtons
• UmschalterToggle switches
• KontrollkästchenCheckboxes
• Listen und KombinationsfelderLists and combo boxes
• SchiebereglerSliders

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

• RadioButton-KlasseRadioButton class