Blog

XAML Transforms: Avoiding Absolute Coordinates

By Ken Getz

Rotate shapes

You can solve many drawing issues using a transform-that is, a class that alters the way the shape is drawn using mathematical manipulations. You can use the two-dimensional Transform classes to rotate, skew, scale, and move (or translate) objects. In technical terms, a transform defines how to map, or transform, points from one coordinate space to another coordinate space.

If you need to set the CenterX and CenterY coordinates in order to correctly rotate or scale a shape, you require absolute coordinates which can be tricky to calculate. This article discusses how to avoid this situation.

Avoiding Absolute Coordinates

If you can perform the transform using coordinates relative to the shape itself, you can use the RenderTransformOrigin property of the Path (or other shape). The Figure below shows the result of the following markup, which creates five Rectangle shapes and rotates the shapes around their origin (the default behavior for the RotateTransform element):

<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-20" />
 </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-40" />
 </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-60" />
 </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-80" />
 </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-100" />
 </Rectangle.RenderTransform>
</Rectangle>

Because the markup didn't specify the origin for the rotation, the rectanglesrotate around their origin, (0, 0). A modified version of this sample, shown in the Figure below, adds the RenderTransformOrigin property to each Rectangle, indicating that the center for the rotation should be (0.5, 0.5). Because the coordinate system for this property is (0,0) at the upper-left corner and (1, 1) at the lower-right corner of the shape, (0.5, 0.5) represents the center of the shape. The following markup demonstrates the change to a single Rectanglethat creates the output shown in the Figure below:

<Rectangle Width="15" Height="100"
Stroke="Black" Fill="AliceBlue"
Canvas.Left="80" Canvas.Top="80"
RenderTransformOrigin="0.5, 0.5">
 <Rectangle.RenderTransform>
<RotateTransform Angle="-20" />
 </Rectangle.RenderTransform>
</Rectangle>
Rotate around the center

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.



Ken Getz
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This blog entry was originally posted February 05, 2013 by Ken Getz

XAML Windows 8