Silverlight 4.0 Games: Rotating the triangle using C# and XAML

Article
06/14/2010

Share this post :

Ok, from the previous blog post, we discussed the use of the UIElement RenderTransform in XAML, but why did we bother? This is part of the process of connecting the XAML based UI object with the “Code Behind”. As you can tell from the Visual Studio 2010 (or earlier versions), that there is a “Page” xaml and a C# (or Visual Basic), you might conclude that there is a connection between the two. You would be right.

The code, in triangle.cs for instance, looks like the following (you cut and pasted this into the Triangle.CS from an earlier blog entry):

Reviewing the code from triangle.cs:

Note that there is only one “using”, I removed the extra “using”, through this process by:

Right clicking the design surface
Select Organize Usings
Then Remove Unused Usings:

(See image below)

//Start code using System.Windows.Controls;

namespace Geometry { public partial class Triangle : UserControl { public Triangle() { InitializeComponent(); } public double RotationAngle { get { return rotateTransform.Angle; } set { rotateTransform.Angle = value; } } } } //End Code

The C# code is connected to the XAML code by the use of the RenderTransform, the x:Name :”rotateTransform”:

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

Then the User Interface .RenderTransform’s class RotateTransform has a number of classes, structures and fields, one of which is “Angle”, via the use of properties, the developer can treat “Angle” the same way that they would a variable. Also, in many cases the use of properties assists with making your code more secure.

In the method in Triangle.cs named: RotationAngle, uses a property to change a method call (or pair of calls) to look like a field. When you are using a property, there is a “get accessor” and a “set accessor”. The use of properties isn’t required, but it makes code more secure and easier for developers to use.

In the case of our code in the blog entry Silverlight Game: Let’s get started, simply, in the MainPage.cs code the method Update, uses the properties in the following manner. Note that the code is easy to read and utilize.

void Update()
        {
            Triangle.RotationAngle = Triangle.RotationAngle + 15;
        }

If you simply wanted to increment the Triangle.RotationAngle by one you could write:

void Update()
        {
            Triangle.RotationAngle += Triangle.RotationAngle;
        }

Now the issue becomes: “How do I control the triangle?” The use of the storyboard is one way, but is there a better way?

So what have we learned in this posting?

How to communicate with the XAML user interface in the C# code
How to use property get accessors and set accessors
How to use the property elsewhere in your silverlight project

The Triangle.cs contained the property
MainPage.XAML consumed the property

How to increment the rotation angle by a number different than 1 and by 1

Next: Storyboards versus Timer

Share via

Silverlight 4.0 Games: Rotating the triangle using C# and XAML

Additional resources