UserControl

<UserControl xmlns="https://ui.kuonen.org/kxaml"
             xmlns:x="https://ui.kuonen.org/kxaml/x"
             xmlns:local="using:Kuonen.UI.Galerie.Seiten"
             x:Class="Kuonen.UI.Galerie.Seiten.UserControlVorfuehrung">
  <!-- Die Wurzel der Datei ist ein UserControl (x:Class); die Adresskarte steht in UserControlSeite.cs. -->
  <StackPanel Spacing="8">
    <TextBlock Text="Adresskarten (je ein UserControl)" FontWeight="SemiBold" />
    <StackPanel Orientation="Horizontal" Spacing="12">
      <local:Adresskarte Person="Anna Muster" Ort="8001 Zürich" />
      <local:Adresskarte Person="Beat Beispiel" Ort="3011 Bern" />
    </StackPanel>
    <TextBlock Text="Tab hält nur auf „Merken“; die Karte selbst ist kein Tab-Halt." />
  </StackPanel>
</UserControl>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der UserControl-Seite: der Baum steht in UserControlSeite.kxaml, die Wurzel ist ein UserControl.</summary>
public sealed partial class UserControlVorfuehrung
{
    public UserControlVorfuehrung() => InitializeComponent();
}

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>
/// Eine eigene Adresskarte, zusammengesetzt aus Rahmen, Texten und einer Schaltfläche. Wie im Code-Behind einer KXAML-Datei mit
/// <c>x:Class</c> setzt die Ableitung ihren Baum als <see cref="ContentControl.Content"/>; ihren Zustand („gemerkt“) verwaltet sie selbst.
/// </summary>
public sealed class Adresskarte : UserControl
{
    private readonly TextBlock _person = new() { FontWeight = 600, Foreground = new SolidColorBrush(Color.FromRgb(0x1B, 0x1B, 0x1B)) };
    private readonly TextBlock _ort = new() { Foreground = new SolidColorBrush(Color.FromRgb(0x1B, 0x1B, 0x1B)) };
    private readonly Button _merken = new() { Content = "Merken", HorizontalAlignment = HorizontalAlignment.Left };
    private bool _gemerkt;

    public Adresskarte()
    {
        _merken.Click += (_, _) =>
        {
            _gemerkt = !_gemerkt;
            _merken.Content = _gemerkt ? "Gemerkt" : "Merken";
        };
        var innen = new StackPanel { Spacing = 4 };
        innen.Children.Add(_person);
        innen.Children.Add(_ort);
        innen.Children.Add(_merken);
        Content = new Border
        {
            Background = new SolidColorBrush(Color.FromRgb(0xCC, 0xE4, 0xF7)), CornerRadius = new CornerRadius(6), Padding = new Thickness(12), Width = 200, Child = innen,
        };
    }

    public string Person { get => _person.Text; set => _person.Text = value; }

    public string Ort { get => _ort.Text; set => _ort.Text = value; }
}

/// <summary>Galerie-Seite: <see cref="UserControl"/>.</summary>
public sealed partial class UserControlSeite : GalerieSeite
{
    public override string Titel => "UserControl";

    public override string Beschreibung =>
        "Ein eigenes, zusammengesetztes Control: Es erbt von UserControl, baut seinen Inhalt selbst auf und nimmt weder Fokus noch Tab-Halt an, "
        + "nur die Controls darin. Ohne Theme und Vorlage lauffähig. In KXAML ist es die Wurzel einer Datei mit x:Class. "
        + "Diese Seite ist selbst ein UserControl und zeigt die Adresskarte zweimal.";

    public override string Stichworte => "eigenes Control zusammengesetzt Wurzel x:Class Code-Behind Karte Baustein Ableitung";

    public override string Datei => nameof(UserControlSeite);

    public override UIElement Baue()
    {
        var karten = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
        karten.Children.Add(new Adresskarte { Person = "Anna Muster", Ort = "8001 Zürich" });
        karten.Children.Add(new Adresskarte { Person = "Beat Beispiel", Ort = "3011 Bern" });

        var seite = new StackPanel { Spacing = 8 };
        seite.Children.Add(new TextBlock { Text = "Adresskarten (je ein UserControl)", FontWeight = 600 });
        seite.Children.Add(karten);
        seite.Children.Add(new TextBlock { Text = "Tab hält nur auf „Merken“; die Karte selbst ist kein Tab-Halt." });
        return new UserControl { Content = seite };
    }
}