Optionsfelder

Optionsfelder, auch als Radio-Buttons bezeichnet, ermöglichen es Benutzern, eine Option aus einer Sammlung von zwei oder mehr sich gegenseitig ausschließenden, aber verwandten Möglichkeiten auszuwählen. Optionsfelder werden immer in Gruppen verwendet, und jede Option wird in der Gruppe durch ein Optionsfeld dargestellt.

Im Standardzustand ist in einer RadioButtons-Gruppe kein Optionsfeld ausgewählt. Das heißt, alle Optionsfelder sind deaktiviert. Sobald ein Benutzer ein Optionsfeld ausgewählt hat, kann die Auswahl nicht mehr aufgehoben werden, um die Gruppe wieder in ihren ursprünglichen Zustand ohne Auswahl zurück zu versetzen.

Das eindeutige Verhalten einer RadioButtons-Gruppe unterscheidet sie von Kontrollkästchen, die Mehrfachauswahl sowie Abwahl oder Löschen unterstützen.

Ist dies das richtige Steuerelement?

Verwenden Sie Optionsfelder, um Benutzern zu ermöglichen, eine Auswahl aus zwei oder mehr Optionen, die sich gegenseitig ausschließen, zu treffen.

Verwenden Sie Optionsfelder, wenn Benutzer alle Optionen sehen müssen, bevor sie eine Auswahl treffen. Optionsfelder heben alle Optionen gleichermaßen hervor, was bedeutet, dass manche Optionen möglicherweise mehr Aufmerksamkeit auf sich ziehen, als eigentlich erforderlich oder wünschenswert ist.

Wenn nicht alle Optionen dieselbe Aufmerksamkeit benötigen, erwägen Sie die Verwendung anderer Steuerelemente. Wenn Sie beispielsweise eine einzige beste Option für die meisten Benutzer und in den meisten Situationen empfehlen möchten, verwenden Sie ein Kombinationsfeld , um diese beste Option als Standardoption anzuzeigen.

Wenn es nur zwei mögliche Optionen gibt, die eindeutig als einzelne binäre Auswahl ausgedrückt werden können, z. B. ein-/aus oder ja/nein, kombinieren Sie sie in einem einzigen Kontrollkästchen oder Umschaltschalter-Steuerelement . Verwenden Sie beispielsweise ein einzelnes Kontrollkästchen für „Ich stimme zu“ anstelle von zwei Optionsfeldern für „Ich stimme zu“ und „Ich stimme nicht zu“.

Verwenden Sie nicht zwei Optionsfelder für eine einfache binäre Auswahl:

Verwenden Sie stattdessen ein Kontrollkästchen:

Wenn Benutzer mehrere Optionen auswählen können, verwenden Sie Kontrollkästchen.

Wenn die Optionen der Benutzer innerhalb eines Wertebereichs liegen (z. B. 10, 20, 30, ... 100), verwenden Sie ein Schieberegler-Steuerelement .

Wenn mehr als acht Optionen vorhanden sind, verwenden Sie ein Kombinationsfeld.

Wenn die verfügbaren Optionen auf dem aktuellen Kontext einer App basieren oder sie andernfalls dynamisch variieren können, verwenden Sie ein Listensteuerelement.

Recommendations

• Stellen Sie sicher, dass der Zweck und der aktuelle Status einer Gruppe von Optionsfeldern explizit ist.
• Begrenzen Sie die Textbezeichnung des Optionsfelds auf eine einzelne Zeile.
• Wenn die Beschriftung dynamisch ist, überlegen Sie, wie die Größe der Schaltfläche automatisch geändert wird und was mit allen visuellen Elementen um sie herum geschieht.
• Verwenden Sie die Standardschriftart, es sei denn, dass Ihre Markenrichtlinien etwas anderes vorschreiben.
• Platzieren Sie nicht zwei RadioButtons-Gruppen nebeneinander. Wenn sich zwei RadioButtons-Gruppen direkt nebeneinander befinden, kann es für Benutzer schwierig sein, zu bestimmen, welche Schaltflächen zu welcher Gruppe gehören.

Übersicht über RadioButtons

Vergleich von „RadioButtons“ und „RadioButton“

Es gibt zwei Möglichkeiten zum Erstellen von Optionsfeldgruppen: RadioButtons und RadioButton.

• Wir empfehlen das RadioButtons-Steuerelement. Dieses Steuerelement vereinfacht das Layout, behandelt die Tastaturnavigation und die Barrierefreiheit und unterstützt die Bindung an eine Datenquelle.
• Sie können Gruppen einzelner RadioButton-Steuerelemente verwenden.

