WPF Canvas.Left / Canvas.Top are not quite the right coordinates when rotated, why?

Question

I have a weird but big problem. I am trying to let the user move / rotate some Rectangles on a Canvas. I am basing my mechanism on manipulating Canvas.Left / Canvas.Top properties for move, and RenderTransform.Rotate for rotation. I only need rotation on 0/90/180/270 angles.

The problem is that a rectangle, which is placed at coordinates 0.0 on a 0 angle rotation shows ok, but the same rectangle at 0.0 with 90 angle rotation shows the element at other coordinates than 0.0. As I see, the coordinates are always right in the case the rotation is 0 or 180, but wrong in the case of 90 / 270. The differencee between what coordinates are set and what the user sees, is related to the difference between the Height and Width.

Has anyone run into this sort of problem before?

Thank you, Daniell

edit:

Sure, here is some xaml:

    <Canvas 
        Height="500" 
        Width="500"
        Background="Green"

        <Rectangle 
            Canvas.Left="0" 
            Canvas.Top="0"
            Height="50"
            Width="100"
            RenderTransformOrigin="0.5,0.5"
            Fill="Red"

            <Rectangle.RenderTransform>
                <RotateTransform 
                Angle="90"
                />
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle 
            Canvas.Left="0" 
            Canvas.Top="0"
            Height="50"
            Width="100"
            RenderTransformOrigin="0.5,0.5"
            Fill="RoyalBlue"

            <Rectangle.RenderTransform>
                <RotateTransform 
                Angle="0"
                />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas> 
</Grid>

as you can see, the blue rectangle seems correctly placed (0,0) but the red one shows at different coordinates, even if it returns stil 0,0.

I have found that the Formula:

displayPointX = Canvas.Left + height /2 - width / 2

diaplayPointY = Canvas.Top + height /2 - width/2

Answer 1

The behavior you describe occurs under the following conditions:

1. Your canvas is non-rectangular,
2. You have a RenderTransformOrigin of "0.5,0.5" and
3. You use a RotateTransform for your RenderTransform

The reason you are seeing it is because a rectangle rotated 180 degrees around its center has exactly the same bounds, but a rectangle rotated 90 or 270 degrees does not. Picture a wide but skinny rectangle rotating and you can easily see this is so.

When you rotate 90 or 270 degrees your corners no longer match up with the container.

Many solutions are available:

• Make the container exactly square
• Change the size of your canvas (flip the width and height) at 90 and 270 rotations
• Combine a ScaleTransform with your RotateTransform that scales the canvas by w/h in one direction and h/w whenever rotation is at 90 or 270 degrees so the canvas is stretched to fit the new rectangle
• Add a TranslateTransform to your RotateTransform that shifts the coordinate system by w-h and h-w whenever rotation is at 90 or 270 degrees
• Calculate a new RenderTransformOrigin to make the corner come out where you want it

Answer 2

Daniell, what everyone is telling you is correct. If you have a Rectangle, and you set the origin to 0.5, 0.5, that means "rotate about the centroid of this object", so if you rotate 90 or 270 degrees, of course it'll look exactly like what you see.

If you want the rectangle to rotate 90 degrees and still end up in the upper left corner, you either have to rotate 90, then translate in X and Y to get the corner to match up with 0,0, or you need to rotate about a different center (like 0,0), and translate only in X.

Here's an example:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Height="500" Width="500" Background="Green">
        <Rectangle Canvas.Left="0" Canvas.Top="0" Height="50" Width="100" RenderTransformOrigin="0.5,0.5" Fill="Red">
            <Rectangle.RenderTransform>
              <TransformGroup>
                <RotateTransform Angle="90" />
                <TranslateTransform X="-25" Y="25" />
              </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Canvas.Left="0" Canvas.Top="0" Height="50" Width="100" RenderTransformOrigin="0.5,0.5" Fill="RoyalBlue">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas> 
</Page>

Perhaps it would be best if you explained what you were really trying to do with this. It's also weird that you say that 0 and 180 are great because the corner matches up with 0,0, but then your shape is rotated, and we don't know if preservation of orientation is important to you or not.

Answer 3

The reason the coordinates are changing is because the coordinate system of a canvas rotates with the canvas.

http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.aspx states:

When you use a RotateTransform, realize that the transformation rotates the coordinate system for a particular object about the point (0, 0).

Presuming you are rotating about the centroid of a square, when you're rotated 90 degrees (clockwise, the direction RotateTransform considers positive), (0,0) refers to the upper right corner on the screen, for 180 it refers to the lower right corner, for 270 it refers to the bottom left corner, and at 0 it refers, as expected, to the upper left corner.