How to draw an arrow in WPF programatically?

Question

I need to draw an arrow in WPF programatically. I remember that Windows Forms had primitives to draw an arrow, setting the Cap to the Pen.

mMyPen.CustomEndCap =
    new AdjustableArrowCap(arrowSize, arrowSize, true);

Is it possible with WPF?

score 4 · Accepted Answer · answered May 23 '13 at 12:38

4

I've used about Charles Petzold's ArrowLine before.

http://www.charlespetzold.com/blog/2007/04/191200.html

answered May 23 '13 at 12:38

AlSki

6,868
1
26
39

Yes, I already found this library, but I don't know how to customize the arrow dash style, for example dot-dot, or dash-dot... – Daniel Peñalba May 23 '13 at 12:42
@DanielPeñalba - Have you tried the ArrowLine's `StrokeDashArray` property? For example: `myArrow.StrokeDashArray = new DoubleCollection() { 1, 1 };` or `... new DoubleCollection() { 3, 2, 1, 2 }`. See this answer for more StrokeDash example: [Draw lines and circles in WPF](http://stackoverflow.com/questions/3702140/draw-lines-and-circles-in-wpf#answer-3702296) – Sphinxxx May 23 '13 at 21:16

Andrej Benedik · Answer 2 · 2014-10-13T21:37:58.553

I have created the following method that creates the PointCollection for the line with arrow:

private const double _maxArrowLengthPercent = 0.3; // factor that determines how the arrow is shortened for very short lines
private const double _lineArrowLengthFactor = 3.73205081; // 15 degrees arrow:  = 1 / Math.Tan(15 * Math.PI / 180); 

public static PointCollection CreateLineWithArrowPointCollection(Point startPoint, Point endPoint, double lineWidth)
{
    Vector direction = endPoint - startPoint;

    Vector normalizedDirection = direction;
    normalizedDirection.Normalize();

    Vector normalizedlineWidenVector = new Vector(-normalizedDirection.Y, normalizedDirection.X); // Rotate by 90 degrees
    Vector lineWidenVector = normalizedlineWidenVector * lineWidth * 0.5;

    double lineLength = direction.Length;

    double defaultArrowLength = lineWidth * _lineArrowLengthFactor;

    // Prepare usedArrowLength
    // if the length is bigger than 1/3 (_maxArrowLengthPercent) of the line length adjust the arrow length to 1/3 of line length

    double usedArrowLength;
    if (lineLength * _maxArrowLengthPercent < defaultArrowLength)
        usedArrowLength = lineLength * _maxArrowLengthPercent;
    else
        usedArrowLength = defaultArrowLength;

    // Adjust arrow thickness for very thick lines
    double arrowWidthFactor;
    if (lineWidth <= 1.5)
        arrowWidthFactor = 3;
    else if (lineWidth <= 2.66)
        arrowWidthFactor = 4;
    else
        arrowWidthFactor = 1.5 * lineWidth;

    Vector arrowWidthVector = normalizedlineWidenVector * arrowWidthFactor;


    // Now we have all the vectors so we can create the arrow shape positions
    var pointCollection = new PointCollection(7);

    Point endArrowCenterPosition = endPoint - (normalizedDirection * usedArrowLength);

    pointCollection.Add(endPoint); // Start with tip of the arrow
    pointCollection.Add(endArrowCenterPosition + arrowWidthVector);
    pointCollection.Add(endArrowCenterPosition + lineWidenVector);
    pointCollection.Add(startPoint + lineWidenVector);
    pointCollection.Add(startPoint - lineWidenVector);
    pointCollection.Add(endArrowCenterPosition - lineWidenVector);
    pointCollection.Add(endArrowCenterPosition - arrowWidthVector);

    return pointCollection;
}

You can than easily create the line shape with the following code:

var points = CreateLineWithArrowPointCollection(new Point(0, 0), new Point(200, 100), 5);

var polygon = new Polygon();
polygon.Points = points;
polygon.Fill = Brushes.Red;

RootCanvas.Children.Add(polygon);

The code also supports shortening the arrows for short lines.

How to draw an arrow in WPF programatically?

2 Answers2

Linked