CODEWITHSUNDEEP
xamldrawing
Moussawi
Moussawi

Reputation: 403

Drawing arrow with XAML

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.

Upvotes: 14

Views: 35111

Answers (4)

IanJ
IanJ

Reputation: 484

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>

Upvotes: 3

Nacho
Nacho

Reputation: 962

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

Upvotes: 30

StayOnTarget
StayOnTarget

Reputation: 13007

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

Upvotes: 2

yu yang Jian
yu yang Jian

Reputation: 7171

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>

Upvotes: 19

Related Questions