Ring, Abzeichen und Karten

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.RueckmeldungenVorfuehrung"
            Spacing="16">
  <StackPanel Orientation="Horizontal" Spacing="12">
    <ProgressRing x:Name="Ring" IsIndeterminate="False" Value="60" />
    <CheckBox x:Name="Unbestimmt" Content="Unbestimmt" Click="Unbestimmt_Click" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <InfoBadge />
    <InfoBadge Value="7" />
    <InfoBadge Value="120" Severity="Critical" />
    <InfoBadge Icon="{x:Static Symbole.Haken}" Severity="Success" />
    <InfoBadge Value="3" Severity="Caution" />
    <Button Content="Posteingang" Click="Post_Click">
      <Badge.Inhalt>
        <InfoBadge Value="1" />
      </Badge.Inhalt>
    </Button>
  </StackPanel>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <Card Header="Welt „Insel“" Content="Zuletzt gespeichert" Footer="vor 2 Minuten" Width="180" />
    <Card Header="Neue Welt" Content="Klicken zum Anlegen" Elevation="3" IsClickable="True" Width="180" Click="Karte_Click" />
  </StackPanel>
  <TextBlock x:Name="Meldung" Text="Bereit." />
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Ereignisse;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite Ring, Abzeichen und Karten: der Baum steht in RueckmeldungenSeite.kxaml, hier das Verhalten.</summary>
public sealed partial class RueckmeldungenVorfuehrung
{
    public RueckmeldungenVorfuehrung() => InitializeComponent();

    private void Unbestimmt_Click(object sender, RoutedEventArgs e) => Ring.IsIndeterminate = Unbestimmt.IsChecked == true;

    private void Post_Click(object sender, RoutedEventArgs e) => RueckmeldungenSeite.Erhoehe(sender);

    private void Karte_Click(object sender, RoutedEventArgs e) => Meldung.Text = "Karte geklickt.";
}

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="ProgressRing"/>, <see cref="InfoBadge"/>, <see cref="Badge"/> und <see cref="Card"/>.</summary>
public sealed partial class RueckmeldungenSeite : GalerieSeite
{
    public override string Titel => "Ring, Abzeichen und Karten";

    public override string Beschreibung =>
        "Der Fortschrittsring zeigt bestimmt einen Bogen nach dem Wert, unbestimmt dreht er (mit „Bewegung reduzieren“ ruht er). Abzeichen sind ein Punkt, "
        + "eine Zahl (über 99 „99+“) oder ein Symbol in der Farbe ihrer Dringlichkeit und hängen mit Badge.Inhalt an jedem Element. Karten tragen Kopf, "
        + "Inhalt und Fuss mit Schatten nach ihrer Erhebung; eine anklickbare Karte reagiert auf Zeiger und Tastatur.";

    public override string Stichworte =>
        "ProgressRing Fortschrittsring Ladeanzeige unbestimmt InfoBadge Badge Abzeichen Zähler Punkt Card Karte Elevation Schatten IsClickable";

    public override string Datei => nameof(RueckmeldungenSeite);

    internal static void Erhoehe(object? sender)
    {
        if (sender is UIElement element && Badge.GetInhalt(element) is InfoBadge zahl) zahl.Value = zahl.Value < 0 ? 1 : zahl.Value * 2;
    }

    public override UIElement Baue()
    {
        var meldung = new TextBlock { Text = "Bereit." };
        var ring = new ProgressRing { IsIndeterminate = false, Value = 60 };
        var unbestimmt = new CheckBox { Content = "Unbestimmt" };
        unbestimmt.Click += (_, _) => ring.IsIndeterminate = unbestimmt.IsChecked == true;
        var ringe = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
        ringe.Children.Add(ring);
        ringe.Children.Add(unbestimmt);

        var abzeichen = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
        abzeichen.Children.Add(new InfoBadge());
        abzeichen.Children.Add(new InfoBadge { Value = 7 });
        abzeichen.Children.Add(new InfoBadge { Value = 120, Severity = InfoBadgeSeverity.Critical });
        abzeichen.Children.Add(new InfoBadge { Icon = Symbole.Haken, Severity = InfoBadgeSeverity.Success });
        abzeichen.Children.Add(new InfoBadge { Value = 3, Severity = InfoBadgeSeverity.Caution });
        var post = new Button { Content = "Posteingang" };
        Badge.SetInhalt(post, new InfoBadge { Value = 1 });
        post.Click += (s, _) => Erhoehe(s);
        abzeichen.Children.Add(post);

        var karten = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
        karten.Children.Add(new Card { Header = "Welt „Insel“", Content = "Zuletzt gespeichert", Footer = "vor 2 Minuten", Width = 180 });
        var klickbar = new Card { Header = "Neue Welt", Content = "Klicken zum Anlegen", Elevation = 3, IsClickable = true, Width = 180 };
        klickbar.Click += (_, _) => meldung.Text = "Karte geklickt.";
        karten.Children.Add(klickbar);

        var seite = new StackPanel { Spacing = 16 };
        seite.Children.Add(ringe);
        seite.Children.Add(abzeichen);
        seite.Children.Add(karten);
        seite.Children.Add(meldung);
        return seite;
    }
}