How to: Rotate an Object

This example shows how to rotate an object. The example first creates a RotateTransform and then specifies its Angle in degrees.

The following example rotates a Polyline object 45 degrees about its upper-left corner.

<Canvas Height="200" Width="200">

  <!-- Rotates the Polyline 45 degrees about the point (0,0). -->
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
    Stroke="Blue" StrokeThickness="10"
    Canvas.Left="75" Canvas.Top="50">
    <Polyline.RenderTransform>
      <RotateTransform CenterX="0" CenterY="0" Angle="45" />
    </Polyline.RenderTransform>
  </Polyline>
</Canvas>
			' Create a Polyline.
			Dim polyline1 As New Polyline()
			polyline1.Points.Add(New Point(25, 25))
			polyline1.Points.Add(New Point(0, 50))
			polyline1.Points.Add(New Point(25, 75))
			polyline1.Points.Add(New Point(50, 50))
			polyline1.Points.Add(New Point(25, 25))
			polyline1.Points.Add(New Point(25, 0))
			polyline1.Stroke = Brushes.Blue
			polyline1.StrokeThickness = 10

			' Create a RotateTransform to rotate
			' the Polyline 45 degrees about its
			' top-left corner.
			Dim rotateTransform1 As New RotateTransform(45)
			polyline1.RenderTransform = rotateTransform1

			' Create a Canvas to contain the Polyline.
			Dim canvas1 As New Canvas()
			canvas1.Width = 200
			canvas1.Height = 200
			Canvas.SetLeft(polyline1, 75)
			Canvas.SetTop(polyline1, 50)
			canvas1.Children.Add(polyline1)

The CenterX and CenterY properties of the RotateTransform specify the point about which the object is rotated. This center point is expressed in the coordinate space of the element that is transformed. By default, the rotation is applied to (0,0), which is the upper-left corner of the object to transform.

The next example rotates a Polyline object clockwise 45 degrees about the point (25,50).

<Canvas Height="200" Width="200">

  <!-- Rotates the Polyline 45 degrees about the point (25,50). -->
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
    Stroke="Blue" StrokeThickness="10"
    Canvas.Left="75" Canvas.Top="50">
    <Polyline.RenderTransform>
      <RotateTransform CenterX="25" CenterY="50" Angle="45" />
    </Polyline.RenderTransform>
  </Polyline>
</Canvas>
			' Create a Polyline.
			Dim polyline2 As New Polyline()
			polyline2.Points = polyline1.Points
			polyline2.Stroke = Brushes.Blue
			polyline2.StrokeThickness = 10

			' Create a RotateTransform to rotate
			' the Polyline 45 degrees about the
			' point (25,50).
			Dim rotateTransform2 As New RotateTransform(45)
			rotateTransform2.CenterX = 25
			rotateTransform2.CenterY = 50
			polyline2.RenderTransform = rotateTransform2

			' Create a Canvas to contain the Polyline.
			Dim canvas2 As New Canvas()
			canvas2.Width = 200
			canvas2.Height = 200
			Canvas.SetLeft(polyline2, 75)
			Canvas.SetTop(polyline2, 50)
			canvas2.Children.Add(polyline2)

The following illustration shows the results of applying a Transform to the two objects.

Two objects that rotate 45 degrees from different rotational centers

45 degree rotations with different center points

The Polyline in the previous examples is a UIElement. When you apply a Transform to the RenderTransform property of a UIElement, you can use the RenderTransformOrigin property to specify an origin for every Transform that you apply to the element. Because the RenderTransformOrigin property uses relative coordinates, you can apply a transformation to the center of the element even if you do not know its size. For more information and for an example, see How to: Specify the Origin of a Transform by Using Relative Values.

For the complete sample, see 2-D Transforms Sample.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft