Kombinationsfeld und Listenfeld

  • Artikel

Verwenden Sie ein Kombinationsfeld (auch als Dropdownliste bezeichnet), um eine Liste von Elementen anzuzeigen, in der ein Benutzer eine Auswahl treffen kann. Ein Kombinationsfeld wird zunächst im kompakten Zustand angezeigt und kann erweitert werden, sodass eine Liste der auswählbaren Elemente angezeigt wird. Ein Listenfeld ähnelt einem Kombinationsfeld, ist aber nicht reduzierbar bzw. hat keinen kompakten Zustand. Weitere Informationen zu Listenfeldern finden Sie am Ende dieses Artikels.

Wenn das Kombinationsfeld geschlossen ist, wird entweder die aktuelle Auswahl angezeigt oder das Feld ist leer, wenn kein Element ausgewählt ist. Wenn der Benutzer das Kombinationsfeld erweitert, wird die Liste der auswählbaren Elemente angezeigt.

Ein Bild einer Dropdownliste im kompakten Zustand.

Ist dies das richtige Steuerelement?

  • Mit einer Dropdownliste können Benutzer einen einzelnen Wert aus einer Reihe von Elementen auswählen, die mit einzelnen Textzeilen angemessen dargestellt werden können.
  • Verwenden Sie eine Liste oder eine Rasteransicht anstelle eines Kombinationsfelds, um Elemente anzuzeigen, die mehrere Textzeilen oder Bilder enthalten.
  • Wenn weniger als fünf Elemente vorhanden sind, können Sie stattdessen die Verwendung von Optionsfeldern (wenn nur ein Element ausgewählt werden kann) oder Kontrollkästchen (wenn mehrere Elemente ausgewählt werden können) in Betracht ziehen.
  • Verwenden Sie ein Kombinationsfeld, wenn die Auswahlelemente für den Fluss der App weniger wichtig sind. Wenn für die Mehrzahl der Benutzer in der Mehrzahl der Situationen die Standardoption empfohlen wird, kann die Anzeige aller Elemente in einer Listenansicht mehr Aufmerksamkeit auf die Optionen ziehen als nötig. Sie können Platz sparen und Ablenkungen reduzieren, indem Sie ein Kombinationsfeld verwenden.

Beispiele

Ein Kombinationsfeld im kompakten Zustand kann eine Kopfzeile anzeigen.

Screenshot, der eine Dropdownliste in ihrem kompakten Zustand zeigt.

Obwohl Kombinationsfelder erweitert werden, um längere Zeichenfolgen zu unterstützen, sollten Sie extrem lange Zeichenfolgen vermeiden, die nur schwer lesbar sind.

Beispiel einer Dropdownliste mit einer langen Textzeichenfolge

Wenn die Liste in einem Kombinationsfeld lang genug ist, wird eine Bildlaufleiste angezeigt. Gruppieren Sie die Elemente in der Liste logisch.

Beispiel einer Bildlaufleiste in einer Dropdownliste

Empfehlungen

  • Schränken Sie den Textinhalt von Kombinationsfeldelementen auf eine einzelne Zeile ein.
  • Sortieren Sie die Elemente in einem Kombinationsfeld in der logischsten Reihenfolge. Gruppieren Sie verwandte Optionen, und platzieren Sie die am häufigsten verwendeten Optionen oben in der Liste. Sortieren Sie Namen in alphabetischer Reihenfolge, Nummern in numerischer Reihenfolge und Datumsangaben in chronologischer Reihenfolge.

Listenfelder

In einem Listenfeld kann der Benutzer ein einzelnes Element oder mehrere Elemente aus einer Auflistung auswählen. Listenfelder ähneln Dropdownlisten, abgesehen davon, dass Listenfelder immer geöffnet sind; für ein Listenfeld gibt es keinen kompakten Zustand (nicht erweitert). Elemente in einem Listenfeld können gescrollt werden, wenn der Platz nicht ausreicht, um alle Elemente anzuzeigen.

