One-step learning of Silverlight 2 series (30): use Transform to achieve more dazzling results (below)

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

This article provides four basic transformations in Silverlight: RotateTransform, ScaleTransform, and SkewTransform) translateTransform and two complex transformations: TransformGroup and MatrixTransform. These transformations can be applied to any control or graphic image.

MatrixTransform)

Matrix Transformation MatrixTransform is the most powerful, flexible, and complex transformation in all transformations. If the basic changes described earlier cannot meet our actual development needs, you can use matrix transformations for custom operations, which allow us to operate the transformation matrix directly.

In Silverlight, transformation provides a 3*3 matrix. we modify the values of the members in the Matrix to implement transformation. The definition of the matrix is as follows:

For example, if you modify OffsetX, the element will be moved on the X axis. If you modify OffsetY, the element will be moved on the Y axis. If you change M22 to 2, the height of the element will be stretched twice, with this matrix, we can implement all the functions of the basic transformations mentioned above. For more detailed explanations, refer to the SDK. In the following example, we use matrix transformation to achieve the transformation effect in the previous example:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" Opacity="0.3">    </Image>    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" 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="120" Canvas.Top="50">        <Image.RenderTransform>            <MatrixTransform>                <MatrixTransform.Matrix>                    <Matrix OffsetX="0" OffsetY="0" M12="0.4"></Matrix>                </MatrixTransform.Matrix>            </MatrixTransform>        </Image.RenderTransform>    </Image></Canvas>

The effect after running is as follows:

Implement animation Transformation

The combination of Transform and Storyboard in Silverlight can easily achieve the animation transformation effect. In the following example, when the mouse is placed up, the image starts to rotate; when the mouse leaves, it stops rotating:

<Canvas Background="#CDFCAE">    <Canvas.Resources>        <Storyboard x:Name="myStoryboard">            <DoubleAnimation          Storyboard.TargetName="myTransform"          Storyboard.TargetProperty="Angle"          From="0" To="180" Duration="0:0:5" RepeatBehavior="Forever" />        </Storyboard>    </Canvas.Resources>    <Image x:Name="imgTarget" Source="a1.png" Canvas.Left="180" Canvas.Top="80"           MouseEnter="imgTarget_MouseEnter" MouseLeave="imgTarget_MouseLeave">        <Image.RenderTransform>            <RotateTransform x:Name="myTransform" Angle="15" CenterX="120" CenterY="68" />        </Image.RenderTransform>    </Image></Canvas>

Control Storyboard in code:

private void imgTarget_MouseEnter(object sender, MouseEventArgs e){    myStoryboard.Begin();}private void imgTarget_MouseLeave(object sender, MouseEventArgs e){    myStoryboard.Stop();}

The effect after running is as follows:

After the mouse is placed, it starts to rotate:

Use code to Control Transformation

This topic is actually nothing to mention. It controls the Transform in the background code. In the following example, each time you click an image, the RotateTransform angle is increased by 15 degrees:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="180" Canvas.Top="80" Opacity="0.3">    </Image>    <Image x:Name="imgTarget" Source="a1.png" Canvas.Left="180" Canvas.Top="80"           MouseLeftButtonDown="imgTarget_MouseLeftButtonDown">        <Image.RenderTransform>            <RotateTransform x:Name="myTransform" Angle="0" CenterX="120" CenterY="68" />        </Image.RenderTransform>    </Image></Canvas>

Background code:

private void imgTarget_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){    myTransform.Angle = myTransform.Angle + 15;}

The starting interface after running is as follows:

After clicking the button, it will rotate:

Conclusion

This article introduces the matrix transformation, how to implement the animation transformation, and how to control the transformation in the code, next, I will use the previous articles on image processing to write a comprehensive example.