Tastaturzugriff und Navigationsverhalten wurden im Steuerelement RadioButtons optimiert. Diese Verbesserungen helfen sowohl Barrierefreiheits-Benutzern als auch fortgeschrittenen Tastaturbenutzern, schneller und einfacher durch die Liste der Optionen zu navigieren.

Zusätzlich zu diesen Verbesserungen wurde auch das visuelle Standardlayout einzelner Optionsfelder in einer RadioButtons-Gruppe durch automatische Einstellungen für Ausrichtung, Abstand und Ränder optimiert. Diese Optimierung beseitigt die Anforderung, diese Eigenschaften anzugeben, wie Sie es möglicherweise tun müssen, wenn Sie ein primitiveres Gruppierungssteuerelement wie StackPanel oder Grid verwenden.

Navigieren in einer RadioButtons-Gruppe

Das RadioButtons Steuerelement verfügt über ein spezielles Navigationsverhalten, mit dem Tastaturbenutzer schneller und einfacher in der Liste navigieren können.

Tastaturfokus

Das RadioButtons-Steuerelement unterstützt zwei Zustände:

• Kein Optionsfeld ist ausgewählt.
• Ein Optionsfeld ist ausgewählt.

In den nächsten Abschnitten wird das Fokusverhalten des Steuerelements in jedem Zustand beschrieben.

Kein Optionsfeld ist ausgewählt.

Wenn kein Optionsfeld ausgewählt ist, erhält das erste Optionsfeld in der Liste den Fokus.

Ein Optionsfeld ist ausgewählt.

Wenn ein Benutzer mittels TAB-TASTE in eine Liste wechselt, in der bereits ein Optionsfeld ausgewählt ist, erhält das ausgewählte Optionsfeld den Fokus.

Tastaturnavigation

Weitere Informationen zu allgemeinen Tastaturnavigationsverhalten finden Sie unter Tastaturinteraktionen – Navigation.

Wenn ein Element in einer RadioButtons-Gruppe bereits den Fokus hält, kann der Benutzer mit den Pfeiltasten zwischen den Elementen innerhalb der Gruppe navigieren. Die NACH-UNTEN-TASTE und die NACH-OBEN-TASTE bewegen den Fokus zum „nächsten“ bzw. „vorherigen“ logischen Element, wie in Ihrem XAML-Markup definiert. Die Pfeiltasten links und rechts bewegen sich räumlich.

Navigation in einspaltigen oder einzeilenbasierten Layouts

Bei einem einspaltigen oder einzeilenlayout führt die Tastaturnavigation zu folgendem Verhalten:

Navigation in mehrspaltigen, mehrzeiligen Layouts

In einem mehrspaltigen Rasterlayout mit mehreren Zeilen führt die Tastaturnavigation zu diesem Verhalten:

Links-/Rechtspfeiltasten

NACH-OBEN/NACH-UNTEN-TASTE

Weitere Informationen finden Sie unter Tastaturinteraktionen.

Einpacken

Innerhalb der RadioButtons-Gruppe springt der Fokus nicht von der ersten Zeile oder Spalte zur letzten bzw. von der letzten Zeile oder Spalte zur ersten. Dies liegt daran, dass Benutzer beim Verwenden eines Screenreaders das Gefühl einer Grenze sowie eine klare Kennzeichnung von Anfang und Ende verlieren, was es Benutzern mit Sehbehinderungen erschwert, in der Liste zu navigieren.

Das RadioButtons Steuerelement unterstützt auch keine Enumeration, da das Steuerelement eine angemessene Anzahl von Elementen enthalten soll (siehe Ist dies das richtige Steuerelement?).

Auswahl folgt Fokus

Wenn Sie die Tastatur verwenden, um zwischen Elementen in einer RadioButtons Gruppe zu navigieren, wird der Fokus von einem Element zum nächsten verschoben, das neu fokussierte Element wird ausgewählt, und das zuvor fokussierte Element wird gelöscht.

Sie können den Fokus verschieben, ohne die Auswahl zu ändern, indem Sie strg+pfeiltasten verwenden, um zu navigieren. Nachdem der Fokus verschoben wurde, können Sie die LEERTASTE verwenden, um das Element auszuwählen, das derzeit den Fokus besitzt.

Navigieren mit Gamepad und Fernbedienung

Wenn Sie ein Gamepad oder eine Remotesteuerung verwenden, um zwischen Optionsfeldern zu navigieren, ist das Verhalten „Auswahl folgt Fokus“ deaktiviert, und der Benutzer muss die „A“-Taste drücken, um das Optionsfeld, das aktuell den Fokus hält, auszuwählen.

