Pfad, Auswahlleiste, Personenbild

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.WinUiNavigationVorfuehrung"
            Spacing="8">
  <!-- Gefüllt von WinUiNavigationSeite.Fuelle, derselben Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Flaeche" Spacing="8" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

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

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Pfad, Auswahlleiste, Personenbild (Plan 6m).</summary>
public sealed partial class WinUiNavigationSeite : GalerieSeite
{
    public override string Titel => "Pfad, Auswahlleiste, Personenbild";

    public override string Beschreibung => "BreadcrumbBar mit Einklappen nach Breite, SelectorBar mit einem gewählten Eintrag, PersonPicture mit Initialen, Gruppe und Abzeichen.";

    public override string Stichworte => "BreadcrumbBar SelectorBar SelectorBarItem PersonPicture Initialen Abzeichen WinUI";

    public override string Datei => nameof(WinUiNavigationSeite);

    public override UIElement Baue()
    {
        // Wie die KXAML-Fassung: eine Wurzel mit der Fläche darin.
        var flaeche = new StackPanel { Spacing = 8 };
        Fuelle(flaeche);
        return new StackPanel { Spacing = 8, Children = { flaeche } };
    }

    private static Button Knopf(string text, Action tun)
    {
        var k = new Button { Content = text };
        k.Click += (_, _) => tun();
        return k;
    }

    private static StackPanel Zeile(params UIElement[] kinder)
    {
        var z = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        foreach (var k in kinder) z.Children.Add(k);
        return z;
    }

    /// <summary>Inhalt der Seite (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel flaeche)
    {
        var meldung = new TextBlock();
        var pfad = new BreadcrumbBar { ItemsSource = new[] { "Start", "Dokumente", "Projekte", "Kuonen", "Bericht" }, HorizontalAlignment = HorizontalAlignment.Left };
        pfad.ItemClicked += (_, e) => meldung.Text = "Pfad: " + e.Item;
        flaeche.Children.Add(Zeile(Knopf("Schmal", () => pfad.Width = 200), Knopf("Breit", () => pfad.Width = double.NaN)));
        flaeche.Children.Add(pfad);
        var auswahl = new SelectorBar
        {
            Items =
            {
                new SelectorBarItem { Text = "Zuletzt", IsSelected = true },
                new SelectorBarItem { Text = "Geteilt" },
                new SelectorBarItem { Text = "Favoriten" },
            },
        };
        auswahl.SelectionChanged += (_, _) => meldung.Text = "Gewählt: " + auswahl.SelectedItem?.Text;
        flaeche.Children.Add(auswahl);
        flaeche.Children.Add(Zeile(
            new PersonPicture { DisplayName = "Marc Kuonen", Width = 64 },
            new PersonPicture { DisplayName = "Ada Lovelace", Width = 64, BadgeNumber = 3 },
            new PersonPicture { DisplayName = "Team", IsGroup = true, Width = 64 }));
        flaeche.Children.Add(meldung);
    }
}