Drawing arrow with XAML

Question

I don't know how can I draw an arrow with XAML. I haven't any code at the moment.

Someone can help me to make this draw with XAML code ?

Thank you for your help.

Candis

I have searched on Google but I haven't found anything – Candis

@Alexander I googled it. I came to this page just to read your comment. See the problem here? – Hm

Answer 1

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

Washhouse

Answer 2

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:

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>

Flavio

If someone could show how to manipulate this example of drawing an arrow from C# code, that would be awesome. That is, manipulate the length and rotation. Or better yet, create a method that passes two point pairs and draws the arrow where the one point pair is the tail and the other point pair is the tip of the arrow head. – Helminthology

Answer 3

For a simple arrow, here's a trick using just a pair of lines. The first line is the main shaft of the arrow, the second is a zero-length line which forms the arrowhead. The shaft has no caps, and the arrowhead is purely a cap. The whole arrow can be rotated by rotating the enclosing canvas, which I find useful.

<Canvas Width="75" Height="50">
    <Line X1="0" Y1="25" X2="55" Y2="25" Stroke="#ffffff" StrokeThickness="20"/>
    <Line X1="50" Y1="25" X2="50" Y2="25" Stroke="#ffffff" StrokeThickness="50" StrokeEndLineCap="Triangle"/>
</Canvas>

Unclinch

Answer 4

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:

(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).

Galleywest