Kombinationsfeld und ListenfeldCombo box and list box

Verwenden Sie ein Kombinationsfeld (auch als Dropdownliste bezeichnet), um eine Liste von Elementen anzuzeigen, in der ein Benutzer eine Auswahl treffen kann.Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. Ein Kombinationsfeld wird zunächst im kompakten Zustand angezeigt und kann erweitert werden, sodass eine Liste der auswählbaren Elemente angezeigt wird.A combo box starts in a compact state and expands to show a list of selectable items. Ein ListBox ähnelt einem Kombinationsfeld, ist aber nicht reduzierbar/besitzt keinen kompakten Zustand.A ListBox is similar to a combo box, but is not collapsible/does not have a compact state. Weitere Informationen zu Listenfeldern findest du am Ende dieses Artikels.You can learn more about List boxes at the end of this article.

Wenn das Kombinationsfeld geschlossen ist, wird entweder die aktuelle Auswahl angezeigt oder das Feld ist leer, wenn kein Element ausgewählt ist.When the combo box is closed, it either displays the current selection or is empty if there is no selected item. Wenn der Benutzer das Kombinationsfeld erweitert, wird die Liste der auswählbaren Elemente angezeigt.When the user expands the combo box, it displays the list of selectable items.

Kurzes Video, das eine Dropdownliste in ihrem kompakten sowie im erweiterten Zustand zeigt.

Kombinationsfeld im kompakten Zustand mit einer Überschrift.A combo box in its compact state with a header.

Abrufen der Windows-UI-BibliothekGet the Windows UI Library

WinUI-Logo

Die Bibliothek „Windows UI“ enthält ab Version 2.2 eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Weitere Informationen finden Sie unter Eckradius.For more info, see Corner radius. „WinUI“ ist ein NuGet-Paket, das neue Steuerelemente und Benutzeroberflächenfeatures für Windows-Apps enthält.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek).For more info, including installation instructions, see Windows UI Library.

Plattform-APIs: ComboBox-Klasse, IsEditable-Eigenschaft, Text-Eigenschaft, TextSubmitted-EreignisPlatform APIs: ComboBox class, IsEditable property, Text property, TextSubmitted event

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

  • 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.Use a drop-down list to let users select a single value from a set of items that can be adequately represented with single lines of text.
  • Verwenden Sie eine Liste oder eine Rasteransicht anstelle eines Kombinationsfelds, um Elemente anzuzeigen, die mehrere Textzeilen oder Bilder enthalten.Use a list or grid view instead of a combo box to display items that contain multiple lines of text or images.
  • 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.When there are fewer than five items, consider using radio buttons (if only one item can be selected) or check boxes (if multiple items can be selected).
  • Verwenden Sie ein Kombinationsfeld, wenn die Auswahlelemente für den Fluss der App weniger wichtig sind.Use a combo box when the selection items are of secondary importance in the flow of your app. 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.If the default option is recommended for most users in most situations, showing all the items by using a list view might draw more attention to the options than necessary. Sie können Platz sparen und Ablenkungen reduzieren, indem Sie ein Kombinationsfeld verwenden.You can save space and minimize distraction by using a combo 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 ComboBox in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the ComboBox in action.

Ein Kombinationsfeld im kompakten Zustand kann eine Kopfzeile anzeigen.A combo box in its compact state can show a header.

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.Although combo boxes expand to support longer string lengths, avoid excessively long strings that are difficult to read.

Beispiel einer Dropdownliste mit einer langen Textzeichenfolge

Wenn die Liste in einem Kombinationsfeld lang genug ist, wird eine Bildlaufleiste angezeigt.If the collection in a combo box is long enough, a scroll bar will appear to accommodate it. Gruppieren Sie die Elemente in der Liste logisch.Group items logically in the list.

Beispiel einer Bildlaufleiste in einer Dropdownliste

Erstellen eines KombinationsfeldsCreate a combo box

Das Kombinationsfeld füllen Sie, indem Sie der Sammlung Items direkt Objekte hinzufügen oder die ItemsSource-Eigenschaft an eine Datenquelle binden.You populate the combo box by adding objects directly to the Items collection or by binding the ItemsSource property to a data source. Elemente, die ComboBox hinzugefügt werden, sind in ComboBoxItem-Containern umschlossen.Items added to the ComboBox are wrapped in ComboBoxItem containers.

