Blog
XAML Transforms: Avoiding Absolute Coordinates
By Ken Getz | February 05, 2013
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>
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