Ist ein Listenfeld das richtige Steuerelement?

  • Ein Listenfeld kann nützlich sein, wenn Elemente in der Liste so relevant sind, dass sie auffälliger dargestellt werden sollten, und genügend Platz auf dem Bildschirm zum Anzeigen der vollständigen Liste vorhanden ist.
  • Ein Listenfeld sollte den Benutzer bei einer wichtigen Entscheidung bzw. Auswahl auf alle Alternativen aufmerksam machen. Im Gegensatz dazu lenkt eine Dropdownliste die Aufmerksamkeit des Benutzers zunächst auf das ausgewählte Element.
  • Vermeiden Sie die Verwendung eines Listenfelds in folgenden Fällen:
    • Es gibt eine sehr kleine Anzahl von Elementen für die Liste. Ein Einzelauswahl-Listenfeld, das immer zwei identische Optionen enthält, sollte besser in Form von Optionsfeldern dargestellt werden. Ziehen Sie die Verwendung von Optionsfeldern ebenfalls in Erwägung, wenn die Liste drei oder vier statische Elemente enthält.
    • Das Listenfeld ist single-select und verfügt immer über die gleichen 2 Optionen, bei denen eine als nicht die andere impliziert werden kann, z. B. "ein" und "aus". Verwenden Sie ein einzelnes Kontrollkästchen oder einen Umschaltschalter.
    • Die Anzahl von Elementen ist sehr hoch. Bessere Optionen für lange Listen sind Rasteransicht und Listenansicht. Für sehr lange Listen mit gruppierten Daten wir der semantische Zoom bevorzugt.
    • Bei den Elementen handelt es sich um zusammenhängende numerische Werte. Wenn dies der Fall ist, sollten Sie einen Schieberegler in Erwägung ziehen.
    • Die Auswahlelemente sind im Fluss Ihrer App von sekundärer Bedeutung, oder für die meisten Benutzer wird in den meisten Situationen die Standardoption empfohlen. Verwenden Sie stattdessen eine Dropdownliste.

Empfehlungen für Listenfelder

  • Der ideale Bereich von Elementen in einem Listenfeld beträgt 3 bis 9.
  • Ein Listenfeld funktioniert gut, wenn die Elemente darin dynamisch variieren können.
  • Legen Sie die Größe eines Listenfelds möglichst so fest, dass für die Liste der zugehörigen Elemente keine Verschiebung und kein Scrollen erforderlich sind.
  • Stellen Sie sicher, dass der Zweck des Listenfelds und die momentan ausgewählten Elemente klar sind.
  • Reservieren Sie visuelle Effekte und Animationen für das Feedback für die Fingereingabe und für den ausgewählten Zustand von Elementen.
  • Beschränken Sie den Text von Listenfeldelementen auf eine einzelne Zeile. Wenn es sich bei den Elementen um visuelle Objekte handelt, können Sie die Größe anpassen. Wenn ein Element mehrere Textzeilen oder Bilder enthält, verwenden Sie stattdessen eine Raster- oder Listenansicht.
  • Verwenden Sie die standardmäßige Schriftart, sofern Sie gemäß Ihren Markenrichtlinien keine andere verwenden müssen.
  • Verwenden Sie ein Listenfeld nicht zum Ausführen von Befehlen oder zum dynamischen Anzeigen oder Ausblenden anderer Steuerelemente.

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Die Windows-UI-Bibliothek 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Erstellen eines Kombinationsfelds

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich das ComboBox-Objekt in Aktion an.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Das Kombinationsfeld füllen Sie, indem Sie der Sammlung Items direkt Objekte hinzufügen oder die ItemsSource-Eigenschaft an eine Datenquelle binden. Elemente, die ComboBox hinzugefügt werden, sind in ComboBoxItem-Containern umschlossen.

