Zum Inhalt
Kuonen.UI

MAUI-Seiten

ContentPage, NavigationPage mit Kopfleiste und Zurück, TabbedPage mit Reitern und Shell mit Klappe und Routen wie MAUI und Xamarin.Forms.

Vorführung: MAUI-SeitenVorführung: MAUI-Seiten

KXAML

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

namespace Kuonen.UI.Galerie.Seiten;

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

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

C#

MauiSeitenSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Seitenarten wie MAUI (Plan 6n).</summary>
public sealed partial class MauiSeitenSeite : GalerieSeite
{
    public override string Titel => "MAUI-Seiten";

    public override string Beschreibung => "ContentPage, NavigationPage mit Kopfleiste und Zurück, TabbedPage mit Reitern und Shell mit Klappe und Routen wie MAUI und Xamarin.Forms.";

    public override string Stichworte => "MAUI Xamarin ContentPage NavigationPage TabbedPage Shell PushAsync GoToAsync Route Seite Stapel";

    public override string Datei => nameof(MauiSeitenSeite);

    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 ContentPage Seite(string titel, UIElement inhalt) => new() { Title = titel, Content = inhalt };

    /// <summary>Inhalt der Seite (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel flaeche)
    {
        var oeffnen = new Button { Content = "Details öffnen", HorizontalAlignment = HorizontalAlignment.Left, Margin = new Thickness(12) };
        var start = Seite("Start", oeffnen);
        var navigation = new NavigationPage(start);
        oeffnen.Click += (_, _) =>
        {
            var details = Seite("Details", new TextBlock { Text = "Zurück führt zur Startseite.", Margin = new Thickness(12) });
            details.ToolbarItems.Add(new ToolbarItem { Text = "Teilen" });
            details.ToolbarItems.Add(new ToolbarItem { Text = "Löschen", Order = ToolbarItemOrder.Secondary });
            _ = navigation.PushAsync(details);
        };
        flaeche.Children.Add(new TextBlock { Text = "NavigationPage" });
        flaeche.Children.Add(new Border { Height = 160, BorderThickness = new Thickness(1), Child = navigation });

        var reiter = new TabbedPage
        {
            Children =
            {
                Seite("Heute", new TextBlock { Text = "Termine von heute", Margin = new Thickness(12) }),
                Seite("Woche", new TextBlock { Text = "Die ganze Woche", Margin = new Thickness(12) }),
                Seite("Monat", new TextBlock { Text = "Der Monat", Margin = new Thickness(12) }),
            },
        };
        flaeche.Children.Add(new TextBlock { Text = "TabbedPage" });
        flaeche.Children.Add(new Border { Height = 140, BorderThickness = new Thickness(1), Child = reiter });

        var ort = new TextBlock();
        var shell = new Shell
        {
            FlyoutBehavior = FlyoutBehavior.Locked,
            Items =
            {
                new FlyoutItem { Title = "Start", Items = { new Tab { Title = "Start", Items = { new ShellContent { Title = "Start", Route = "start", ContentTemplate = () => Seite("Start", new TextBlock { Text = "Willkommen", Margin = new Thickness(12) }) } } } } },
                new FlyoutItem
                {
                    Title = "Bibliothek",
                    Items =
                    {
                        new Tab
                        {
                            Title = "Musik",
                            Items =
                            {
                                new ShellContent { Title = "Alben", Route = "alben", ContentTemplate = () => Seite("Alben", new TextBlock { Text = "Alben", Margin = new Thickness(12) }) },
                                new ShellContent { Title = "Künstler", Route = "kuenstler", ContentTemplate = () => Seite("Künstler", new TextBlock { Text = "Künstler", Margin = new Thickness(12) }) },
                            },
                        },
                    },
                },
            },
        };
        shell.Navigated += (_, _) => ort.Text = "Ort: " + shell.Ort;
        flaeche.Children.Add(new TextBlock { Text = "Shell" });
        flaeche.Children.Add(new Border { Height = 200, BorderThickness = new Thickness(1), Child = shell });
        flaeche.Children.Add(ort);
    }
}