Nachfolgend sehen Sie ein einfaches Kombinationsfeld mit hinzugefügten Elementen in XAML.Here's a simple combo box with items added 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.The following example demonstrates binding a combo box to a collection of FontFamily objects.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>
ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>();

public MainPage()
{
    this.InitializeComponent();
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
}

ElementauswahlItem selection

Wie ListView und GridView ist auch ComboBox von Selector abgeleitet, sodass du die Auswahl eines Benutzers auf die gleiche Standardmethode abrufen kannst.Like ListView and GridView, ComboBox is derived from Selector, so you can get the user's selection in the same standard way.

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.You can get or set the combo box's selected item by using the SelectedItem property, and get or set the index of the selected item by using the SelectedIndex property.

Um den Wert einer bestimmten Eigenschaft des ausgewählten Datenelements abzurufen, können Sie die SelectedValue-Eigenschaft verwenden.To get the value of a particular property on the selected data item, you can use the SelectedValue property. Legen Sie in diesem Fall SelectedValuePath fest, um anzugeben, für welche Eigenschaft des ausgewählten Elements der Wert abgerufen werden soll.In this case, set the SelectedValuePath to specify which property on the selected item to get the value from.

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.If you set SelectedItem or SelectedIndex to indicate the default selection, an exception occurs if the property is set before the combo box Items collection is populated. 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.Unless you define your Items in XAML, it's best to handle the combo box Loaded event, and set SelectedItem or SelectedIndex in the Loaded event handler.

Sie können eine Bindung an diese Eigenschaften in XAML erstellen oder das Ereignis SelectionChanged verarbeiten, um auf Änderungen der Auswahl zu reagieren.You can bind to these properties in XAML, or handle the SelectionChanged event to respond to selection changes.

Im Ereignishandlercode können Sie das ausgewählte Element von der SelectionChangedEventArgs.AddedItems-Eigenschaft abrufen.In the event handler code, you can get the selected item from the SelectionChangedEventArgs.AddedItems property. Das zuvor ausgewählte Element (falls vorhanden) können Sie von der SelectionChangedEventArgs.RemovedItems-Eigenschaft abrufen.You can get the previously selected item (if any) from the SelectionChangedEventArgs.RemovedItems property. Die AddedItems- und RemovedItems-Sammlung enthält jeweils nur ein Element, da in Kombinationsfeldern keine Mehrfachauswahl möglich ist.The AddedItems and RemovedItems collections each contain only 1 item because combo box does not support multiple selection.

Im folgenden Beispiel werden die Verarbeitung des Ereignisses SelectionChanged und die Bindung an das ausgewählte Element veranschaulicht.This example shows how to handle the SelectionChanged event, and also how to bind to the selected item.

