Keuzelijst met invoerfunctie en lijstvak

Gebruik een keuzelijst met invoervak (ook wel vervolgkeuzelijst genoemd) om een lijst weer te geven met items waaruit een gebruiker kan kiezen. Een keuzelijst met invoervak begint in een compacte status en wordt uitgebreid om een lijst met selecteerbare items weer te geven. Een keuzelijst is vergelijkbaar met een keuzelijst met invoervak, maar is niet samenvouwbaar/heeft geen compacte status. Aan het einde van dit artikel vindt u meer informatie over keuzelijsten.

Wanneer de keuzelijst is gesloten, wordt de huidige selectie weergegeven of is de lijst leeg als er geen geselecteerd item is. Wanneer de gebruiker de keuzelijst met invoervak uitvouwt, wordt de lijst met selecteerbare items weergegeven.

Is dit de juiste controle?

• Gebruik een vervolgkeuzelijst om gebruikers één waarde te laten selecteren uit een set items die adequaat kunnen worden weergegeven met één regel tekst.
• Gebruik een lijst- of rasterweergave in plaats van een keuzelijst met invoervak om items weer te geven die meerdere regels tekst of afbeeldingen bevatten.
• Als er minder dan vijf elementen zijn, kunt u overwegen keuzerondjes te gebruiken (als er slechts één optie kan worden geselecteerd) of selectievakjes (als er meerdere opties kunnen worden geselecteerd).
• Gebruik een keuzelijst wanneer de selectie-items van secundair belang zijn in het verloop van uw app. Als de standaardoptie wordt aanbevolen voor de meeste gebruikers in de meeste situaties, kan het weergeven van alle items met behulp van een lijstweergave meer aandacht vestigen op de opties dan nodig is. U kunt ruimte besparen en afleiding minimaliseren met behulp van een keuzelijst.

Voorbeelden

Een keuzelijst met invoervak in compacte staat kan een titel weergeven.

Hoewel comboboxen uitbreiden om langere tekenreekslengten te ondersteunen, vermijd overmatig lange tekenreeksen die moeilijk te lezen zijn.

Als de verzameling in een keuzelijst met invoervak lang genoeg is, wordt er een schuifbalk weergegeven om deze weer te geven. Groepeer items logisch in de lijst.

Aanbevelingen

• Beperk de tekstinhoud van keuzelijstitems tot één regel.
• Sorteer items in een combobox in de meest logische volgorde. Groepeer gerelateerde opties en plaats de meest voorkomende opties bovenaan. Sorteer namen in alfabetische volgorde, getallen in numerieke volgorde en datums in chronologische volgorde.

Keuzelijsten

Met een keuzelijst kan de gebruiker één item of meerdere items uit een verzameling kiezen. Keuzelijsten zijn vergelijkbaar met vervolgkeuzelijsten, behalve dat keuzelijsten altijd zijn geopend. Er is geen compacte (niet-uitgevouwen) status voor een keuzelijst. Items in de lijst kunnen worden geschoven als er geen ruimte is om alles weer te geven.

Is een keuzelijst het juiste besturingselement?

