RotateTransform
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Rotates an object clockwise about a specified point in a two-dimensional x-y coordinate system.
<RotateTransform .../>
Remarks
A RotateTransform object is defined by the following properties: Angle rotates an object by a specified angle about the point CenterX,CenterY.
When you use a RotateTransform, the transformation rotates the coordinate system for a particular object about the point (0,0). Therefore, depending on the position of the object, it might not rotate in place (around its center). For example, if an object is positioned 200 units from 0 along the x-axis, a rotation of 30 degrees can swing the object 30 degrees along a circle that has a radius of 200, which is drawn around the origin. To rotate an object in place, set the CenterX and CenterY values of the RotateTransform to the center of the object to rotate.
You can offset the local (0,0) position for an object on a Canvas by using the Canvas.Left and Canvas.Top properties, but this does not count as a transform; the object retains its own local (0,0) position in this case for transform purposes.
You can apply multiple transforms with a TransformGroup object.
For more information on basic concepts, see Transforms. Note that the Transforms topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.
Example
Transforms can alter the display of text in your application to create a decorative effect. The following illustration shows text rotated 90 degrees by using a RotateTransform.
TextBlock using a RotateTransform
.png "Diagram showing rotated text.")
The following example uses a RotateTransform to rotate text. An Angle property value of 90 rotates the element 90 degrees clockwise.
<!-- Rotate the text 90 degrees by using a RotateTransform. -->
<TextBlock Text="Rotated Text" FontSize="32" Foreground="Teal">
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
The following example shows how to increase the Angle property value applied to a Rectangle every time the Rectangle is clicked.
<Canvas
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200">
<Rectangle MouseLeftButtonDown="handleMouseButtonDown"
Width="50" Height="50"
Fill="RoyalBlue">
<Rectangle.RenderTransform>
<!-- If you give the transform a name, you can access it easily
from code. -->
<RotateTransform x:Name="myRotateTransform" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
function handleMouseButtonDown(sender, mouseEventArgs)
{
// Retrieve a reference to the RotateTransform object.
var rotateTransform = sender.findName("myRotateTransform");
// Increase the Angle property value.
rotateTransform.Angle = rotateTransform.Angle + 15;
}