Share via

Silverlight games on Win Phone: Rotate that triangle, simply

  • Article

 

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