Säulen- und Balkendiagramm

<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.SaeulenDiagrammVorfuehrung"
            Spacing="8">
  <!-- Daten und Knöpfe füllt SaeulenDiagrammSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Leiste" Orientation="Horizontal" Spacing="6" />
  <ch:CartesianChart x:Name="Chart" Height="360" Width="640" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite Säulen- und Balkendiagramm: das Gerüst steht in SaeulenDiagrammSeite.kxaml, das Innere füllt SaeulenDiagrammSeite.Fuelle.</summary>
public sealed partial class SaeulenDiagrammVorfuehrung
{
    public SaeulenDiagrammVorfuehrung()
    {
        InitializeComponent();
        SaeulenDiagrammSeite.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: Säulen und Balken, gruppiert, gestapelt und 100 % (Plan 6j).</summary>
public sealed partial class SaeulenDiagrammSeite : GalerieSeite
{
    public override string Titel => "Säulen- und Balkendiagramm";

    public override string Beschreibung =>
        "ColumnSeries und BarSeries: nebeneinander in der Kategorie, gestapelt oder in Prozent der Summe; Balken liegen waagrecht mit den Kategorien auf der " +
        "y-Achse. Beim Wechsel wachsen die Werte aus der Nulllinie (bei reduzierter Bewegung sofort).";

    public override string Stichworte => "Chart ColumnSeries BarSeries Säule Balken gestapelt StackedColumn 100 Prozent Kategorie";

    public override string Datei => nameof(SaeulenDiagrammSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 8 };
        var leiste = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        var chart = new CartesianChart { Height = 360, Width = 640 };
        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, CartesianChart chart)
    {
        string[] quartale = ["Q1", "Q2", "Q3", "Q4"];
        double[] a = [42, 55, 61, 70], b = [30, 38, 35, 44], c = [12, 18, 25, 21];
        chart.Title = "Umsatz nach Quartal";
        void Zeige(Func<SaeulenBasis> neu, StackMode modus, bool waagrecht)
        {
            chart.Series.Clear();
            var kategorien = new CategoryAxis { Labels = quartale };
            if (waagrecht) chart.YAxis = kategorien;
            else chart.XAxis = kategorien;
            if (waagrecht) chart.XAxis = new NumericAxis();
            else chart.YAxis = new NumericAxis();
            foreach (var (titel, werte) in new[] { ("Schweiz", a), ("Deutschland", b), ("Österreich", c) })
            {
                var r = neu();
                (r.Title, r.Values, r.StackMode, r.CornerRadius) = (titel, werte, modus, 2);
                chart.Series.Add(r);
            }
        }
        Zeige(() => new ColumnSeries(), StackMode.None, false);
        foreach (var (text, neu, modus, waagrecht) in new (string, Func<SaeulenBasis>, StackMode, bool)[]
        {
            ("Gruppiert", () => new ColumnSeries(), StackMode.None, false),
            ("Gestapelt", () => new ColumnSeries(), StackMode.Stacked, false),
            ("100 %", () => new ColumnSeries(), StackMode.Percent, false),
            ("Balken", () => new BarSeries(), StackMode.None, true),
        })
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => Zeige(neu, modus, waagrecht);
            leiste.Children.Add(k);
        }
    }
}