Drawing arrow with XAML

You can use TextBlock (http://xahlee.info/comp/unicode_arrows.html)

<TextBlock Text="&#x2794;" />

Or Path (https://msdn.microsoft.com/en-us/library/system.windows.shapes.path%28v=vs.110%29.aspx)

<Path Stroke="Black" Data="M 10 0 L 16 4 L 10 8 M 0 4 L 16 4" />

Maybe this tool can be useful to you PathViewer


I just draw one through setting point by hand and adjust the point by eyes:

<Path Stretch="Fill" Fill="LimeGreen" 
              Data="M
              0,115   95,115   //p1, p2  (when really use remove these comments)
              65,90   85,90    //p3, p4
              120,120          //p5
                      85,150  65,150  //p6, p7
                      95,125  0,125   //p8, p9
              Z"
              HorizontalAlignment="Center"  Width="60" Height="60" />

You can adjust width/height, Basically p1,p2,p3,p4 and p6,p7,p8,p9 are symmetric, and Data can omit description and comma like this:

Data="M 0 115 95 115 65 90 85 90 120 120 85 150 65 150 95 125 0 125 Z"

The result:

enter image description here

Besides here's a way to Rotate the arrow, example below rotate another right arrow 180 degree, becoming a left arrow:

    <Path Stretch="Fill" Fill="LimeGreen" 
          Data="M 0,110 70,110 45,90 75,90 120,120 75,150 45,150 70,130 0,130 Z"
          HorizontalAlignment="Right"  Width="30" Height="24" Margin="0,0,2,0"
          RenderTransformOrigin=".5,.5">
        <Path.RenderTransform>
            <RotateTransform Angle="180" />
        </Path.RenderTransform>
    </Path>

There happens to be a nice third party library which is freely available and may fit some uses cases where arrows are needed as line ends.

The full code is too long to reproduce here, but I've linked to it below. I couldn't find any other repository of this code (e.g. Nuget, Github, etc.)

Article: Lines with Arrows, Charles Petzold, April 18, 2007, New York, N.Y.

Brief excerpt:

The Arrowheads.zip file contains a demo program and two classes named ArrowLine and ArrowPolyline that derive from Shape ...

The ArrowLine class derives from ArrowLineBase and basically duplicates the Line class by defining X1, Y1, X2, and Y2 properties; ArrowPolyline duplicates the Polyline class by defining a Points property.

...

Because the arrows are basically part of the line, they are affected by all the properties that affect the line, such as Stroke, StrokeThickness, StrokeStartLineCap, and StrokeLineJoin. If you set IsArrowClosed to true, the Fill property comes into play; the arrowhead will look most normal if Fill is set to the same brush as Stroke.

The classes mentioned above are controls (written in C#) which can be used from XAML. Simple example:

xmlns:p="clr-namespace:Petzold.Media2D;assembly=Arrowheads"

...
    
<p:ArrowLine
    X1="0"
    Y1="0"
    X2="148"
    Y2="0"
    Canvas.Top="18"
    Canvas.Left="26"
    />

Example output:

enter image description here (http://www.charlespetzold.com/blog/2007/04/Arrowheads.png)

Note that Charles very graciously provides this code to be reused, as stated in his FAQ:

All the code that I write and publish is free to use in your software projects (whether personal or commercial) without restriction.

(the FAQ does mention some restrictions regarding publications so you should read it in full).

Tags:

Xaml

Drawing

Recent Posts