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

Answer 1

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.

Answer 2

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 3

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"&gt;
    <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.