Barrierefreiheitsverhalten

In der folgenden Tabelle wird beschrieben, wie die Sprachausgabe eine RadioButtons-Gruppe behandelt und was angekündigt wird. Dieses Verhalten hängt davon ab, wie ein Benutzer die Detaileinstellungen der Sprachausgabe festgelegt hat.

Erstellen einer WinUI 3 RadioButtons-Gruppe

Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

Das RadioButtons Steuerelement verwendet ein Inhaltsmodell, das einem ItemsControl-Objekt ähnelt. Das bedeutet, dass Sie folgende Aktionen ausführen können:

• Füllen Sie es auf, indem Sie Elemente direkt zur Items-Auflistung hinzufügen oder Daten an die ItemsSource-Eigenschaft binden.
• Verwenden Sie die SelectedIndex - oder SelectedItem-Eigenschaften , um abzurufen und festzulegen, welche Option ausgewählt ist.
• Behandeln Sie das SelectionChanged-Ereignis , um Maßnahmen zu ergreifen, wenn eine Option ausgewählt wird.

Hier deklarieren Sie ein einfaches RadioButtons-Steuerelement mit drei Optionen. Die Header-Eigenschaft ist so festgelegt, dass die Gruppe eine Bezeichnung erhält, und die SelectedIndex Eigenschaft wird so festgelegt, dass eine Standardoption bereitgestellt wird.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

Das Ergebnis sieht wie folgt aus:

Um eine Aktion auszuführen, wenn der Benutzer eine Option auswählt, behandeln Sie das SelectionChanged-Ereignis . Hier ändern Sie die Hintergrundfarbe eines Border-Elements namens "ExampleBorder" (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

Auswahlzustände

Ein Optionsfeld hat zwei Zustände: „aktiviert“ und „deaktiviert“. Wenn eine Option in einer RadioButtons Gruppe ausgewählt ist, können Sie den Wert aus der SelectedItem-Eigenschaft und dessen Position in der Auflistung aus der SelectedIndex-Eigenschaft abrufen. Ein Optionsfeld kann deaktiviert werden, wenn ein Benutzer ein anderes Optionsfeld in derselben Gruppe auswählt, doch es kann nicht durch erneutes Auswählen deaktiviert werden. Sie können eine Optionsfeldgruppe jedoch programmgesteuert deaktivieren, indem Sie sie auf SelectedItem = null oder SelectedIndex = -1 festlegen. (Wird SelectedIndex auf einen Wert außerhalb des Bereichs der Items-Sammlung festgelegt, erfolgt keine Auswahl.)

RadioButtons-Inhalt

Im vorherigen Beispiel haben Sie das RadioButtons Steuerelement mit einfachen Zeichenfolgen aufgefüllt. Das Steuerelement stellte die Optionsschaltflächen zur Verfügung und verwendete die Zeichenfolgen als Beschriftung für die einzelnen Optionsschaltflächen.

Sie können das RadioButtons Steuerelement jedoch mit einem beliebigen Objekt auffüllen. In der Regel soll das Objekt eine Zeichenfolgendarstellung bereitstellen, die als Beschriftung verwendet werden kann. In einigen Fällen kann ein Bild anstelle von Text geeignet sein.

Hier werden SymbolIcon-Elemente verwendet, um das Steuerelement aufzufüllen.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

Sie können auch einzelne RadioButton-Steuerelemente verwenden, um die RadioButtons Elemente aufzufüllen. Dies ist ein Sonderfall, den wir später besprechen. Siehe "RadioButton"-Steuerelemente in einer RadioButtons-Gruppe.

Ein Vorteil der Verwendung eines beliebigen Objekts besteht darin, dass Sie das RadioButtons Steuerelement an einen benutzerdefinierten Typ in Ihrem Datenmodell binden können. Im nächsten Abschnitt wird dies veranschaulicht.

Datenbindung

Das RadioButtons Steuerelement unterstützt die Datenbindung an die ItemsSource-Eigenschaft . In diesem Beispiel wird gezeigt, wie Sie das Steuerelement an eine benutzerdefinierte Datenquelle binden können. Die Darstellung und Funktionalität dieses Beispiels entspricht dem vorherigen Hintergrundfarbbeispiel. Hier werden die Farbpinsel jedoch im Datenmodell gespeichert, anstatt im SelectionChanged Ereignishandler erstellt zu werden.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

RadioButton-Steuerelemente in einer RadioButtons-Gruppe

Sie können einzelne RadioButton-Steuerelemente verwenden, um die RadioButtons-Elemente aufzufüllen. Sie können dies tun, um auf bestimmte Eigenschaften wie AutomationProperties.Name zuzugreifen; oder Sie haben bereits bestehenden RadioButton-Code, möchten aber das Layout und die Navigation von RadioButtons nutzen.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

Wenn Sie RadioButton-Steuerelemente in einer RadioButtons-Gruppe verwenden, weiß das RadioButtons-Steuerelement, wie das RadioButton-Steuerelement zu präsentieren ist, sodass am Ende nicht zwei Auswahlkreise angezeigt werden.

Es gibt jedoch einige Verhaltensweisen, die Sie beachten sollten. Es empfiehlt sich, den Zustand und die Ereignisse mit den einzelnen Steuerelementen oder mit der RadioButtons-Gruppe zu verarbeiten, aber nicht mit beiden, um Konflikte zu vermeiden.

Diese Tabelle enthält die zugehörigen Ereignisse und Eigenschaften für beide Steuerelemente.

Wenn Sie Ereignisse für ein einzelnes RadioButton-Steuerelement behandeln, z. B. Checked oder Unchecked, und auch das Ereignis RadioButtons.SelectionChanged behandeln, werden beide Ereignisse ausgelöst. Das RadioButton Ereignis tritt zuerst auf, und dann tritt das RadioButtons.SelectionChanged Ereignis auf, was zu Konflikten führen kann.

Die Eigenschaften IsChecked, SelectedItem und SelectedIndex bleiben synchronisiert. Eine Änderung an einer Eigenschaft aktualisiert die beiden anderen Eigenschaften.

Die RadioButton.GroupName-Eigenschaft wird ignoriert. Die Gruppe wird vom RadioButtons-Steuerelement erstellt.

Definieren mehrerer Spalten

Standardmäßig ordnet das RadioButtons-Steuerelement seine Optionsfelder vertikal in einer einzelnen Spalte an. Sie legen die MaxColumns-Eigenschaft fest, damit das Steuerelement die Radiobuttons in mehreren Spalten anordnet. (Wenn Sie dies tun, werden die Optionsfelder in spaltenweise absteigender Reihenfolge angeordnet, wobei die Elemente von oben nach unten und dann von links nach rechts ausgefüllt werden.)

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Erstellen Sie Ihre eigene RadioButton-Gruppe

Optionsfelder funktionieren in Gruppen. Sie können einzelne RadioButton-Steuerelemente auf zwei Arten gruppieren:

• Platzieren Sie sie im gleichen übergeordneten Container.
• Legen Sie die GroupName-Eigenschaft für jedes Optionsfeld auf denselben Wert fest.

In diesem Beispiel wird die erste Gruppe von Optionsfeldern implizit gruppiert, da die Felder im selben StackPanel-Element enthalten sind. Die zweite Gruppe wird auf zwei StackPanel-Elemente aufgeteilt, damit sie mit GroupName explizit in eine einzelne Gruppe gruppiert werden.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

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

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

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

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Diese beiden Steuerelementgruppen RadioButton sehen wie folgt aus:

Optionsfeldstatus.

Ein Optionsfeld hat zwei Zustände: „aktiviert“ und „deaktiviert“. Wenn ein Optionsfeld aktiviert ist, ist die IsChecked-Eigenschaft auf true festgelegt. Wenn ein Optionsfeld deaktiviert ist, ist die IsChecked-Eigenschaft auf false festgelegt. Ein Optionsfeld kann deaktiviert werden, wenn ein Benutzer ein anderes Optionsfeld in derselben Gruppe auswählt, doch es kann nicht durch erneutes Auswählen deaktiviert werden. Sie können ein Optionsfeld jedoch programmgesteuert durch Festlegen der IsChecked-Eigenschaft auf false deaktivieren.

Zu berücksichtigende visuelle Elemente

Der Standardabstand der einzelnen RadioButton-Steuerelemente unterscheidet sich von dem durch eine RadioButtons-Gruppe bereitgestellten Abstand. Wenn Sie den RadioButtons-Abstand auf einzelne RadioButton-Steuerelemente anwenden möchten, verwenden Sie einen Margin-Wert von 0,0,7,3, wie hier gezeigt wird.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Die folgenden Abbildungen zeigen die bevorzugten Abstände der Optionsfelder in einer Gruppe.

Zugehörige Themen

• Tasten
• Wippschalter
• Kontrollkästchen
• Listen und Kombinationsfelder
• Schieberegler
• RadioButtons-Klasse
• RadioButton-Klasse