Nachfolgend sehen Sie ein einfaches Kombinationsfeld mit hinzugefügten Elementen in XAML.

<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

Im folgenden Beispiel wird die Bindung eines Kombinationsfelds an eine Sammlung von FontFamily-Objekten veranschaulicht.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>

ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
};

Elementauswahl

Wie ListView und GridView ist auch ComboBox von Selector abgeleitet, sodass du die Auswahl eines Benutzers auf die gleiche Standardmethode abrufen kannst.

Sie können das ausgewählte Element des Kombinationsfelds mithilfe der SelectedItem-Eigenschaft und den Index des ausgewählten Elements mithilfe der SelectedIndex-Eigenschaft abrufen oder festlegen.

Um den Wert einer bestimmten Eigenschaft des ausgewählten Datenelements abzurufen, können Sie die SelectedValue-Eigenschaft verwenden. Legen Sie in diesem Fall SelectedValuePath fest, um anzugeben, für welche Eigenschaft des ausgewählten Elements der Wert abgerufen werden soll.

Tipp

Wenn Sie SelectedItem oder SelectedIndex festlegen, um die Standardauswahl anzugeben, wird eine Ausnahme ausgegeben, wenn die Eigenschaft festgelegt wird, bevor die Sammlung Items des Kombinationsfelds gefüllt wird. Sofern Sie die Elemente nicht in XAML definieren, empfiehlt es sich, das Ereignis „Loaded“ des Kombinationsfelds zu verarbeiten und SelectedItem oder SelectedIndex im Ereignishandler „Loaded“ festzulegen.

Sie können eine Bindung an diese Eigenschaften in XAML erstellen oder das Ereignis SelectionChanged verarbeiten, um auf Änderungen der Auswahl zu reagieren.

Im Ereignishandlercode können Sie das ausgewählte Element von der SelectionChangedEventArgs.AddedItems-Eigenschaft abrufen. Das zuvor ausgewählte Element (falls vorhanden) können Sie von der SelectionChangedEventArgs.RemovedItems-Eigenschaft abrufen. Die AddedItems- und RemovedItems-Sammlung enthält jeweils nur ein Element, da in Kombinationsfeldern keine Mehrfachauswahl möglich ist.

Im folgenden Beispiel werden die Verarbeitung des Ereignisses SelectionChanged und die Bindung an das ausgewählte Element veranschaulicht.

<StackPanel>
    <ComboBox x:Name="colorComboBox" Width="200"
              Header="Colors" PlaceholderText="Pick a color"
              SelectionChanged="ColorComboBox_SelectionChanged">
        <x:String>Blue</x:String>
        <x:String>Green</x:String>
        <x:String>Red</x:String>
        <x:String>Yellow</x:String>
    </ComboBox>

    <Rectangle x:Name="colorRectangle" Height="30" Width="100"
               Margin="0,8,0,0" HorizontalAlignment="Left"/>

    <TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
    <TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string colorName = e.AddedItems[0].ToString();
    Color color;
    switch (colorName)
    {
        case "Yellow":
            color = Colors.Yellow;
            break;
        case "Green":
            color = Colors.Green;
            break;
        case "Blue":
            color = Colors.Blue;
            break;
        case "Red":
            color = Colors.Red;
            break;
    }
    colorRectangle.Fill = new SolidColorBrush(color);
}

SelectionChanged und Tastaturnavigation

Das Ereignis SelectionChanged tritt standardmäßig ein, wenn ein Benutzer auf ein Element in der Liste klickt oder tippt oder die EINGABETASTE drückt, um die Auswahl zu übernehmen, und das Kombinationsfeld geschlossen wird. Die Auswahl ändert sich nicht, wenn der Benutzer mit den Pfeiltasten der Tastatur in der geöffneten Liste des Kombinationsfelds navigiert.

