Megosztás a következőn keresztül:

Automatikus javaslati mező

Az AutoSuggestBox használatával adja meg a felhasználónak a beíráskor kiválasztandó javaslatok listáját.

Automatikus javaslatmező

Ez a megfelelő vezérlő?

Ha egy egyszerű, testre szabható vezérlőt szeretne, amely lehetővé teszi a szöveges keresést a javaslatok listájával, akkor válasszon egy automatikus javaslatmezőt.

A megfelelő szövegvezérlő kiválasztásáról további információt a Szövegvezérlők című cikkben talál.

Anatómia

Az automatikus javaslati mező belépési pontja egy választható fejlécből és egy szövegdobozból áll, amely nem kötelező tippszöveggel rendelkezik:

Példa az automatikus javaslat-vezérlési belépési pontjára

Az automatikus javaslat eredménylistája automatikusan feltöltődik, amint a felhasználó elkezd szöveget írni. A találatok listája a szövegbeviteli mező felett vagy alatt jelenhet meg. Megjelenik egy "Az összes törlése" gomb:

Példa a kibővített automatikus javaslat vezérlőre

Ajánlások

  • Ha az automatikus javaslatmezőt használja a keresések végrehajtására, és a megadott szöveg nem tartalmaz keresési eredményeket, megjelenít egy egysoros "Nincs találat" üzenetet, hogy a felhasználók tudják, hogy a keresési kérés végrehajtva van:

    Példa egy automatikus javaslatmezőre keresési eredmények nélkül

Automatikus javaslati mező létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg az AutoSuggestBox működés közbeni

A WinUI 3 Gallery alkalmazás interaktív példákat tartalmaz a legtöbb WinUI 3 vezérlőre, funkcióra és szolgáltatásra. Az alkalmazás letöltése a Microsoft Store-ból , vagy a forráskód letöltése a GitHubon

Az AutoSuggestBox használatához 3 felhasználói műveletre kell válaszolnia.

  • Szöveg megváltozott – Amikor a felhasználó szöveget ír be, frissítse a javaslatlistát.
  • Kiválasztott javaslat – Ha a felhasználó javaslatot választ a javaslatlistában, frissítse a szövegmezőt.
  • Elküldött lekérdezés – Amikor a felhasználó elküld egy lekérdezést, a lekérdezés eredményeinek megjelenítése.

Szöveg módosult

A TextChanged esemény akkor következik be, amikor a szövegdoboz tartalma frissül. Az event args Reason tulajdonság használatával állapítsa meg, hogy a módosítás a felhasználói bemenet miatt történt-e. Ha a változás oka UserInput, szűrje az adatokat a bemenet alapján. Ezután állítsa be a szűrt adatokat az AutoSuggestBox ItemsSource -ként, hogy frissítse a javaslatlistát.

A javaslatok listájában megjelenő elemek megjelenítésének szabályozásához használhatja DisplayMemberPath vagy ItemTemplate.

  • Az adatelem egyetlen tulajdonságának szövegének megjelenítéséhez állítsa be a DisplayMemberPath tulajdonságot, hogy válassza ki, melyik tulajdonság jelenjen meg az objektumból a javaslatlistában.
  • A lista egyes elemeinek egyéni megjelenésének meghatározásához használja az ItemTemplate tulajdonságot.

Javasolt javaslat

Amikor egy felhasználó a billentyűzettel navigál a javaslati listán, frissítenie kell a szövegmező szövegét, hogy megfeleljen azoknak.

A TextMemberPath tulajdonság beállításával kiválaszthatja, hogy melyik tulajdonság jelenjen meg az adatobjektumból a szövegmezőben. Ha TextMemberPath értéket ad meg, a szövegmező automatikusan frissül. Általában ugyanazt az értéket kell megadnia a DisplayMemberPath és a TextMemberPath esetében, így a szöveg megegyezik a javaslatlistában és a szövegmezőben.

Ha egy egyszerű tulajdonságnál többre van szüksége, kezelje a SuggestionChosen eseményt, hogy a szövegdobozt a kijelölt elem alapján egyéni szöveggel töltse fel.

Elküldött lekérdezés

A QuerySubmitted esemény kezelése az alkalmazásnak megfelelő lekérdezési művelet végrehajtásához, és az eredmény megjelenítése a felhasználó számára.

A QuerySubmitted esemény akkor következik be, ha egy felhasználó véglegesíti a lekérdezési sztringet. A felhasználó az alábbi módokon véglegesítheti a lekérdezést:

  • Amíg a fókusz a szövegmezőben van, nyomja le az Enter billentyűt, vagy kattintson a lekérdezés ikonra. A(z) esemény argumentumok ChosenSuggestion tulajdonsága nullértékű.
  • Amíg a fókusz a javaslatlistában van, nyomja le az Enter billentyűt, kattintson vagy koppintson egy elemre. Az esemény args SelectednSuggestion tulajdonsága a listából kiválasztott elemet tartalmazza.

Minden esetben az esemény QueryText tulajdonsága tartalmazza a szövegdoboz szövegét.

Íme egy egyszerű AutoSuggestBox a szükséges eseménykezelőkkel.

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

Az AutoSuggestBox használatával adja meg a felhasználónak a beíráskor kiválasztandó javaslatok listáját.

A szövegbeviteli mező alapértelmezés szerint nem jelenik meg lekérdezésgombbal. A QueryIcon tulajdonságot úgy állíthatja be, hogy a szövegdoboz jobb oldalán a megadott ikonnal rendelkező gombot adjon hozzá. Ha például azt szeretné, hogy az AutoSuggestBox egy tipikus keresőmezőnek tűnjön, adjon hozzá egy ilyen "keresés" ikont.

<AutoSuggestBox QueryIcon="Find"/>

Íme egy "find" ikont tartalmazó AutoSuggestBox.

Példa az automatikus javaslat vezérlőre egy keresés ikonnal.

UWP és WinUI 2

Fontos

A cikkben szereplő információk és példák a Windows App SDK és a WinUI 3 használó alkalmazásokra vannak optimalizálva, de általánosan alkalmazhatók a WinUI 2 használó UWP-alkalmazásokra. A platformspecifikus információkért és példákért tekintse meg az UWP API-referenciát.

Ez a szakasz az UWP- vagy WinUI 2-alkalmazások vezérlőjének használatához szükséges információkat tartalmazza.

A vezérlő API-k a Windows.UI.Xaml.Controls névtérben találhatók.

Javasoljuk, hogy a legújabb WinUI 2 használatával szerezze be a legújabb stílusokat és sablonokat az összes vezérlőhöz. A WinUI 2.2 vagy újabb verziója egy új sablont tartalmaz ehhez a vezérlőhöz, amely lekerekített sarkokat használ. További információ: Sarok sugara.