<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)
{
    // Add "using Windows.UI;" for Color and Colors.
    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 TastaturnavigationSelectionChanged and keyboard navigation

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.By default, the SelectionChanged event occurs when a user clicks, taps, or presses Enter on an item in the list to commit their selection, and the combo box closes. Die Auswahl ändert sich nicht, wenn der Benutzer mit den Pfeiltasten der Tastatur in der geöffneten Liste des Kombinationsfelds navigiert.Selection doesn't change when the user navigates the open combo box list with the keyboard arrow keys.

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.To make a combo box that "live updates" while the user is navigating the open list with the arrow keys (like a Font selection drop-down), set SelectionChangedTrigger to Always. Dies bewirkt, dass das Ereignis SelectionChanged eintritt, wenn der Fokus auf ein anderes Element in der geöffneten Liste verschoben wird.This causes the SelectionChanged event to occur when focus changes to another item in the open list.

Änderung des Verhaltens von ausgewählten ElementenSelected item behavior change

In Windows 10 Version 1809 (SDK 17763) oder höher wird das Verhalten von ausgewählten Elementen aktualisiert, sodass bearbeitbare Kombinationsfelder unterstützt werden.In Windows 10, version 1809 (SDK 17763) or later, the behavior of selected items is updated to support editable combo boxes.

Vor SDK 17763 musste der Wert der SelectedItem-Eigenschaft (und somit auch SelectedValue und SelectedIndex) in der Items-Sammlung des Kombinationsfelds enthalten sein.Prior to SDK 17763, the value of the SelectedItem property (and therefore, SelectedValue and SelectedIndex) was required to be in the combo box's Items collection. Die Einstellung colorComboBox.SelectedItem = "Pink" im vorherigen Beispiel ergibt Folgendes:Using the previous example, setting colorComboBox.SelectedItem = "Pink" results in:

  • SelectedItem = nullSelectedItem = null
  • SelectedValue = nullSelectedValue = null
  • SelectedIndex = -1SelectedIndex = -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.In SDK 17763 and later, the value of the SelectedItem property (and therefore, SelectedValue and SelectedIndex) is not required to be in the combo box's Items collection. Die Einstellung colorComboBox.SelectedItem = "Pink" im vorherigen Beispiel ergibt Folgendes:Using the previous example, setting colorComboBox.SelectedItem = "Pink" results in:

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

Kombinationsfelder unterstützen automatisch die Suche in ihren Sammlungen.Combo boxes automatically support search within their collections. 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.As users type characters on a physical keyboard while focused on an open or closed combo box, candidates matching the user's string are brought into view. Diese Funktionalität ist besonders bei der Navigation durch eine lange Liste nützlich.This functionality is especially helpful when navigating a long list. 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.For example, when interacting with a drop-down containing a list of states, users can press the "w" key to bring "Washington" into view for quick selection. Bei der Textsuche wird nicht zwischen Groß- und Kleinschreibung unterschieden.The text search is not case-sensitive.

Sie können die IsTextSearchEnabled-Eigenschaft auf false festlegen, um diese Funktion zu deaktivieren.You can set the IsTextSearchEnabled property to false to disable this functionality.

Bearbeitbarkeit eines KombinationsfeldsMake a combo box editable

Wichtig

Für diese Funktion ist Windows 10 Version 1809 (SDK 17763) oder höher erforderlich.This feature requires Windows 10, version 1809 (SDK 17763) or later.

Standardmäßig kann der Benutzer in einem Kombinationsfeld eine Option in einer vordefinierten Liste von Optionen auswählen.By default, a combo box lets the user select from a pre-defined list of options. 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.However, there are cases where the list contains only a subset of valid values, and the user should be able to enter other values that aren't listed. Dazu können Sie das Kombinationsfeld bearbeitbar machen.To support this, you can make the combo box editable.

Um ein Kombinationsfeld bearbeitbar zu machen, legen Sie die IsEditable-Eigenschaft auf true fest.To make a combo box editable, set the IsEditable property to true. Dann muss das Ereignis TextSubmitted so verarbeitet werden, dass es mit dem vom Benutzer eingegebenen Wert verwendet wird.Then, handle the TextSubmitted event to work with the value entered by the user.

Standardmäßig wird der Wert SelectedItem aktualisiert, wenn benutzerdefinierter Text übernommen wird.By default, the SelectedItem value is updated when the user commits custom text. Sie können dieses Verhalten überschreiben, indem Sie Handled in den TextSubmitted-Ereignisargumenten auf true festlegen.You can override this behavior by setting Handled to true in the TextSubmitted event args. 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.When the event is marked as handled, the combo box will take no further action after the event and will stay in the editing state. SelectedItem wird nicht aktualisiert.SelectedItem will not be updated.

Im folgenden Beispiel ist ein einfaches bearbeitbares Kombinationsfeld dargestellt.This example shows a simple editable combo box. Die Liste enthält einfache Zeichenfolgen, und alle vom Benutzer eingegebenen Werte werden wie eingegeben verwendet.The list contains simple strings, and any value entered by the user is used as entered.

Über die Auswahl der zuletzt verwendeten Namen können benutzerdefinierte Zeichenfolgen eingegeben werden.A "recently used names" chooser lets the user enter custom strings. Die Liste RecentlyUsedNames enthält einige Werte, die der Benutzer auswählen kann. Er kann jedoch auch einen neuen benutzerdefinierten Wert eingeben.The 'RecentlyUsedNames' list contains some values that the user can choose from, but the user can also add a new, custom value. Die CurrentName-Eigenschaft gibt den aktuell eingegebenen Namen an.The 'CurrentName' property represents the currently entered name.

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

Übermittelter TextText submitted

Das Ereignis TextSubmitted kann so verarbeitet werden, dass es mit dem vom Benutzer eingegebenen Wert verwendet wird.You can handle the TextSubmitted event to work with the value entered by the user. Im Ereignishandler überprüfen Sie normalerweise, ob der vom Benutzer eingegebene Wert gültig ist, und verwenden dann den Wert in der App.In the event handler, you will typically validate that the value entered by the user is valid, then use the value in your app. Je nach Fall kannst du den Wert auch zur späteren Verwendung der Liste mit Optionen des Kombinationsfelds hinzufügen.Depending on the situation, you might also add the value to the combo box's list of options for future use.

Das Ereignis TextSubmitted tritt ein, wenn folgende Bedingungen erfüllt sind:The TextSubmitted event occurs when these conditions are met:

  • Die IsEditable-Eigenschaft ist auf true festgelegt.The IsEditable property is true
  • Der Benutzer gibt Text ein, der mit keinem vorhandenen Eintrag in der Liste des Kombinationsfelds übereinstimmt.The user enters text that does not match an existing entry in the combo box list
  • Der Benutzer drückt die EINGABETASTE oder verschiebt den Fokus weg vom Kombinationsfeld.The user presses Enter, or moves focus from the combo box.

Das Ereignis TextSubmitted tritt nicht ein, wenn der Benutzer Text eingibt und dann in der Liste nach oben oder nach unten navigiert.The TextSubmitted event does not occur if the user enters text and then navigates up or down through the list.

Beispiel: Überprüfen der Eingabe und lokale VerwendungSample - Validate input and use locally

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.In this example, a font size chooser contains a set of values corresponding to the font size ramp, but the user may enter font sizes that are not in the list.

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.When the user adds a value that's not in the list, the font size updates, but the value is not added to the list of font sizes.

Wenn der neu eingegebene Wert ungültig ist, verwenden Sie SelectedValue, um die Text-Eigenschaft auf den letzten bekannten gültigen Wert zurückzusetzen.If the newly entered value is not valid, you use the SelectedValue to revert the Text property to the last known good value.

<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 ListeSample - Validate input and add to list

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.Here, a "favorite color chooser" contains the most common favorite colors (Red, Blue, Green, Orange), but the user may enter a favorite color that's not in the list. 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.When the user adds a valid color (like Pink), the newly entered color is added to the list and set as the active "favorite color".

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

Empfohlene und nicht empfohlene VorgehensweisenDo's and don'ts

  • Schränken Sie den Textinhalt von Kombinationsfeldelementen auf eine einzelne Zeile ein.Limit the text content of combo box items to a single line.
  • Sortieren Sie die Elemente in einem Kombinationsfeld in der logischsten Reihenfolge.Sort items in a combo box in the most logical order. Gruppieren Sie verwandte Optionen, und platzieren Sie die am häufigsten verwendeten Optionen oben in der Liste.Group together related options and place the most common options at the top. Sortieren Sie Namen in alphabetischer Reihenfolge, Nummern in numerischer Reihenfolge und Datumsangaben in chronologischer Reihenfolge.Sort names in alphabetical order, numbers in numerical order, and dates in chronological order.

ListenfelderList boxes

In einem Listenfeld kann der Benutzer ein einzelnes Element oder mehrere Elemente aus einer Auflistung auswählen.A list box allows the user to choose either a single item or multiple items from a collection. Listenfelder ähneln Dropdownlisten, abgesehen davon, dass Listenfelder immer geöffnet sind; für ein Listenfeld gibt es keinen kompakten Zustand (nicht erweitert).List boxes are similar to drop-down lists, except that list boxes are always open—there is no compact (non-expanded) state for a list box. Elemente in einem Listenfeld können gescrollt werden, wenn der Platz nicht ausreicht, um alle Elemente anzuzeigen.Items in the list can be scrolled if there isn't space to show everything.

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

  • 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.A list box can be useful when items in the list are important enough to prominently display, and when there's enough screen real estate, to show the full list.
  • Ein Listenfeld sollte den Benutzer bei einer wichtigen Entscheidung bzw. Auswahl auf alle Alternativen aufmerksam machen.A list box should draw the user's attention to the full set of alternatives in an important choice. Im Gegensatz dazu lenkt eine Dropdownliste die Aufmerksamkeit des Benutzers zunächst auf das ausgewählte Element.By contrast, a drop-down list initially draws the user's attention to the selected item.
  • Vermeiden Sie die Verwendung eines Listenfelds in folgenden Fällen:Avoid using a list box if:
    • Es gibt eine sehr kleine Anzahl von Elementen für die Liste.There is a very small number of items for the list. Ein Einzelauswahl-Listenfeld, das immer zwei identische Optionen enthält, sollte besser in Form von Optionsfeldern dargestellt werden.A single-select list box that always has the same 2 options might be better presented as radio buttons. Ziehen Sie die Verwendung von Optionsfeldern ebenfalls in Erwägung, wenn die Liste drei oder vier statische Elemente enthält.Also consider using radio buttons when there are 3 or 4 static items in the list.
    • Das Listenfeld ist eine Einzelauswahl und enthält immer die gleichen zwei Optionen, wobei eine als „nicht die andere Option“ impliziert werden kann (beispielsweise „Ein“ und „Aus“).The list box is single-select and it always has the same 2 options where one can be implied as not the other, such as "on" and "off." Verwenden Sie ein einzelnes Kontrollkästchen oder einen Umschalter.Use a single check box or a toggle switch.
    • Die Anzahl von Elementen ist sehr hoch.There is a very large number of items. Bessere Optionen für lange Listen sind Rasteransicht und Listenansicht.A better choice for long lists are grid view and list view. Für sehr lange Listen mit gruppierten Daten wir der semantische Zoom bevorzugt.For very long lists of grouped data, semantic zoom is preferred.
    • Bei den Elementen handelt es sich um zusammenhängende numerische Werte.The items are contiguous numerical values. Wenn dies der Fall ist, sollten Sie einen Schieberegler in Erwägung ziehen.If that's the case, consider using a slider.
    • 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.The selection items are of secondary importance in the flow of your app or the default option is recommended for most users in most situations. Verwenden Sie stattdessen eine Dropdownliste.Use a drop-down list instead.

EmpfehlungenRecommendations

  • Der ideale Bereich von Elementen in einem Listenfeld beträgt 3 bis 9.The ideal range of items in a list box is 3 to 9.
  • Ein Listenfeld funktioniert gut, wenn die Elemente darin dynamisch variieren können.A list box works well when its items can dynamically vary.
  • 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.If possible, set the size of a list box so that its list of items don't need to be panned or scrolled.
  • Stellen Sie sicher, dass der Zweck des Listenfelds und die momentan ausgewählten Elemente klar sind.Verify that the purpose of the list box, and which items are currently selected, is clear.
  • Reservieren Sie visuelle Effekte und Animationen für das Feedback für die Fingereingabe und für den ausgewählten Zustand von Elementen.Reserve visual effects and animations for touch feedback, and for the selected state of items.
  • Beschränken Sie den Text von Listenfeldelementen auf eine einzelne Zeile.Limit the list box item's text content to a single line. Wenn es sich bei den Elementen um visuelle Objekte handelt, können Sie die Größe anpassen.If the items are visuals, you can customize the size. Wenn ein Element mehrere Textzeilen oder Bilder enthält, verwenden Sie stattdessen eine Raster- oder Listenansicht.If an item contains multiple lines of text or images, instead use a grid view or list view.
  • Verwenden Sie die standardmäßige Schriftart, sofern Sie gemäß Ihren Markenrichtlinien keine andere verwenden müssen.Use the default font unless your brand guidelines indicate to use another.
  • Verwenden Sie ein Listenfeld nicht zum Ausführen von Befehlen oder zum dynamischen Anzeigen oder Ausblenden anderer Steuerelemente.Don't use a list box to perform commands or to dynamically show or hide other controls.

Beispielcode herunterladenGet the sample code