Vak Automatisch voorstellen

Gebruik een AutoSuggestBox om een lijst met suggesties te geven waaruit een gebruiker kan kiezen terwijl ze typen.

Is dit de juiste controle?

Als u een eenvoudig, aanpasbaar besturingselement wilt waarmee tekst kan worden gezocht met een lijst met suggesties, kiest u een vak voor automatisch voorstellen.

Zie het artikel Tekstbesturingselementen voor meer informatie over het kiezen van het juiste tekstbesturingselement.

Anatomie

Het invoerpunt voor het vak voor automatisch voorstellen bestaat uit een optionele koptekst en een tekstvak met optionele hinttekst:

De lijst met automatisch suggesties voor resultaten wordt automatisch ingevuld zodra de gebruiker tekst begint in te voeren. De lijst met resultaten kan boven of onder het tekstvak worden weergegeven. Er wordt een knop Alles wissen weergegeven:

Aanbevelingen

• Wanneer u het vak voor automatisch voorstellen gebruikt om zoekopdrachten uit te voeren en er geen zoekresultaten voor de ingevoerde tekst bestaan, geeft u een bericht met één regel 'Geen resultaten' weer als resultaat, zodat gebruikers hun zoekaanvraag hebben uitgevoerd:

  

Een suggestievak maken

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

Als u een AutoSuggestBox wilt gebruiken, moet u reageren op drie gebruikersacties.

• Tekst gewijzigd: wanneer de gebruiker tekst invoert, werkt u de lijst met suggesties bij.
• Suggestie gekozen: wanneer de gebruiker een suggestie in de lijst met suggesties kiest, werkt u het tekstvak bij.
• Query verzonden: wanneer de gebruiker een query verzendt, geeft u de queryresultaten weer.

Tekst gewijzigd

De gebeurtenis TextChanged vindt plaats wanneer de inhoud van het tekstvak wordt bijgewerkt. Gebruik de gebeurtenis args Reason eigenschap om te bepalen of de wijziging te wijten was aan gebruikersinvoer. Als de wijzigingsreden is UserInput, filtert u uw gegevens op basis van de invoer. Stel vervolgens de gefilterde gegevens in als de ItemsSource van het AutoSuggestBox om de lijst met suggesties bij te werken.

Als u wilt bepalen hoe items worden weergegeven in de lijst met suggesties, kunt u DisplayMemberPath- of ItemTemplategebruiken.

• Als u de tekst van één eigenschap van uw gegevensitem wilt weergeven, stelt u de eigenschap DisplayMemberPath in om te kiezen welke eigenschap van uw object moet worden weergegeven in de lijst met suggesties.
• Als u een aangepast uiterlijk wilt definiëren voor elk item in de lijst, gebruikt u de eigenschap ItemTemplate.

Suggestie gekozen

Wanneer een gebruiker door de lijst met suggesties navigeert met behulp van het toetsenbord, moet u de tekst in het tekstvak bijwerken zodat deze overeenkomt.

U kunt de eigenschap TextMemberPath instellen om te kiezen welke eigenschap van uw gegevensobject moet worden weergegeven in het tekstvak. Als u een TextMemberPath opgeeft, wordt het tekstvak automatisch bijgewerkt. Normaal gesproken moet u dezelfde waarde opgeven voor DisplayMemberPath en TextMemberPath, zodat de tekst hetzelfde is in de lijst met suggesties en het tekstvak.

Als u meer dan een eenvoudige eigenschap wilt weergeven, verwerkt u de gebeurtenis SuggestionChosen om het tekstvak te vullen met aangepaste tekst op basis van het geselecteerde item.

Query verzonden

De gebeurtenis QuerySubmitted verwerken om een queryactie uit te voeren die geschikt is voor uw app en het resultaat voor de gebruiker weer te geven.

De gebeurtenis QuerySubmitted vindt plaats wanneer een gebruiker een queryreeks doorvoert. De gebruiker kan een query op een van de volgende manieren doorvoeren:

• Terwijl de focus zich in het tekstvak bevindt, drukt u op Enter of klikt u op het querypictogram. De gebeurtenis args ChosenSuggestion eigenschap is null.
• Terwijl de focus zich in de lijst met suggesties bevindt, drukt u op Enter, klikt of tikt u op een item. De gebeurtenis args ChosenSuggestion eigenschap bevat het item dat is geselecteerd in de lijst.

In alle gevallen bevat de eigenschap QueryText van de gebeurtenisargumenten de tekst uit het tekstvak.

Hier volgt een eenvoudige AutoSuggestBox met de vereiste gebeurtenis-handlers.

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
                TextChanged="AutoSuggestBox_TextChanged"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // Only get results when it was a user typing,
    // otherwise assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen.
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        //Set the ItemsSource to be your filtered dataset
        //sender.ItemsSource = dataset;
    }
}


private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    // Set sender.Text. You can use args.SelectedItem to build your text string.
}


private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
        // User selected an item from the suggestion list, take an action on it here.
    }
    else
    {
        // Use args.QueryText to determine what to do.
    }
}

AutoSuggestBox gebruiken voor zoeken

Gebruik een AutoSuggestBox om een lijst met suggesties te geven waaruit een gebruiker kan kiezen terwijl ze typen.

Standaard wordt in het tekstvak geen queryknop weergegeven. U kunt de eigenschap QueryIcon instellen om een knop toe te voegen met het opgegeven pictogram aan de rechterkant van het tekstvak. Als u bijvoorbeeld wilt dat de AutoSuggestBox eruitziet als een typisch zoekvak, voegt u een 'zoek' pictogram toe, zoals dit.

<AutoSuggestBox QueryIcon="Find"/>

Hier ziet u een AutoSuggestBox met een 'find'-pictogram.

UWP en WinUI 2

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

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie hoekstraalvoor meer informatie.

Verwante artikelen

• tekstbesturingselementen
• spellingcontrole
• Textvak-klasse
• PasswordBox-klasse voor Windows.UI.Xaml.Controls
• String.Length-eigenschap