MAUI-Listen

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.MauiListenVorfuehrung"
            Spacing="8">
  <!-- Gefüllt von MauiListenSeite.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 MauiListenSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new MauiListenVorfuehrung();
}

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

using System.Collections.ObjectModel;
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: CollectionView, SwipeView und TableView wie MAUI (Plan 6n).</summary>
public sealed partial class MauiListenSeite : GalerieSeite
{
    public override string Titel => "MAUI-Listen";

    public override string Beschreibung => "CollectionView mit Auswahl und Nachladen, Zeilen mit Wischaktionen (SwipeView) und eine Einstellungstabelle (TableView) wie MAUI.";

    public override string Stichworte => "MAUI Xamarin CollectionView SwipeView TableView TextCell SwitchCell EntryCell Wischen Liste Einstellungen";

    public override string Datei => nameof(MauiListenSeite);

    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 } };
    }

    /// <summary>Inhalt der Seite (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel flaeche)
    {
        var meldung = new TextBlock { Text = "Wische eine Zeile nach links oder rechts." };
        var aufgaben = new ObservableCollection<string>();
        for (int i = 1; i <= 12; i++) aufgaben.Add($"Aufgabe {i}");
        var liste = new CollectionView
        {
            ItemsSource = aufgaben,
            SelectionMode = ItemsSelectionMode.Single,
            Height = 220,
            RemainingItemsThreshold = 2,
            ItemTemplate = new DataTemplate(daten =>
            {
                var text = daten as string ?? "";
                var erledigt = new SwipeItem { Text = "Erledigt" };
                erledigt.Invoked += (_, _) => meldung.Text = text + " erledigt";
                var loeschen = new SwipeItem { Text = "Löschen" };
                loeschen.Invoked += (_, _) => aufgaben.Remove(text);
                return new SwipeView
                {
                    Content = new Border { Padding = new Thickness(12, 8, 12, 8), Child = new TextBlock { Text = text } },
                    LeftItems = new SwipeItems { Mode = SwipeMode.Execute, Items = { erledigt } },
                    RightItems = new SwipeItems { loeschen },
                };
            }),
        };
        liste.RemainingItemsThresholdReached += (_, _) =>
        {
            if (aufgaben.Count >= 40) return;
            int n = aufgaben.Count;
            for (int i = 1; i <= 6; i++) aufgaben.Add($"Aufgabe {n + i}");
        };
        flaeche.Children.Add(new TextBlock { Text = "CollectionView mit SwipeView (lädt beim Rollen nach)" });
        flaeche.Children.Add(new Border { BorderThickness = new Thickness(1), Child = liste });
        flaeche.Children.Add(meldung);

        var dunkel = new SwitchCell { Text = "Dunkles Design" };
        var name = new EntryCell { Label = "Name", Placeholder = "Vor- und Nachname" };
        var stand = new TextBlock();
        void Zeige() => stand.Text = $"Dunkel: {(dunkel.On ? "ja" : "nein")}, Name: {name.Text}";
        dunkel.OnChanged += (_, _) => Zeige();
        name.Completed += (_, _) => Zeige();
        var tabelle = new TableView
        {
            Intent = TableIntent.Settings,
            Height = 260,
            Root = new TableRoot("Einstellungen")
            {
                new TableSection("Darstellung") { dunkel, new TextCell { Text = "Sprache", Detail = "Deutsch" } },
                new TableSection("Konto") { name, new SwitchCell { Text = "Benachrichtigungen", On = true } },
            },
        };
        Zeige();
        flaeche.Children.Add(new TextBlock { Text = "TableView" });
        flaeche.Children.Add(new Border { BorderThickness = new Thickness(1), Child = tabelle });
        flaeche.Children.Add(stand);
    }
}