• Een keuzelijst kan handig zijn wanneer items in de lijst belangrijk genoeg zijn om prominent weer te geven en wanneer er voldoende schermeigenschappen zijn om de volledige lijst weer te geven.
• Een keuzelijst moet de aandacht van de gebruiker vestigen op de volledige set alternatieven in een belangrijke keuze. Een vervolgkeuzelijst trekt daarentegen de aandacht van de gebruiker naar het geselecteerde item.
• Vermijd het gebruik van een keuzelijst als:
  • Er is een zeer klein aantal items op de lijst. Een keuzelijst die altijd dezelfde 2 opties heeft, kan beter worden weergegeven als radioknoppen. Overweeg ook radioknoppen te gebruiken wanneer er 3 of 4 statische items in de lijst staan.
  • Het lijstvak is enkelvoudig selecteerbaar en heeft altijd dezelfde 2 opties, waarbij één optie kan worden beschouwd als het tegenovergestelde van de ander, zoals 'aan' en 'uit'. Gebruik een enkel selectievakje of een wisselknop.
  • Er is een zeer groot aantal items. Een betere keuze voor lange lijsten zijn rasterweergave en lijstweergave. Voor zeer lange lijsten met gegroepeerde gegevens heeft semantische zoom de voorkeur.
  • De items zijn aaneengesloten numerieke waarden. Als dat het geval is, kunt u overwegen een schuifregelaar te gebruiken.
  • De selectie-items zijn van secundair belang in de stroom van uw app of de standaardoptie wordt aanbevolen voor de meeste gebruikers in de meeste situaties. Gebruik in plaats daarvan een vervolgkeuzelijst.

Aanbevelingen voor keuzelijsten

• Het ideale bereik van items in een keuzelijst is 3 tot 9.
• Een keuzelijst werkt goed wanneer de items dynamisch kunnen variëren.
• Stel indien mogelijk de grootte van een keuzelijst in, zodat de lijst met items niet hoeft te worden geschoven of gescrold.
• Controleer of het doel van de keuzelijst en welke items momenteel zijn geselecteerd, duidelijk is.
• Reserveer visuele effecten en animaties voor aanraakfeedback en voor de geselecteerde status van items.
• Beperk de tekstinhoud van het keuzelijstitem tot één regel. Als de items visuals zijn, kunt u de grootte aanpassen. Als een item meerdere regels tekst of afbeeldingen bevat, gebruikt u in plaats daarvan een rasterweergave of lijstweergave.
• Gebruik het standaardlettertype, tenzij uw merkrichtlijnen aangeven dat u een ander lettertype wilt gebruiken.
• Gebruik geen keuzelijst om opdrachten uit te voeren of andere besturingselementen dynamisch weer te geven of te verbergen.

Een keuzelijst met invoervak maken

• nl-NL: Belangrijke API's: ComboBox-klasse, IsEditable-eigenschap, Teksteigenschap, TextSubmitted-evenement, ListBox-klasse

Open de WinUI 3 Gallery-app en bekijk de keuzelijst in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

U vult de keuzelijst met invoervak door objecten rechtstreeks toe te voegen aan de Items verzameling of door de eigenschap ItemsSource aan een gegevensbron te koppelen. Items die aan de ComboBox zijn toegevoegd, worden verpakt in ComboBoxItem containers.

Hier is een eenvoudige combobox met items die zijn toegevoegd 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>

In het volgende voorbeeld wordt gedemonstreerd hoe u een keuzelijst kunt koppelen aan een verzameling van FontFamily-objecten.

<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"));
};

Itemselectie

Net als ListView en GridView is ComboBox afgeleid van Selector, zodat u de selectie van de gebruiker op dezelfde standaard manier kunt krijgen.

U kunt het geselecteerde item van de keuzelijst ophalen of instellen met behulp van de eigenschap SelectedItem, en de index van het geselecteerde item ophalen of instellen met behulp van de eigenschap SelectedIndex.

Als u de waarde van een bepaalde eigenschap voor het geselecteerde gegevensitem wilt ophalen, kunt u de eigenschap SelectedValue gebruiken. In dit geval stelt u de SelectedValuePath- in om op te geven van welke eigenschap voor het geselecteerde item de waarde moet worden opgehaald.

Aanbeveling

Als u SelectedItem of SelectedIndex instelt om de standaardselectie aan te geven, treedt er een foutmelding op als de eigenschap wordt ingesteld voordat de Items-verzameling van de combo box is gevuld. Tenzij u uw items in XAML definieert, kunt u het beste de Loaded-gebeurtenis van de keuzelijstbox afhandelen en SelectedItem of SelectedIndex instellen in de Loaded-gebeurtenis-handler.

