BottomSheet und SideSheet

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.SheetVorfuehrung"
            Spacing="12">
  <!-- Das Innere (Einträge, Kopplungen, Ereignisse) baut SheetSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Knoepfe" Orientation="Horizontal" Spacing="8" />
  <Grid x:Name="Flaeche" Width="360" Height="280" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite BottomSheet und SideSheet: das Gerüst steht in SheetSeite.kxaml, das Innere füllt SheetSeite.Fuelle.</summary>
public sealed partial class SheetVorfuehrung
{
    public SheetVorfuehrung()
    {
        InitializeComponent();
        SheetSeite.Fuelle(Knoepfe, Flaeche);
    }
}

using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Eingabe;
using Kuonen.UI.Layout;
using Kuonen.UI.Media;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: BottomSheet und SideSheet (Plan 6f).</summary>
public sealed partial class SheetSeite : GalerieSeite
{
    public override string Titel => "BottomSheet und SideSheet";

    public override string Beschreibung =>
        "Blätter am Rand: unten mit Raststellen (eingeklappt, halb, ganz), zum Ziehen mit dem Finger und einem Griff für die Tastatur; seitlich als modales Blatt mit Schleier, das ein Klick daneben, Esc oder Zurück schliesst.";

    public override string Stichworte => "BottomSheet SideSheet Sheet Blatt Raststelle modal Schleier Ziehgriff BottomSheetBehavior";

    public override string Datei => nameof(SheetSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 12 };
        var knoepfe = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8 };
        var flaeche = new Grid { Width = 360, Height = 280 };
        Fuelle(knoepfe, flaeche);
        seite.Children.Add(knoepfe);
        seite.Children.Add(flaeche);
        return seite;
    }

    /// <summary>Inhalt, die beiden Blätter und die Knöpfe (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel knoepfe, Grid flaeche)
    {
        var zeilen = new StackPanel();
        for (int i = 1; i <= 12; i++) zeilen.Children.Add(new TextBlock { Text = $"Eintrag {i}", Margin = new Thickness(16, 6, 16, 6) });
        var unten = new BottomSheet { Content = zeilen, Zustand = SheetZustand.Eingeklappt, Background = new SolidColorBrush(Color.FromRgb(0xF7, 0xF2, 0xFA)) };
        var seitlich = new SideSheet { IsModal = true, BlattBreite = 220, Background = new SolidColorBrush(Color.FromRgb(0xFF, 0xFF, 0xFF)),
            Content = new TextBlock { Text = "Filter", Margin = new Thickness(16) } };
        flaeche.Children.Add(new Border { Background = new SolidColorBrush(Color.FromRgb(0xE0, 0xE0, 0xE0)), Child = new TextBlock { Text = "Karte", Margin = new Thickness(16) } });
        flaeche.Children.Add(unten);
        flaeche.Children.Add(seitlich);
        foreach (var (text, zustand) in new[] { ("Eingeklappt", SheetZustand.Eingeklappt), ("Halb", SheetZustand.Halb), ("Ganz", SheetZustand.Ganz) })
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => unten.Zustand = zustand;
            knoepfe.Children.Add(k);
        }
        var filter = new Button { Content = "Filter" };
        filter.Click += (_, _) => seitlich.Zustand = SheetZustand.Ganz;
        knoepfe.Children.Add(filter);
    }
}