MSDN Magazine - August 2008 - (Page 70)

Moving an Object with the TranslateTransform Property A translation is a transform that moves an object in a two-dimensional plane from one position to another. It is defined by setting up vectors that deFigure 3 Using the TranslateTransform Property fine the object’s motion along its x- and y-axes. These are set using the X and Y properties on the transform. To move an item two units horizontally (meaning it will move to the right), you set the X property to 2. To move it to the left, use a negative value, such as -2. Similarly, to move an object vertically, you would use the Y property, and positive values will cause the object to move down the screen, whereas negative values will move it up the screen. Here’s an example of a translate transform that moves the position of the red rectangle that we’ve been looking at by specifying X and Y values that move it Figure 4 Skewing the Rectangle with up and to the left. These values effec- SkewTransform tively make up a vector that determines the transform: You can see the result in Figure 4. Skewing is useful for simulating threedimensional effects in graphics. For example, you can apply SkewTransform to three adjacent rectangles—two skewed on the x-axis and one on the y-axis—to create an illusion of a three-dimensional perspective (see Figure 5). Define Transforms with MatrixTransform All transformations, at their heart, are performed by multiplying the coordinate space of the object by a transformation matrix. Each of the transforms that you’ve seen so far is a well-known and well-defined transform. Matrix mathematics and how transforms are implemented are beyond the scope of this article, but for the sake of syntactic completeness, I’ll look at how you can define them in Silverlight XAML. Note that the matrix used in the MatrixTransform is an affine matrix, which means that the bottom row of the matrix is always set to (0 0 1), and as such you set only the first two columns. These are set using the transform’s Matrix property, which takes a string containing the first two rows of values separated by spaces: See the results of this in Figure 3. The rectangle has moved upward and to the left relative to its specified position, as compared to the position of the rectangle in Figure 2. Skewing an Object with the SkewTransform Property Skewing an object involves changing it Figure 5 Simulating Perspective with Three in a progressive, uniform manner along Skewed Rectangles Combining Transformations an axis. This has the effect of turning a As you saw in the previous example, square or rectangle into a parallelogram. This visual effect is useful you can create a complex transformation by using a transformain creating the illusion of depth on a two-dimensional surface. tion affine matrix and specifying that using the MatrixTransform You can apply a skew at a certain angle on either the x- or y-axis type. However, if you aren’t an expert in matrix mathematics, anand around a center point. These can, of course, be combined so other technique for using transforms is to combine them by means that you can skew on both axes at the same time. The following of the TransformGroup element. This simply allows you to specify XAML skews our rectangle on the x-axis by 45 degrees: multiple transforms, and the combined effect of each will be ap <Rectangle Fill="#FFFF0404" Stroke="#FF000000" The impact of the transform using this matrix is to render a combined stretched and skewed rectangle. 70 msdn magazine Silverlight

Table of Contents Feed for the Digital Edition of MSDN Magazine - August 2008

MSDN Magazine - August 2008 Toolbox CLR Inside Out Basic Instincts Cutting Edge Patterns in Practice Data 2.0 - Expose And Consume Data In A Web Services World Biztalk EDI - Build A Robust EDI Solution With BizTalk Server Silverlight - Create Animations With XAML And Expression Blend Write On! - Create Web Apps You Can Draw On With Silverlight 2 Wicked Code - Craft Custom Controls For Silverlight 2 Team System Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - August 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.