TabStrip und Carousel

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.BlaetternVorfuehrung"
            Spacing="12">
  <!-- Das Innere (Einträge, Kopplungen, Ereignisse) baut BlaetternSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <TabStrip x:Name="Reiter" Modus="Fest" Width="360" />
  <Carousel x:Name="Seiten" Width="360" Height="140" />
  <PipsPager x:Name="Punkte" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite TabStrip und Carousel: das Gerüst steht in BlaetternSeite.kxaml, das Innere füllt BlaetternSeite.Fuelle.</summary>
public sealed partial class BlaetternVorfuehrung
{
    public BlaetternVorfuehrung()
    {
        InitializeComponent();
        BlaetternSeite.Fuelle(Reiter, Seiten, Punkte);
    }
}

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

    public override string Beschreibung =>
        "Eine Reiterleiste ohne Inhalt steuert Seiten zum Blättern; die Seitenpunkte folgen. Der Unterstrich gleitet zum gewählten Reiter, die Seiten blättern mit Wischen (mit Schwung oder ab der halben Seite), den Pfeiltasten oder einem Klick auf einen Punkt.";

    public override string Stichworte => "TabStrip TabLayout Carousel ViewPager CarouselView PipsPager Seitenpunkte Wischen Blättern";

    public override string Datei => nameof(BlaetternSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 12 };
        var reiter = new TabStrip { Modus = TabStripModus.Fest, Width = 360 };
        var seiten = new Carousel { Width = 360, Height = 140 };
        var punkte = new PipsPager();
        Fuelle(reiter, seiten, punkte);
        seite.Children.Add(reiter);
        seite.Children.Add(seiten);
        seite.Children.Add(punkte);
        return seite;
    }

    /// <summary>Reiter, Seiten und Punkte, miteinander gekoppelt (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(TabStrip reiter, Carousel seiten, PipsPager punkte)
    {
        string[] namen = ["Rot", "Grün", "Blau"];
        Color[] farben = [Color.FromRgb(0xE5, 0x73, 0x73), Color.FromRgb(0x81, 0xC7, 0x84), Color.FromRgb(0x64, 0xB5, 0xF6)];
        for (int i = 0; i < namen.Length; i++)
        {
            reiter.Items.Add(new TabStripItem { Content = namen[i], Padding = new Thickness(12, 8, 12, 8) });
            seiten.Items.Add(new Border { Background = new SolidColorBrush(farben[i]), Child = new TextBlock { Text = namen[i], Margin = new Thickness(16) } });
        }
        punkte.Ziel = seiten;
        reiter.SelectionChanged += (_, _) => seiten.SelectedIndex = reiter.SelectedIndex;
        seiten.SelectionChanged += (_, _) => reiter.SelectedIndex = seiten.SelectedIndex;
    }
}