SplitView

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.SplitViewVorfuehrung"
            Spacing="12">
  <!-- Das Innere (Einträge, Kopplungen, Ereignisse) baut SplitViewSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <SplitView x:Name="Ansicht" DisplayMode="CompactOverlay" OpenPaneLength="200" Width="480" Height="200" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite SplitView: das Gerüst steht in SplitViewSeite.kxaml, das Innere füllt SplitViewSeite.Fuelle.</summary>
public sealed partial class SplitViewVorfuehrung
{
    public SplitViewVorfuehrung()
    {
        InitializeComponent();
        SplitViewSeite.Fuelle(Ansicht);
    }
}

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: SplitView (Plan 6f).</summary>
public sealed partial class SplitViewSeite : GalerieSeite
{
    public override string Titel => "SplitView";

    public override string Beschreibung =>
        "Ein Inhalt mit ausklappbarem Bereich in vier Modi (über dem Inhalt, daneben, je auch kompakt als schmale Leiste). Über dem Inhalt schliessen ein Klick daneben, Esc und Zurück; mit dem Finger öffnet ein Wischen vom Rand.";

    public override string Stichworte => "Drawer Bereich Pane Overlay Inline Kompakt Wischen SlidingPaneLayout DrawerLayout";

    public override string Datei => nameof(SplitViewSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 12 };
        var ansicht = new SplitView { DisplayMode = SplitViewDisplayMode.CompactOverlay, OpenPaneLength = 200, Width = 480, Height = 200 };
        Fuelle(ansicht);
        seite.Children.Add(ansicht);
        return seite;
    }

    /// <summary>Bereich, Inhalt und der Knopf zum Öffnen (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(SplitView ansicht)
    {
        var knopf = new Button { Content = "☰", Width = 40, Height = 40 };
        knopf.Click += (_, _) => ansicht.IsPaneOpen = !ansicht.IsPaneOpen;
        var bereich = new StackPanel { Children = { knopf, new TextBlock { Text = "Bereich", Margin = new Thickness(12) } } };
        ansicht.Pane = bereich;
        ansicht.PaneBackground = new SolidColorBrush(Color.FromRgb(0xE8, 0xE8, 0xF0));
        ansicht.Content = new TextBlock { Text = "Inhalt", Margin = new Thickness(16) };
    }
}