Drawing arrow with XAML - 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.

Answer 1

You can use TextBlock (http://xahlee.info/comp/unicode_arrows.html)
<TextBlock Text="➔" />
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

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>

Answer 3

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

Answer 4

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>