How to rotate shape in XAML

 
The Transform class provides the means to transform shapes in a two-dimensional plane.

A common transform to apply to a shape is a rotation. To rotate a shape, create a RotateTransform and specify its Angle. An Angle of 45 rotates the element 45 degrees clockwise; an angle of 90 rotates the element 90 degrees clockwise; and so on. Set the CenterX and CenterY properties if you want to control the point about which the element is rotated. These property values are expressed in the coordinate space of the element being transformed. CenterX and CenterY have default values of zero. Finally, apply the RotateTransform to the element. If you don’t want the transform to affect layout, set the shape’s RenderTransform property.

In the following example, a RotateTransform is used to rotate a shape 45 degrees about the shape’s upper corner (60,10).

Picture 1.1

Picture 1.2

Picture 1.3

Draw a triangle

see Picture 1.1

    <Grid Height="153" Name="Grid1" Width="331">
        <Polygon Points="10,110 60,10 110,110" Fill="SkyBlue" Margin="97,12,121,20">
        </Polygon>
   </Grid>

Rotates the triangle 45 degrees about the point (60,10).

see Picture 1.2

    <Grid Height="153" Name="Grid1" Width="331">
         <Polygon Points="10,110 60,10 110,110" Fill="darkblue" Margin="97,12,121,20">
            <Polygon.RenderTransform>
                <RotateTransform CenterX="60" CenterY="10" Angle="45" />
            </Polygon.RenderTransform>
        </Polygon>
    </Grid>

Rotates the triangle 45 degrees about its center.

see Picture 1.3

  <Grid Height="153" Name="Grid1" Width="331">
       <Polygon Points="10,110 60,10 110,110" Fill="Blue" Canvas.Left="109" Margin="97,12,121,20"
                     Canvas.Top="12"  RenderTransformOrigin="0.5,0.5">
            <Polygon.RenderTransform>
                <RotateTransform Angle="45" />
            </Polygon.RenderTransform>
        </Polygon>
    </Grid>