This tutorial will cover drawing an object on a Canvas and moving it around, rotating it, as well as a few other basic operations. The source can be downloaded here. An online demo on our test server can be found here
This demo has been updated to Silverlight 2.0!
We made a new Silverlight user control (Xcam) to add to a blank project.
The object we chose to use is a camera. We want to be able to perform the following functions with it:
1. Define the camera in xaml
2. pick it up, put it down
3. Move it
4. Rotate it
1: Define the camera in xaml:
The Camera is defined as a canvas. We also want to make a light above it, that moves with it to clearly show where the camera is pointing. The light is functionless. The camera will also have a rotater icon below it, detailed later.
2: Picking it up and putting it down, we need to change it’s scale. We will go over the core for just picking up the object. Putting it down is very similar.
First we should give our XCam.xaml’s main canvas the ability to change the Camera’s Rendering properties. Although it is not used in this tutorial, if we are performing multiple transformations on an item at one time, it is much easier to define in xaml than getting and modifying the RenderTransfrom properties in code.
<XCam.xml>
4: Rotating the camera,
Before we can proceed, we should add a rotater icon below the camera. It’s only visible when you need it, but we won’t go into removing it and adding it. You can download the code and take a look at that. We will add it as an ellipse, and so it’s wired up to the same mouse events as the Camera canvas, we just check the sender type in the callbacks to see if we are rotating or moving the camera.
We also need to get the angle in degrees, and set our xaml define RotateT with it:
Finally, we must define the center of our camera icon with RotateT, for the actual rotation:
