Learn Silverlight 2 series (30): Use transform to achieve a more dazzling effect (bottom)

This article is to achieve a more dazzling effect using transform. The second part provides four basic transformations in Silverlight: Rotational Transformations (rotatetransform), scaling Transformations (ScaleTransform), Skew Transformations (SkewTransform), moving Transformations (TranslateTransform), and two complex transformations: Transform groups (TransformGroup), Matrix Transformations (MatrixTransform), these transformations can be applied to any control or graphic image.

Matrix transform (MatrixTransform)

Matrix Transform MatrixTransform is one of the most powerful and flexible transformations in all transformations, and if the basic changes explained above do not meet our actual development needs, we can customize it by using matrix transformation, which allows us to manipulate the transformation matrix directly.

In Silverlight, a transform is a matrix that provides a 3*3, we implement transformations by modifying the values of the members in the matrix, and the definition of the matrix is as follows:

If you modify OffsetX, the elements will move on the x-axis, modify the offsety, the elements will move on the y-axis, modify the M22 to 2, and the height of the element will stretch twice times, through which we can implement all the functions of the basic transformations mentioned earlier. For more detailed explanation you can refer to the SDK. As in the following example, we can still implement the transform effect in the previous example by using a matrix transform:

<canvas background= "#CDFCAE" >
<image source= "A1.png" canvas.left= "canvas.top=" opacity= "0.3" >
</Image>
<image source= "A1.png" canvas.left= "canvas.top=" opacity= "0.5" >
<Image.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix>
<matrix offsetx= "0" offsety= "0" m12= "0.2" ></Matrix>
</MatrixTransform.Matrix>
</MatrixTransform>
</Image.RenderTransform>
</Image>
　　
<image source= "A1.png" canvas.left= "canvas.top=" >
<Image.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix>
<matrix offsetx= "0" offsety= "0" m12= "0.4" ></Matrix>
</MatrixTransform.Matrix>
</MatrixTransform>
</Image.RenderTransform>
</Image>
</Canvas>