SearchBox

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            xmlns:local="using:Kuonen.UI.Galerie.Seiten"
            x:Class="Kuonen.UI.Galerie.Seiten.SearchBoxVorfuehrung"
            Spacing="8">
  <TextBlock Text="Suche in 10 000 Orten" FontWeight="SemiBold" />
  <SearchBox x:Name="Suche" Width="260" HorizontalAlignment="Left" SearchChanged="Suche_SearchChanged" SearchCleared="Suche_SearchCleared" QuerySubmitted="Gesendet" />
  <TextBlock Text="Mit Vorschlägen" FontWeight="SemiBold" />
  <SearchBox x:Name="Orte" Width="260" HorizontalAlignment="Left" ItemsSource="{x:Static local:AutoCompleteBoxVorfuehrung.Orte}" PlaceholderText="Ort suchen"
             QuerySubmitted="Gesendet" />
  <TextBlock x:Name="Meldung" Text="Bereit." />
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Controls;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class SearchBoxSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new SearchBoxVorfuehrung();
}

/// <summary>KXAML-Fassung der SearchBox-Seite: der Baum steht in SearchBoxSeite.kxaml, hier das Verhalten.</summary>
public sealed partial class SearchBoxVorfuehrung
{
    public SearchBoxVorfuehrung() => InitializeComponent();

    private void Suche_SearchChanged(object? sender, EventArgs e) => Meldung.Text = SearchBoxSeite.Gesucht(Suche);

    private void Suche_SearchCleared(object? sender, EventArgs e) => Meldung.Text = "Geleert.";

    private void Gesendet(object? sender, SearchBoxQuerySubmittedEventArgs e) => Meldung.Text = SearchBoxSeite.Gesendet(e);
}

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="SearchBox"/>.</summary>
public sealed partial class SearchBoxSeite : GalerieSeite
{
    public override string Titel => "SearchBox";

    public override string Beschreibung =>
        "Ein Suchfeld mit Symbol und Löschknopf: die Suche läuft 150 ms nach der letzten Taste (SearchChanged), Eingabe sendet die Anfrage (QuerySubmitted), "
        + "Esc leert das Feld. Mit einer Quelle schlägt es wie die AutoCompleteBox Orte vor; Eingabe auf einem Vorschlag sendet ihn mit.";

    public override string Stichworte => "Suche Suchfeld Filter Löschknopf Vorschläge SearchBox AutoSuggestBox SearchEntry QuerySubmitted SearchChanged SearchDelay";

    public override string Datei => nameof(SearchBoxSeite);

    // Wie viele der 10 000 Orte den Suchtext enthalten (die Suche der Vorführung).
    internal static int Zaehle(string suche)
    {
        if (suche.Length == 0) return 0;
        int n = 0;
        foreach (var ort in AutoCompleteBoxVorfuehrung.Orte)
            if (ort.Contains(suche, StringComparison.OrdinalIgnoreCase)) n++;
        return n;
    }

    internal static string Gesucht(SearchBox box) => box.Text.Length == 0 ? "Geleert." : $"Gesucht: „{box.Text}“, {Zaehle(box.Text)} Orte";

    internal static string Gesendet(SearchBoxQuerySubmittedEventArgs e) =>
        e.ChosenSuggestion is { } v ? $"Gesendet: „{e.QueryText}“ (Vorschlag {v})" : $"Gesendet: „{e.QueryText}“";

    public override UIElement Baue()
    {
        var meldung = new TextBlock { Text = "Bereit." };
        var suche = new SearchBox { Width = 260, HorizontalAlignment = HorizontalAlignment.Left };
        suche.SearchChanged += (_, _) => meldung.Text = Gesucht(suche);
        suche.SearchCleared += (_, _) => meldung.Text = "Geleert.";
        suche.QuerySubmitted += (_, e) => meldung.Text = Gesendet(e);
        var orte = new SearchBox { Width = 260, HorizontalAlignment = HorizontalAlignment.Left, ItemsSource = AutoCompleteBoxVorfuehrung.Orte, PlaceholderText = "Ort suchen" };
        orte.QuerySubmitted += (_, e) => meldung.Text = Gesendet(e);
        return new StackPanel
        {
            Spacing = 8,
            Children =
            {
                new TextBlock { Text = "Suche in 10 000 Orten", FontWeight = 600 },
                suche,
                new TextBlock { Text = "Mit Vorschlägen", FontWeight = 600 },
                orte,
                meldung,
            },
        };
    }
}