InkCanvas

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            xmlns:ink="using:Kuonen.UI.Controls.Ink"
            x:Class="Kuonen.UI.Galerie.Seiten.InkCanvasVorfuehrung"
            Spacing="8">
  <!-- Werkzeuge füllt InkCanvasSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <StackPanel x:Name="Leiste" Orientation="Horizontal" Spacing="6" />
  <ink:InkCanvas x:Name="Ink" Width="640" Height="360" />
  <TextBlock x:Name="Meldung" />
</StackPanel>

using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Seite InkCanvas: das Gerüst steht in InkCanvasSeite.kxaml, das Innere füllt InkCanvasSeite.Fuelle.</summary>
public sealed partial class InkCanvasVorfuehrung
{
    public InkCanvasVorfuehrung()
    {
        InitializeComponent();
        InkCanvasSeite.Fuelle(Leiste, Ink, Meldung);
    }
}

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: InkCanvas mit Stift, Textmarker, Radierer und Auswahl (Plan 6j).</summary>
public sealed partial class InkCanvasSeite : GalerieSeite
{
    public override string Titel => "InkCanvas";

    public override string Beschreibung =>
        "Zeichnen mit Stift (Druck), Finger und Maus; Textmarker liegt unter der Tinte. Radieren ganzer Striche oder an Punkten, Auswählen mit dem Lasso, " +
        "Verschieben, Entf löscht, Strg+Z/Y. Die Striche lassen sich speichern und als SVG ausgeben.";

    public override string Stichworte => "InkCanvas Stroke StylusPoint DrawingAttributes Tinte Stift Druck Radierer Lasso Textmarker SVG";

    public override string Datei => nameof(InkCanvasSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 8 };
        var leiste = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        var ink = new InkCanvas { Width = 640, Height = 360 };
        var meldung = new TextBlock();
        Fuelle(leiste, ink, meldung);
        seite.Children.Add(leiste);
        seite.Children.Add(ink);
        seite.Children.Add(meldung);
        return seite;
    }

    /// <summary>Werkzeuge (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(StackPanel leiste, InkCanvas ink, TextBlock meldung)
    {
        ink.Background = new SolidColorBrush(Color.FromRgb(0xFF, 0xFF, 0xFF));
        ink.DefaultDrawingAttributes = new DrawingAttributes { Color = Color.FromRgb(0x1F, 0x3A, 0x8A), Width = 4, Height = 4, FitToCurve = true };
        void Knopf(string text, Action tun)
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => tun();
            leiste.Children.Add(k);
        }
        Knopf("Stift", () =>
        {
            ink.EditingMode = InkCanvasEditingMode.Ink;
            ink.DefaultDrawingAttributes = new DrawingAttributes { Color = Color.FromRgb(0x1F, 0x3A, 0x8A), Width = 4, Height = 4, FitToCurve = true };
        });
        Knopf("Textmarker", () =>
        {
            ink.EditingMode = InkCanvasEditingMode.Ink;
            ink.DefaultDrawingAttributes = new DrawingAttributes { Color = Color.FromRgb(0xFF, 0xE0, 0x00), Width = 18, Height = 18, IsHighlighter = true, IgnorePressure = true };
        });
        Knopf("Radierer", () => ink.EditingMode = InkCanvasEditingMode.EraseByPoint);
        Knopf("Auswahl", () => ink.EditingMode = InkCanvasEditingMode.Select);
        Knopf("Rückgängig", () => ink.Undo());
        Knopf("Leeren", () => ink.Strokes.Clear());
        Knopf("Als SVG", () => meldung.Text = $"SVG mit {ink.Strokes.Count} Strichen, {ink.Strokes.ToSvg().Length} Zeichen.");
    }
}