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