Um ein Kombinationsfeld zu erstellen, das live aktualisiert wird, wenn der Benutzer mit den Pfeiltasten in der geöffneten Liste navigiert (z. B. in einer Dropdownliste für die Schriftartauswahl), müssen Sie SelectionChangedTrigger auf Always festlegen. Dies bewirkt, dass das Ereignis SelectionChanged eintritt, wenn der Fokus auf ein anderes Element in der geöffneten Liste verschoben wird.

Änderung des Verhaltens von ausgewählten Elementen

In Windows 10 Version 1809 (SDK 17763) oder höher wird das Verhalten von ausgewählten Elementen aktualisiert, sodass bearbeitbare Kombinationsfelder unterstützt werden.

Vor SDK 17763 musste der Wert der SelectedItem-Eigenschaft (und somit auch SelectedValue und SelectedIndex) in der Items-Sammlung des Kombinationsfelds enthalten sein. Die Einstellung colorComboBox.SelectedItem = "Pink" im vorherigen Beispiel ergibt Folgendes:

  • SelectedItem = null
  • SelectedValue = null
  • SelectedIndex = -1

In SDK 17763 und höher muss der Wert der SelectedItem-Eigenschaft (und somit auch SelectedValue und SelectedIndex) nicht in der Items-Sammlung des Kombinationsfelds enthalten sein. Die Einstellung colorComboBox.SelectedItem = "Pink" im vorherigen Beispiel ergibt Folgendes:

  • SelectedItem = Pink
  • SelectedValue = Pink
  • SelectedIndex = -1

Textsuche

Kombinationsfelder unterstützen automatisch die Suche in ihren Sammlungen. Wenn ein Benutzer über eine physische Tastatur Zeichen eingibt, während sich der Fokus auf einem geöffneten oder geschlossenen Kombinationsfeld befindet, werden Vorschläge angezeigt, die der vom Benutzer eingegebenen Zeichenfolge entsprechen. Diese Funktionalität ist besonders bei der Navigation durch eine lange Liste nützlich. Beispielsweise können Benutzer bei der Interaktion mit einer Dropdownliste, die verschiedene Bundesstaaten enthält, die Taste „w“ drücken, um „Washington“ anzuzeigen und schnell auswählen zu können. Bei der Textsuche wird nicht zwischen Groß- und Kleinschreibung unterschieden.

Sie können die IsTextSearchEnabled-Eigenschaft auf false festlegen, um diese Funktion zu deaktivieren.

Bearbeitbarkeit eines Kombinationsfelds

Wichtig

Für diese Funktion ist Windows 10 Version 1809 (SDK 17763) oder höher erforderlich.

Standardmäßig kann der Benutzer in einem Kombinationsfeld eine Option in einer vordefinierten Liste von Optionen auswählen. In manchen Fällen enthält die Liste jedoch nur eine Teilmenge der gültigen Werte, und der Benutzer soll andere Werte eingeben können, die nicht aufgeführt sind. Dazu können Sie das Kombinationsfeld bearbeitbar machen.

Um ein Kombinationsfeld bearbeitbar zu machen, legen Sie die IsEditable-Eigenschaft auf true fest. Dann muss das Ereignis TextSubmitted so verarbeitet werden, dass es mit dem vom Benutzer eingegebenen Wert verwendet wird.

Standardmäßig wird der Wert SelectedItem aktualisiert, wenn benutzerdefinierter Text übernommen wird. Sie können dieses Verhalten überschreiben, indem Sie Handled in den TextSubmitted-Ereignisargumenten auf true festlegen. Wenn das Ereignis als „handled“ markiert ist, wird im Kombinationsfeld nach dem Ereignis keine weitere Aktion ausgeführt, und der Bearbeitungszustand des Kombinationsfelds wird beibehalten. SelectedItem wird nicht aktualisiert.

Im folgenden Beispiel ist ein einfaches bearbeitbares Kombinationsfeld dargestellt. Die Liste enthält einfache Zeichenfolgen, und alle vom Benutzer eingegebenen Werte werden wie eingegeben verwendet.

