Rotating the triangle, how in the heck does that work?  Simple.  Really.  Simple.

On the UserControl canvas, in this case triangle.xaml, you will see this XAML code:

<Canvas.RenderTransform>
<RotateTransform
x:Name="rotateTransform"
Angle="0"/>
</Canvas.RenderTransform>

Which could be rewritten (either way is valid):

<Canvas.RenderTransform>
<RotateTransform x:Name="rotateTransform" Angle="0"/>
</Canvas.RenderTransform>

The triangle that was discussed in the previous blog: “Silverlight Game: Talking about what we did simply – Path Data”,  where the Path Data creates a triangle.

The UIElement .RenderTransform transforms the triangle presentation by getting and setting (in this case) the transform information that affects the rendering position of this triangle element.

The UIElement .RenderTransform uses a class named  RotateTransform, which  rotates an object clockwise about a specified point in a 2-D x-y coordinate system.   Keep in mind that a UserControl is a small canvas, in this case the Width is 26 and Height is 40, so the triangle rotates around it’s origin and starts with a zero angle.  Why did I write it this way?  Not sure, I could have written it this way:

<RotateTransform x:Name="rotateTransform" CenterX="0" CenterY="0"/>

or

<RotateTransform
x:Name="rotateTransform"
CenterX="0"
CenterY="0"/>

• This center point (CenterX and CenterY) 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.
• In this case that is our Phone Application User Control, not the MainPage.xaml

What did we learn in this blog:

1. RenderTransform is used to either
• Get or Set of a UI Element
• Get AND Set a UI Element presentation
2. RotateTransform is a class that rotates an object clockwise about a specified point in a 2-D x-y coordinate (if a positive number is used, negative will get you a counter-rotation)
3. How to use the Angle property
4. How to use the CenterX and CenterY properties

In the next entry, we will utilize the RotateTransform in the “Code Behind”.