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:
- RenderTransform is used to either
- Get or Set of a UI Element
- Get AND Set a UI Element presentation
- 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)
- How to use the Angle property
- How to use the CenterX and CenterY properties
In the next entry, we will utilize the RotateTransform in the “Code Behind”.