U kunt deze eigenschappen in XAML binden of de gebeurtenis SelectionChanged verwerken om te reageren op selectiewijzigingen.

In de gebeurtenis-handlercode kunt u het geselecteerde item ophalen uit de eigenschap SelectionChangedEventArgs.AddedItems. U kunt het eerder geselecteerde item (indien aanwezig) ophalen uit de eigenschap SelectionChangedEventArgs.RemovedItems. De verzamelingen AddedItems en RemovedItems bevatten elk slechts één item, omdat de keuzelijst met invoervak geen ondersteuning biedt voor meerdere selecties.

In dit voorbeeld ziet u hoe u de selectionChanged-gebeurtenis kunt afhandelen en hoe u ook verbinding maakt met het geselecteerde 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)
{
    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 en toetsenbordnavigatie

De gebeurtenis SelectionChanged treedt standaard op wanneer een gebruiker op een item in de lijst klikt, tikt of de Enter-toets indrukt om de selectie door te voeren en de combobox gesloten wordt. Selectie verandert niet wanneer de gebruiker de geopende keuzelijst navigeert met de pijltoetsen.

Maak een keuzelijst met invoervak die 'live wordt bijgewerkt' terwijl de gebruiker met de pijltoetsen door de geopende lijst navigeert, zoals bij het selecteren van lettertypen, door SelectionChangedTrigger in te stellen op Always. Hierdoor treedt de gebeurtenis SelectionChanged op wanneer de focus wordt gewijzigd in een ander item in de geopende lijst.

Gedrag van geselecteerd item wijzigen

In Windows 10, versie 1809 (SDK 17763) of hoger, wordt het gedrag van geselecteerde items bijgewerkt ter ondersteuning van bewerkbare keuzelijsten met invoervak.

Vóór SDK 17763 moest de waarde van de eigenschap SelectedItem (en daarom ook SelectedValue en SelectedIndex) in de Items-collectie van de keuzelijst staan. Met behulp van het vorige voorbeeld resulteert het instellen van colorComboBox.SelectedItem = "Pink" resultaten in:

• SelectedItem = null
• GeselecteerdeWaarde = null
• SelectedIndex = -1

In SDK 17763 en hoger hoeft de waarde van de eigenschap SelectedItem (en dus ook SelectedValue en SelectedIndex) niet in de Item-collectie van de keuzelijst met invoervak aanwezig te zijn. Met behulp van het vorige voorbeeld resulteert het instellen van colorComboBox.SelectedItem = "Pink" resultaten in:

• SelectedItem = Roze
• SelectedValue = Roze
• SelectedIndex = -1

Tekst zoeken

Keuzelijsten met invoervak ondersteunen automatisch zoeken binnen hun verzamelingen. Als gebruikers tekens op een fysiek toetsenbord typen terwijl ze zich richten op een geopende of gesloten keuzelijst, worden kandidaten die overeenkomen met de tekenreeks van de gebruiker weergegeven. Deze functionaliteit is vooral handig bij het navigeren in een lange lijst. Wanneer gebruikers bijvoorbeeld interactie hebben met een vervolgkeuzelijst met een lijst met statussen, kunnen gebruikers op de toets 'w' drukken om 'Washington' in beeld te brengen voor snelle selectie. De tekstzoekopdracht is niet hoofdlettergevoelig.

U kunt de eigenschap IsTextSearchEnabled instellen op onwaar om deze functionaliteit uit te schakelen.

Keuzelijst bewerkbaar maken

Met een keuzelijst met invoervak kan de gebruiker standaard kiezen uit een vooraf gedefinieerde lijst met opties. Er zijn echter gevallen waarin de lijst alleen een subset van geldige waarden bevat en de gebruiker andere waarden moet kunnen invoeren die niet worden vermeld. U kunt de keuzelijst bewerkbaar maken om dit te ondersteunen.

Als u een keuzelijst met invoervak wilt bewerken, stelt u de eigenschap IsEditable in op true. Verwerk vervolgens de TextSubmitted gebeurtenis om te werken met de waarde die door de gebruiker is ingevoerd.

De selectedItem-waarde wordt standaard bijgewerkt wanneer de gebruiker aangepaste tekst doorvoert. U kunt dit gedrag overschrijven door Handled in te stellen op true in de TextSubmitted-gebeurtenisargumenten. Wanneer de gebeurtenis is gemarkeerd als verwerkt, zal de keuzelijst met invoervak geen verdere actie ondernemen na de gebeurtenis en blijft de bewerkingsstatus behouden. SelectedItem wordt niet bijgewerkt.

In dit voorbeeld ziet u een eenvoudige bewerkbare combobox. De lijst bevat eenvoudige tekenreeksen en elke waarde die door de gebruiker wordt ingevoerd, wordt gebruikt zoals ingevoerd.

Een selector voor 'recent gebruikte namen' laat de gebruiker aangepaste tekenreeksen invoeren. De lijst RecentlyUsedNames bevat enkele waarden waaruit de gebruiker kan kiezen, maar de gebruiker kan ook een nieuwe, aangepaste waarde toevoegen. De eigenschap CurrentName vertegenwoordigt de momenteel ingevoerde naam.

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

Verzonden tekst

U kunt de gebeurtenis TextSubmitted afhandelen om te werken met de waarde die de gebruiker heeft ingevoerd. In de gebeurtenis-handler valideert u meestal dat de waarde die door de gebruiker is ingevoerd, geldig is en gebruikt u vervolgens de waarde in uw app. Afhankelijk van de situatie kunt u ook de waarde toevoegen aan de keuzelijst voor toekomstig gebruik.

De gebeurtenis TextSubmitted treedt op wanneer aan deze voorwaarden wordt voldaan:

• De eigenschap IsEditable is waar
• De gebruiker voert tekst in die niet overeenkomt met een bestaande invoer in de keuzelijst.
• De gebruiker drukt op Enter of verplaatst de focus vanuit de keuzelijst.

De gebeurtenis TextSubmitted vindt niet plaats als de gebruiker tekst invoert en vervolgens omhoog of omlaag door de lijst navigeert.

Voorbeeld: invoer valideren en lokaal gebruiken

In dit voorbeeld bevat een tekengroottekiezer een set waarden die overeenkomen met de tekengrootte, maar de gebruiker kan tekengrootten invoeren die niet in de lijst staan.

Wanneer de gebruiker een waarde toevoegt die niet in de lijst staat, wordt de tekengrootte bijgewerkt, maar wordt de waarde niet toegevoegd aan de lijst met tekengrootten.

Als de zojuist ingevoerde waarde ongeldig is, gebruikt u de SelectedValue om de eigenschap Tekst terug te zetten naar de laatst bekende goede waarde.

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

Voorbeeld: invoer valideren en toevoegen aan lijst

Hier bevat een 'favoriete kleurkiezer' de meest voorkomende favoriete kleuren (rood, blauw, groen, oranje), maar de gebruiker kan een favoriete kleur invoeren die niet in de lijst staat. Wanneer de gebruiker een geldige kleur toevoegt (zoals Roze), wordt de zojuist ingevoerde kleur toegevoegd aan de lijst en ingesteld als de actieve 'favoriete kleur'.

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

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

• UWP-API's:ComboBox-klasse, IsEditable-eigenschap, Text-eigenschap, TextSubmitted-gebeurtenis, ListBox-klasse
• Open de WinUI 2 Gallery-app en zie de ComboBox in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

Opmerking

Voor de eigenschap IsEditable is Windows 10 versie 1809 (SDK 17763) of hoger vereist.

WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

Verwante artikelen

• Besturingselementen voor tekst
• Richtlijnen voor spellingcontrole
• TextBox-klasse
• PasswordBox-klasse
• String.Length-eigenschap