WinUI 3中无法重写Shape的DefiningGeometry，如何自定义三角形？

我尝试创建一个自定义Shape（三角形），但找不到正确的实现方法。在WPF中我习惯通过重写DefiningGeometry来实现，但WinUI 3中没有类似的机制。以下是我在WPF中实现的代码：

public class Triangle : Shape
{
    private double size;

    public static readonly DependencyProperty SizeProperty = DependencyProperty.Register("Size", typeof(Double), typeof(Triangle));

    public Triangle()
    {
    }

    public double Size
    {
        get { return (double)this.GetValue(SizeProperty); }
        set { this.SetValue(SizeProperty, value); }
    }

    protected override Geometry DefiningGeometry
    {
        get
        {
            Point p1 = new Point(0.0d, 0.0d);
            Point p2 = new Point(this.Size, 0.0d);
            Point p3 = new Point(this.Size / 2, -this.Size);

            List<PathSegment> segments = new List<PathSegment>(3);
            segments.Add(new LineSegment(p1, true));
            segments.Add(new LineSegment(p2, true));
            segments.Add(new LineSegment(p3, true));

            List<PathFigure> figures = new List<PathFigure>(1);
            PathFigure pf = new PathFigure(p1, segments, true);
            figures.Add(pf);

            Geometry g = new PathGeometry(figures, FillRule.EvenOdd, null);

            return g;
        }
    }
}

请问在WinUI 3中该如何实现？

WinUI 3实现方案 #

在WinUI 3中，Shape类没有DefiningGeometry属性，需通过重写OnRender方法绘制自定义图形，同时可重写MeasureOverride处理尺寸测量逻辑。以下是对应实现代码：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;
using Windows.Foundation;

public class Triangle : Shape
{
    public static readonly DependencyProperty SizeProperty =
        DependencyProperty.Register(nameof(Size), typeof(double), typeof(Triangle),
            new PropertyMetadata(100.0, OnSizeChanged));

    public double Size
    {
        get => (double)GetValue(SizeProperty);
        set => SetValue(SizeProperty, value);
    }

    private static void OnSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Triangle triangle)
        {
            triangle.InvalidateArrange();
            triangle.InvalidateMeasure();
        }
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        // 根据Size属性确定控件的期望尺寸
        double desiredWidth = Size;
        double desiredHeight = Size;
        return new Size(desiredWidth, desiredHeight);
    }

    protected override void OnRender(CanvasDrawingSession drawingSession)
    {
        base.OnRender(drawingSession);

        // 计算三角形的三个顶点（基于控件实际尺寸居中调整）
        double centerX = RenderSize.Width / 2;
        double centerY = RenderSize.Height / 2;
        double halfSize = Size / 2;

        Point p1 = new Point(centerX, centerY - halfSize);
        Point p2 = new Point(centerX + halfSize, centerY + halfSize);
        Point p3 = new Point(centerX - halfSize, centerY + halfSize);

        // 使用当前Shape的Stroke和Fill属性绘制三角形
        if (Fill != null)
        {
            drawingSession.FillTriangle(p1, p2, p3, (SolidColorBrush)Fill);
        }
        if (Stroke != null && StrokeThickness > 0)
        {
            drawingSession.DrawTriangle(p1, p2, p3, (SolidColorBrush)Stroke, (float)StrokeThickness);
        }
    }
}

关键说明 #

• 核心逻辑是重写OnRender，利用CanvasDrawingSession的FillTriangle和DrawTriangle方法直接绘制图形，这是WinUI 3自定义Shape的标准方式。
• MeasureOverride用于定义控件的期望尺寸，确保布局系统能正确计算控件占用空间。
• 当Size属性变更时，调用InvalidateArrange和InvalidateMeasure触发重新布局与绘制。
• 顶点计算基于控件实际RenderSize居中调整，保证三角形在控件范围内正确显示。

内容的提问来源于stack exchange，提问作者Florian_Schaf