Border

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.BorderVorfuehrung"
            Spacing="12">
  <!-- Hintergrund, Rand, Ecken; je 140 × 80 (der Kreis 80 × 80). -->
  <WrapPanel Orientation="Horizontal">
    <Border Background="#CCE4F7" Width="140" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Hintergrund" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="#CCE4F7" BorderBrush="#0078D4" BorderThickness="2" Width="140" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Rand 2" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="#CCE4F7" BorderBrush="#0078D4" BorderThickness="1,1,1,6" Width="140" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Rand je Seite" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="#CCE4F7" BorderBrush="#0078D4" BorderThickness="1" CornerRadius="12" Width="140" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Ecken 12" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="#CCE4F7" CornerRadius="0,24,0,24" Width="140" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Ecken je Ecke" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <Border Background="#CCE4F7" BorderBrush="#0078D4" BorderThickness="2" CornerRadius="40" Width="80" Height="80" Margin="0,0,12,12">
      <TextBlock Text="Kreis" Foreground="#1B1B1B" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
  </WrapPanel>
  <!-- Padding: der Abstand zwischen Rand und Kind; geschachtelte Rahmen. -->
  <Border Background="#CCE4F7" BorderBrush="#0078D4" BorderThickness="1" CornerRadius="8"
          Padding="24,12,24,12" HorizontalAlignment="Left">
    <Border Background="#0078D4" Padding="8" CornerRadius="4">
      <TextBlock Text="Kind" Foreground="White" />
    </Border>
  </Border>
  <!-- Treffer nach Form: der Zeiger zählt nur innerhalb der runden Ecke. -->
  <StackPanel Orientation="Horizontal" Spacing="16">
    <Border Width="80" Height="80" CornerRadius="40" Background="#0078D4"
            PointerEntered="Kreis_PointerEntered" PointerExited="Kreis_PointerExited" />
    <TextBlock x:Name="Meldung" Text="Zeiger über den Kreis bewegen." />
  </StackPanel>
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Eingabe;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Border-Seite: der Baum steht in BorderSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class BorderVorfuehrung
{
    public BorderVorfuehrung() => InitializeComponent();

    private void Kreis_PointerEntered(object sender, PointerEventArgs e) => Meldung.Text = "Im Kreis.";

    private void Kreis_PointerExited(object sender, PointerEventArgs e) => Meldung.Text = "Ausserhalb des Kreises.";
}

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

namespace Kuonen.UI.Galerie.Seiten;

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

    public override string Beschreibung =>
        "Ein Rahmen um genau ein Kind: Hintergrund, Randfarbe und -dicke je Seite, runde Ecken je Ecke und Innenabstand. "
        + "Getroffen wird nach der gezeichneten Form: eine runde Ecke ist ausserhalb ihres Bogens kein Treffer.";

    public override string Stichworte => "Rahmen Rand Hintergrund CornerRadius Ecken abgerundet Padding Innenabstand";

    public override string Datei => nameof(BorderSeite);

    public override UIElement Baue()
    {
        var blau = new SolidColorBrush(Color.FromRgb(0x00, 0x78, 0xD4));
        var hellblau = new SolidColorBrush(Color.FromRgb(0xCC, 0xE4, 0xF7));
        var dunkel = new SolidColorBrush(Color.FromRgb(0x1B, 0x1B, 0x1B));
        var weiss = new SolidColorBrush(Color.FromRgb(0xFF, 0xFF, 0xFF));

        Border Muster(string text, Border rahmen)
        {
            if (double.IsNaN(rahmen.Width)) rahmen.Width = 140;
            rahmen.Height = 80;
            rahmen.Child = new TextBlock { Text = text, Foreground = dunkel, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };
            return rahmen;
        }

        var reihe = new WrapPanel { Orientation = Orientation.Horizontal };
        void Fuege(Border b)
        {
            b.Margin = new Thickness(0, 0, 12, 12);
            reihe.Children.Add(b);
        }
        Fuege(Muster("Hintergrund", new Border { Background = hellblau }));
        Fuege(Muster("Rand 2", new Border { Background = hellblau, BorderBrush = blau, BorderThickness = new Thickness(2) }));
        Fuege(Muster("Rand je Seite", new Border { Background = hellblau, BorderBrush = blau, BorderThickness = new Thickness(1, 1, 1, 6) }));
        Fuege(Muster("Ecken 12", new Border { Background = hellblau, BorderBrush = blau, BorderThickness = new Thickness(1), CornerRadius = new CornerRadius(12) }));
        Fuege(Muster("Ecken je Ecke", new Border { Background = hellblau, CornerRadius = new CornerRadius(0, 24, 0, 24) }));
        Fuege(Muster("Kreis", new Border { Background = hellblau, BorderBrush = blau, BorderThickness = new Thickness(2), CornerRadius = new CornerRadius(40), Width = 80 }));

        // Padding: der Abstand zwischen Rand und Kind; geschachtelte Rahmen.
        var innen = new Border { Background = blau, Padding = new Thickness(8), CornerRadius = new CornerRadius(4), Child = new TextBlock { Text = "Kind", Foreground = weiss } };
        var aussen = new Border
        {
            Background = hellblau, BorderBrush = blau, BorderThickness = new Thickness(1), CornerRadius = new CornerRadius(8),
            Padding = new Thickness(24, 12, 24, 12), HorizontalAlignment = HorizontalAlignment.Left, Child = innen,
        };

        // Treffer nach Form: der Zeiger zählt nur innerhalb der runden Ecke.
        var meldung = new TextBlock { Text = "Zeiger über den Kreis bewegen." };
        var kreis = new Border { Width = 80, Height = 80, CornerRadius = new CornerRadius(40), Background = blau };
        kreis.PointerEntered += (_, _) => meldung.Text = "Im Kreis.";
        kreis.PointerExited += (_, _) => meldung.Text = "Ausserhalb des Kreises.";
        var trefferReihe = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 16 };
        trefferReihe.Children.Add(kreis);
        trefferReihe.Children.Add(meldung);

        var seite = new StackPanel { Spacing = 12 };
        seite.Children.Add(reihe);
        seite.Children.Add(aussen);
        seite.Children.Add(trefferReihe);
        return seite;
    }
}