AppBar, FAB und Aktualisieren

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

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite AppBar, FAB und Aktualisieren: das Gerüst steht in KopfleisteSeite.kxaml, das Innere füllt KopfleisteSeite.Fuelle.</summary>
public sealed partial class KopfleisteVorfuehrung
{
    public KopfleisteVorfuehrung()
    {
        InitializeComponent();
        KopfleisteSeite.Fuelle(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: AppBar, FAB und Aktualisieren (Plan 6f).</summary>
public sealed partial class KopfleisteSeite : GalerieSeite
{
    public override string Titel => "AppBar, FAB und Aktualisieren";

    public override string Beschreibung =>
        "Eine Kopfleiste, die beim Rollen der Liste zusammenklappt, ein schwebender Knopf, der dabei auf sein Symbol schrumpft, und Ziehen zum Aktualisieren: am Anfang der Liste weiter hinunterziehen, bis der Kreis erscheint.";

    public override string Stichworte => "AppBar Top App Bar Toolbar CollapsingToolbar CoordinatorLayout FloatingActionButton FAB RefreshContainer SwipeRefreshLayout Ziehen zum Aktualisieren";

    public override string Datei => nameof(KopfleisteSeite);

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

    /// <summary>Kopfleiste, Liste mit Aktualisieren und schwebender Knopf (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(Grid flaeche)
    {
        var zeilen = new StackPanel();
        for (int i = 1; i <= 30; i++) zeilen.Children.Add(new TextBlock { Text = $"Nachricht {i}", Margin = new Thickness(16, 8, 16, 8) });
        var liste = new ScrollViewer { Content = zeilen };
        var aktualisieren = new RefreshContainer { Content = liste };
        int runde = 0;
        aktualisieren.RefreshRequested += (_, _) => ((TextBlock)zeilen.Children[0]).Text = $"Aktualisiert ({++runde})";
        var leiste = new AppBar
        {
            Title = "Posteingang", Groesse = AppBarGroesse.Mittel, Verhalten = AppBarVerhalten.Zusammenklappen, NavigationIcon = "☰",
            Background = new SolidColorBrush(Color.FromRgb(0xF3, 0xED, 0xF7)), ScrollZiel = liste,
        };
        leiste.Actions.Add(new Button { Content = "Suchen" });
        var knopf = new FloatingActionButton { Icon = "✎", Content = "Verfassen", Margin = new Thickness(16), ScrollZiel = liste,
            Background = new SolidColorBrush(Color.FromRgb(0xE8, 0xDE, 0xF8)) };
        var spalte = new DockPanel();
        DockPanel.SetDock(leiste, Dock.Top);
        spalte.Children.Add(leiste);
        spalte.Children.Add(aktualisieren);
        flaeche.Children.Add(spalte);
        flaeche.Children.Add(knopf);
    }
}