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


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()
        public double RotationAngle
                return rotateTransform.Angle;
                rotateTransform.Angle = value;
//End Code

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


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?

  1. How to communicate with the XAML user interface in the C# code
  2. How to use property get accessors and set accessors
  3. 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

Comments (0)

Skip to main content