Chip

<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.ChipVorfuehrung"
            Spacing="8">
  <TextBlock Text="Filter (Mehrfachwahl)" FontWeight="SemiBold" />
  <ChipGroup x:Name="Filter" ItemsSource="{x:Static local:ChipSeite.Filter}" SelectionMode="Multiple" SelectionChanged="Filter_SelectionChanged" />
  <TextBlock Text="Grösse (Einzelwahl mit Pflicht)" FontWeight="SemiBold" />
  <ChipGroup x:Name="Groesse" ItemsSource="{x:Static local:ChipSeite.Groessen}" IsSelectionRequired="True" SelectedIndex="1"
             SelectionChanged="Groesse_SelectionChanged" />
  <TextBlock Text="Empfänger" FontWeight="SemiBold" />
  <WrapPanel>
    <Chip Content="Anna" IsCloseIconVisible="True" Margin="0,0,8,8" CloseIconClick="Empfaenger_CloseIconClick" />
    <Chip Content="Ben" IsCloseIconVisible="True" Margin="0,0,8,8" CloseIconClick="Empfaenger_CloseIconClick" />
    <Chip Content="Cleo" IsCloseIconVisible="True" Margin="0,0,8,8" CloseIconClick="Empfaenger_CloseIconClick" />
  </WrapPanel>
  <TextBlock Text="Themen in einer Zeile" FontWeight="SemiBold" />
  <ChipGroup x:Name="Themen" Width="300" HorizontalAlignment="Left" ItemsSource="{x:Static local:ChipSeite.Themen}" IsSingleLine="True"
             SelectionChanged="Themen_SelectionChanged" />
  <TextBlock x:Name="Meldung" Text="Bereit." />
</StackPanel>

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

namespace Kuonen.UI.Galerie.Seiten;

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

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

    private void Filter_SelectionChanged(object sender, SelectionChangedEventArgs e) => Meldung.Text = ChipSeite.Gewaehlt("Filter", Filter);

    private void Groesse_SelectionChanged(object sender, SelectionChangedEventArgs e) => Meldung.Text = ChipSeite.Gewaehlt("Grösse", Groesse);

    private void Themen_SelectionChanged(object sender, SelectionChangedEventArgs e) => Meldung.Text = ChipSeite.Gewaehlt("Thema", Themen);

    private void Empfaenger_CloseIconClick(object? sender, RoutedEventArgs e) => Meldung.Text = ChipSeite.Entferne(sender);
}

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="Chip"/> und <see cref="ChipGroup"/>.</summary>
public sealed partial class ChipSeite : GalerieSeite
{
    public override string Titel => "Chip";

    public override string Beschreibung =>
        "Chips nach Material: Filter mit Mehrfachwahl, eine Grösse als Einzelwahl mit Pflicht (der letzte gewählte bleibt), Empfänger als Eingabe-Chips mit "
        + "Schliesssymbol (Klick, Entf oder Rücktaste entfernt) und zwölf Themen in einer Zeile mit Bildlauf.";

    public override string Stichworte => "Chip Filter Etikett Tag Marke Auswahl Entfernen ChipGroup IsCheckable IsCloseIconVisible CloseIconClick IsSelectionRequired IsSingleLine";

    public override string Datei => nameof(ChipSeite);

    /// <summary>Die Einträge der Seite (im KXAML über x:Static).</summary>
    public static readonly string[] Filter = ["Bio", "Regional", "Saisonal", "Vegan"];

    public static readonly string[] Groessen = ["Klein", "Mittel", "Gross"];

    public static readonly string[] Empfaenger = ["Anna", "Ben", "Cleo"];

    public static readonly string[] Themen = BaueThemen();

    private static string[] BaueThemen()
    {
        var themen = new string[12];
        for (int i = 0; i < themen.Length; i++) themen[i] = $"Thema {i + 1}";
        return themen;
    }

    internal static string Gewaehlt(string was, ChipGroup gruppe) =>
        gruppe.SelectedItems.Count == 0 ? $"{was}: keine" : $"{was}: {string.Join(", ", gruppe.SelectedItems)}";

    // Ein Eingabe-Chip entfernt sich aus seinem Panel.
    internal static string Entferne(object? sender)
    {
        if (sender is not Chip { VisualParent: Panel panel } chip) return "";
        panel.Children.Remove(chip);
        return $"Entfernt: {chip.Content}";
    }

    public override UIElement Baue()
    {
        var meldung = new TextBlock { Text = "Bereit." };
        var filter = new ChipGroup { ItemsSource = Filter, SelectionMode = SelectionMode.Multiple };
        filter.SelectionChanged += (_, _) => meldung.Text = Gewaehlt("Filter", filter);
        var groesse = new ChipGroup { ItemsSource = Groessen, IsSelectionRequired = true, SelectedIndex = 1 };
        groesse.SelectionChanged += (_, _) => meldung.Text = Gewaehlt("Grösse", groesse);
        var empfaenger = new WrapPanel();
        foreach (var name in Empfaenger)
        {
            var chip = new Chip { Content = name, IsCloseIconVisible = true, Margin = new Thickness(0, 0, 8, 8) };
            chip.CloseIconClick += (s, _) => meldung.Text = Entferne(s);
            empfaenger.Children.Add(chip);
        }
        var themen = new ChipGroup { Width = 300, HorizontalAlignment = HorizontalAlignment.Left, ItemsSource = Themen, IsSingleLine = true };
        themen.SelectionChanged += (_, _) => meldung.Text = Gewaehlt("Thema", themen);
        return new StackPanel
        {
            Spacing = 8,
            Children =
            {
                new TextBlock { Text = "Filter (Mehrfachwahl)", FontWeight = 600 },
                filter,
                new TextBlock { Text = "Grösse (Einzelwahl mit Pflicht)", FontWeight = 600 },
                groesse,
                new TextBlock { Text = "Empfänger", FontWeight = 600 },
                empfaenger,
                new TextBlock { Text = "Themen in einer Zeile", FontWeight = 600 },
                themen,
                meldung,
            },
        };
    }
}