Über die Auswahl der zuletzt verwendeten Namen können benutzerdefinierte Zeichenfolgen eingegeben werden. Die Liste RecentlyUsedNames enthält einige Werte, die der Benutzer auswählen kann. Er kann jedoch auch einen neuen benutzerdefinierten Wert eingeben. Die CurrentName-Eigenschaft gibt den aktuell eingegebenen Namen an.

<ComboBox IsEditable="true"
          ItemsSource="{x:Bind RecentlyUsedNames}"
          SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>

Übermittelter Text

Das Ereignis TextSubmitted kann so verarbeitet werden, dass es mit dem vom Benutzer eingegebenen Wert verwendet wird. Im Ereignishandler überprüfen Sie normalerweise, ob der vom Benutzer eingegebene Wert gültig ist, und verwenden dann den Wert in der App. Je nach Fall kannst du den Wert auch zur späteren Verwendung der Liste mit Optionen des Kombinationsfelds hinzufügen.

Das Ereignis TextSubmitted tritt ein, wenn folgende Bedingungen erfüllt sind:

  • Die IsEditable-Eigenschaft ist auf true festgelegt.
  • Der Benutzer gibt Text ein, der mit keinem vorhandenen Eintrag in der Liste des Kombinationsfelds übereinstimmt.
  • Der Benutzer drückt die EINGABETASTE oder verschiebt den Fokus weg vom Kombinationsfeld.

Das Ereignis TextSubmitted tritt nicht ein, wenn der Benutzer Text eingibt und dann in der Liste nach oben oder nach unten navigiert.

Beispiel: Überprüfen der Eingabe und lokale Verwendung

In diesem Beispiel enthält die Auswahl für den Schriftgrad eine Gruppe von Werten, die der Schriftgradabstufung entsprechen. Der Benutzer kann jedoch Schriftgrade eingeben, die nicht in der Liste enthalten sind.

Wenn der Benutzer einen Wert hinzufügt, der nicht in der Liste enthalten ist, wird der Schriftgrad aktualisiert, der Wert wird jedoch der Liste der Schriftgrade nicht hinzugefügt.

Wenn der neu eingegebene Wert ungültig ist, verwenden Sie SelectedValue, um die Text-Eigenschaft auf den letzten bekannten gültigen Wert zurückzusetzen.

<ComboBox x:Name="fontSizeComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfFontSizes}"
          TextSubmitted="FontSizeComboBox_TextSubmitted"/>

private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (byte.TryParse(e.Text, out double newValue))
    {
        // Update the app's font size.
        _fontSize = newValue;
    }
    else
    {
        // If the item is invalid, reject it and revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        sender.Text = sender.SelectedValue.ToString();
        e.Handled = true;
    }
}

Beispiel: Überprüfen der Eingabe und Hinzufügen zur Liste

In diesem Beispiel enthält eine Auswahl der bevorzugten Farben die am häufigsten verwendeten bevorzugten Farben (Rot, Blau, Grün und Orange). Der Benutzer kann jedoch eine bevorzugte Farbe hinzufügen, die nicht in der Liste enthalten ist. Wenn der Benutzer eine gültige Farbe hinzufügt (z. B. Rosa), wird die neu eingegebene Farbe der Liste hinzugefügt und als aktive bevorzugte Farbe festgelegt.

<ComboBox x:Name="favoriteColorComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfColors}"
          TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>

private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (IsValid(e.Text))
    {
        FavoriteColor newColor = new FavoriteColor()
        {
            ColorName = e.Text,
            Color = ColorFromStringConverter(e.Text)
        }
        ListOfColors.Add(newColor);
    }
    else
    {
        // If the item is invalid, reject it but do not revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        e.Handled = true;
    }
}

bool IsValid(string Text)
{
    // Validate that the string is: not empty; a color.
}

Beispielcode herunterladen