Silverlight games on Win Phone: Rotate that triangle, simply


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:


Which could be rewritten (either way is valid):

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

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"/>



  • 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”.

Comments (0)