CODEWITHSUNDEEP
wpfxaml
user1175338
user1175338

Reputation: 79

xaml path data for arrow

I have trying to draw simple "up" arrow by this code:

    <Canvas Width="500" Height="500">
            <Path Height="120" Width="120" StrokeThickness="1" Stroke="Red" Data="M 60,60 L 60,0 L 50,10 L 60,0 L 70,10"/>         
    </Canvas>

And I don't see symmetric arrow on my screen.

I want to understand this "magic".

Upvotes: 2

Views: 3020

Answers (1)

Stewbob
Stewbob

Reputation: 16899

You have created a Path that is 120x120. Coordinate 0,0 is the upper-left corner.

M 60, 60 -> Move to the very center of the Path object x=60,y=60

L 60,0 -> Draw a Line from the last coordinate (60,60) to x=60,y=0 (straight up)

L 50,10 -> Draw a Line from the last coordinate (60,0) to x=50,y=10 (to the left 10 and down 10)

L 60, 0 -> Draw a Line from the last coordinate (50,10) to x=60, y=0 (retrace your line up and to the right by 10 each)

L 70,10 -> Draw a Line from the last coordinate (60,0) to x=70,y=10 ( to right 10 and down 10)

enter image description here

The reason that it is not symmetrical is because you are backtracking along the left arm of the arrow. This adds a join at that point, and essentially adds more to the line there because of your stroke thickness.

You can fix that like this:

        <Path Height="120" Width="120"
                    StrokeThickness="1" Stroke="Red" Data="M 60,60 L 60,0 L 50,10 M60,0 L70,10"/>

enter image description here

Upvotes: 7

Related Questions