CODEWITHSUNDEEP
xamlpath
Gerard
Gerard

Reputation: 13407

Xaml Path explanation

I am trying to understand the XAML Path language on a Canvas somewhat better.

The documentation gives little introduction, at least I am not directly able to understand the following Path for a Plus sign +.

Path Data="M19,13H 13V 19H 11V 13H 5V 11H 11V 5H 13V 11H 19V 13Z"

Could anybody explain how the contour of the plus sign is drawn using this example?

Then I can go ahead and e.g. make it somewhat larger.

Upvotes: 0

Views: 151

Answers (2)

Gerard
Gerard

Reputation: 13407

Oh I got it. First I have to read it as

M19,13 H13 V19 H11 V13 H5 V11 H11 V5 H13 V11 H19 V13 Z

Capitals mean absolute position relative to the center 0 which is the top-left of the canvas. In this case the subsequent positions on the canvas are

    19,13 -> 13,13 -> 13,19 -> 11,19 -> 11,13 -> 5,13 ->   
    5,11 -> 11,11 -> 11,5 -> 13,5 -> 13,11 -> 19,11 -> 19,13

The width of the line is 2 probably pixels (13 - 11) and the total height/width is 14,
because 19 - 13 = 11 - 5 = 6 so 2 x 6 + 2 = 14.

E.g. by changing 19 to 22 and 5 to 2, the plus sign becomes larger with the same thickness.

Upvotes: 0

mami
mami

Reputation: 606

Did you see this? Explanation of the commands of this mini language:

https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/path-markup-syntax

Your example is: Path Data="M19,13H 13V 19H 11V 13H 5V 11H 11V 5H 13V 11H 19V 13Z".

In your example M indicates the starting point 19,13. Then H draws a horizontal line to coordinate 13 (thus to point [13,13]), then V draws a vertical line to coordinate 19 (to [13,19]) and so on. Z command closes the path.

Upvotes: 1

Related Questions