CODEWITHSUNDEEP
wpfxamlgeometryshapes
manav inder
manav inder

Reputation: 3601

Mystery of Points in XAML

enter image description here

I am trying to create a polygon using points in xaml and as per my understanding the output with the given points should be the triangle with black fill, but it return the triangle with pink fill. I am not getting how this is happening. Kindly let me know.

Tha xaml for this is 

  <Polygon Width="237"
             Height="214"
             Fill="White"
             Stroke="Black"
             StrokeThickness="2">
        <Polygon.Points>
            <Point X="50" Y="50" />
            <Point X="150" Y="150" />
            <Point X="50" Y="150" />

        </Polygon.Points>
    </Polygon>

Upvotes: 11

Views: 14239

Answers (3)

G.Y
G.Y

Reputation: 6159

<Point X="50" Y="150" /> is wrong location - that's all.

should be: <Point X="150" Y="50" />

Simple X Y interchange mistake, there is nothing wrong with your understanding.

Upvotes: 1

Jehof
Jehof

Reputation: 35544

The Point X=0 and Y=0 is in the upper left corner, not in the lower left corner. So the drawing is correct.

To get what you want is to change your xaml as follows:

<Polygon Width="237"
         Height="214"
         Fill="Black"
         Stroke="White"
         StrokeThickness="2">
    <Polygon.Points>
        <Point X="50" Y="150" />
        <Point X="150" Y="150" />
        <Point X="150" Y="50" />

    </Polygon.Points>
<Polygon>

Upvotes: 9

Rachel
Rachel

Reputation: 132588

The point system is the same one used in a Canvas, where 0,0 is the top left corner

For example, the point 50,50 is like saying Canvas.Left="50" and Canvas.Top="50"

To get the shape you want, you need to adjust the points so they read from the top-left instead of the bottom-left.

<Polygon Width="237"
         Height="214"
         Fill="White"
         Stroke="Black"
         StrokeThickness="2">
    <Polygon.Points>
        <Point X="50" Y="50" />
        <Point X="150" Y="50" />
        <Point X="150" Y="150" />
    </Polygon.Points>
</Polygon>

Upvotes: 3

Related Questions