ColorPicker

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.ColorPickerVorfuehrung"
            Spacing="8">
  <TextBlock Text="Farbwahl" FontWeight="SemiBold" />
  <ColorView Color="#0078D4" Width="360" ColorChanged="Ganz_ColorChanged" />
  <TextBlock Text="Ohne Deckkraft, RGB untereinander" FontWeight="SemiBold" />
  <ColorView Color="#107C10" IsAlphaEnabled="False" ColorModel="Rgba" Layout="Stacked" IsColorPaletteVisible="False" Width="360"
             ColorChanged="Rgb_ColorChanged" />
  <TextBlock Text="Farbwähler für Schrift und Hintergrund" FontWeight="SemiBold" />
  <StackPanel Orientation="Horizontal" Spacing="8">
    <ColorPicker x:Name="Schrift" Color="#202020" ColorChanged="Schrift_ColorChanged" />
    <ColorPicker x:Name="Grund" Color="#FFF4CE" ColorChanged="Grund_ColorChanged" />
  </StackPanel>
  <Border x:Name="Vorschau" Background="#FFF4CE">
    <TextBlock x:Name="Beispiel" Text="Beispieltext" Foreground="#202020" Margin="12" />
  </Border>
  <TextBlock Text="Eigene kleine Palette" FontWeight="SemiBold" />
  <ColorView x:Name="Klein" PaletteColumnCount="5" IsColorSpectrumVisible="False" IsColorComponentsVisible="False" Width="360"
             ColorChanged="Klein_ColorChanged" />
  <TextBlock x:Name="Meldung" Text="Bereit." />
</StackPanel>

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

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der ColorPicker-Seite: der Baum steht in ColorPickerSeite.kxaml, hier das Verhalten (Namen, kleine Palette, Meldungen).</summary>
public sealed partial class ColorPickerVorfuehrung
{
    private readonly bool _bereit;

    public ColorPickerVorfuehrung()
    {
        InitializeComponent();
        Schrift.Automation.Name = "Schriftfarbe";
        Grund.Automation.Name = "Hintergrundfarbe";
        Klein.PaletteColors = ColorPickerSeite.KleinePalette;
        _bereit = true; // die Startwerte melden nicht (wie in der C#-Fassung, die erst danach abonniert)
    }

    private void Melde(string was, ColorChangedEventArgs e)
    {
        if (_bereit) Meldung.Text = ColorPickerSeite.Meldung(was, e);
    }

    private void Ganz_ColorChanged(object? sender, ColorChangedEventArgs e) => Melde("Farbwahl", e);

    private void Rgb_ColorChanged(object? sender, ColorChangedEventArgs e) => Melde("Ohne Deckkraft", e);

    private void Schrift_ColorChanged(object? sender, ColorChangedEventArgs e)
    {
        Beispiel.Foreground = new SolidColorBrush(e.NewColor);
        Melde("Schrift", e);
    }

    private void Grund_ColorChanged(object? sender, ColorChangedEventArgs e)
    {
        Vorschau.Background = new SolidColorBrush(e.NewColor);
        Melde("Hintergrund", e);
    }

    private void Klein_ColorChanged(object? sender, ColorChangedEventArgs e) => Melde("Kleine Palette", e);
}

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="ColorView"/> und <see cref="ColorPicker"/>.</summary>
public sealed partial class ColorPickerSeite : GalerieSeite
{
    public override string Titel => "ColorPicker";

    public override string Beschreibung =>
        "Farbwahl in Reitern (Fläche mit Farbton und Deckkraft, Kanäle mit Zahlen und Hexwert, Palette) und darunter die Vorschau; eine zweite ohne Deckkraft "
        + "mit RGB-Kanälen untereinander; zwei Farbwähler setzen Schrift- und Hintergrundfarbe einer Vorschau; eine eigene kleine Palette.";

    public override string Stichworte => "Farbe Farbwahl Farbwähler Palette Hex RGB HSV Farbton Deckkraft Alpha ColorPicker ColorView ColorSpectrum ColorDialog";

    public override string Datei => nameof(ColorPickerSeite);

    /// <summary>Die kleine eigene Palette der Seite.</summary>
    internal static readonly Color[] KleinePalette =
        [Color.FromRgb(0xD1, 0x34, 0x38), Color.FromRgb(0xFF, 0xB9, 0x00), Color.FromRgb(0x10, 0x7C, 0x10), Color.FromRgb(0x00, 0x78, 0xD4), Color.FromRgb(0x5C, 0x2D, 0x91)];

    internal static string Meldung(string was, ColorChangedEventArgs e) => $"{was}: #{e.NewColor.A:X2}{e.NewColor.R:X2}{e.NewColor.G:X2}{e.NewColor.B:X2}";

    public override UIElement Baue()
    {
        var meldung = new TextBlock { Text = "Bereit." };
        var ganz = new ColorView { Color = Color.FromRgb(0x00, 0x78, 0xD4), Width = 360 };
        ganz.ColorChanged += (_, e) => meldung.Text = Meldung("Farbwahl", e);
        var rgb = new ColorView { Color = Color.FromRgb(0x10, 0x7C, 0x10), IsAlphaEnabled = false, ColorModel = ColorModel.Rgba, Layout = ColorViewLayout.Stacked, IsColorPaletteVisible = false, Width = 360 };
        rgb.ColorChanged += (_, e) => meldung.Text = Meldung("Ohne Deckkraft", e);
        var text = new TextBlock { Text = "Beispieltext", Foreground = new SolidColorBrush(Color.FromRgb(0x20, 0x20, 0x20)), Margin = new Thickness(12) };
        var vorschau = new Border { Background = new SolidColorBrush(Color.FromRgb(0xFF, 0xF4, 0xCE)), Child = text };
        var schrift = new ColorPicker { Color = Color.FromRgb(0x20, 0x20, 0x20) };
        schrift.Automation.Name = "Schriftfarbe";
        schrift.ColorChanged += (_, e) =>
        {
            text.Foreground = new SolidColorBrush(e.NewColor);
            meldung.Text = Meldung("Schrift", e);
        };
        var grund = new ColorPicker { Color = Color.FromRgb(0xFF, 0xF4, 0xCE) };
        grund.Automation.Name = "Hintergrundfarbe";
        grund.ColorChanged += (_, e) =>
        {
            vorschau.Background = new SolidColorBrush(e.NewColor);
            meldung.Text = Meldung("Hintergrund", e);
        };
        var klein = new ColorView { PaletteColors = KleinePalette, PaletteColumnCount = 5, IsColorSpectrumVisible = false, IsColorComponentsVisible = false, Width = 360 };
        klein.ColorChanged += (_, e) => meldung.Text = Meldung("Kleine Palette", e);
        return new StackPanel
        {
            Spacing = 8,
            Children =
            {
                new TextBlock { Text = "Farbwahl", FontWeight = 600 },
                ganz,
                new TextBlock { Text = "Ohne Deckkraft, RGB untereinander", FontWeight = 600 },
                rgb,
                new TextBlock { Text = "Farbwähler für Schrift und Hintergrund", FontWeight = 600 },
                new StackPanel { Orientation = Orientation.Horizontal, Spacing = 8, Children = { schrift, grund } },
                vorschau,
                new TextBlock { Text = "Eigene kleine Palette", FontWeight = 600 },
                klein,
                meldung,
            },
        };
    }
}