Kreis- und Ringdiagramm

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            xmlns:ch="using:Kuonen.UI.Controls.Charts"
            x:Class="Kuonen.UI.Galerie.Seiten.KreisDiagrammVorfuehrung"
            Spacing="8">
  <!-- Daten und Knöpfe füllt KreisDiagrammSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Leiste" Orientation="Horizontal" Spacing="6" />
  <ch:PieChart x:Name="Chart" Height="360" Width="520" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite Kreis- und Ringdiagramm: das Gerüst steht in KreisDiagrammSeite.kxaml, das Innere füllt KreisDiagrammSeite.Fuelle.</summary>
public sealed partial class KreisDiagrammVorfuehrung
{
    public KreisDiagrammVorfuehrung()
    {
        InitializeComponent();
        KreisDiagrammSeite.Fuelle(Leiste, Chart);
    }
}

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Kreis- und Ringdiagramm (Plan 6j).</summary>
public sealed partial class KreisDiagrammSeite : GalerieSeite
{
    public override string Titel => "Kreis- und Ringdiagramm";

    public override string Beschreibung =>
        "PieChart mit Stücken im Uhrzeigersinn ab oben, als Kreis oder Ring, beschriftet in Prozent, Wert oder Titel. Der Zeiger zeigt Wert und Anteil, " +
        "die Legende blendet Stücke aus und ein, die Pfeile wandern von Stück zu Stück.";

    public override string Stichworte => "Chart PieChart PieSlice Kreisdiagramm Torte Ring Doughnut Anteil Prozent Legende";

    public override string Datei => nameof(KreisDiagrammSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 8 };
        var leiste = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        var chart = new PieChart { Height = 360, Width = 520 };
        Fuelle(leiste, chart);
        seite.Children.Add(leiste);
        seite.Children.Add(chart);
        return seite;
    }

    /// <summary>Daten und Knöpfe (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel leiste, PieChart chart)
    {
        chart.Title = "Verkehrsmittel";
        foreach (var (titel, wert) in new[] { ("Zug", 41.0), ("Auto", 33), ("Velo", 12), ("Bus", 9), ("Zu Fuss", 5) }) chart.Slices.Add(new PieSlice(titel, wert));
        foreach (var (text, tun) in new (string, Action)[]
        {
            ("Kreis", () => chart.InnerRadius = 0),
            ("Ring", () => chart.InnerRadius = 0.55),
            ("Prozent", () => chart.LabelMode = PieLabelMode.Percent),
            ("Titel", () => chart.LabelMode = PieLabelMode.TitleAndPercent),
        })
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => tun();
            leiste.Children.Add(k);
        }
    }
}