(29): Silverlight 2 uses transform to achieve more dazzling results (on)

Summary 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. To understand the first part of transformations in Silverlight, four basic transformations are provided 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. Rotatetransform allows us to rotate an element around a point-to-point element at a given angle. By default, it rotates around the point (0, 0) in the upper left corner. You can use the rendertransform attribute of the element to specify the transform. In the following example, we place two images in the same position and rotate one of them:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="160" Canvas.Top="20" Opacity="0.5">    </Image>    <Image Source="a1.png" Canvas.Left="160" Canvas.Top="20">        <Image.RenderTransform>            <RotateTransform Angle="45"></RotateTransform>        </Image.RenderTransform>    </Image></Canvas>

After running, it will rotate the 45 ° angle around (0, 0): if we want to specify the rotation point, we can control it through the attributes centerx and centery, as shown in the following code:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="160" Canvas.Top="80" Opacity="0.5">    </Image>    <Image Source="a1.png" Canvas.Left="160" Canvas.Top="80">        <Image.RenderTransform>            <RotateTransform Angle="45" CenterX="120" CenterY="68"></RotateTransform>        </Image.RenderTransform>    </Image></Canvas>

After running, we can see that the image center is rotated 45 °: scaletransform. scaletransform allows us to scale the elements, the scalex and scaley attributes are used to specify the zooming ratio on the X and Y axes respectively. You can also use the attributes centerx and centery to specify the zooming center. Example:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="40" Canvas.Top="80" Opacity="0.5">    </Image>    <Image Source="a1.png" Canvas.Left="40" Canvas.Top="80">        <Image.RenderTransform>            <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>        </Image.RenderTransform>    </Image>        <Image Source="a1.png" Canvas.Left="320" Canvas.Top="80" Opacity="0.5">    </Image>    <Image Source="a1.png" Canvas.Left="320" Canvas.Top="80">        <Image.RenderTransform>            <ScaleTransform ScaleX="0.5" ScaleY="0.5"                            CenterX="120" CenterY="68"></ScaleTransform>        </Image.RenderTransform>    </Image></Canvas>

After the operation, the result is as follows: skewtransform allows us to tilt elements around a certain angle, you can use the anglex and angley attributes to set the tilt angle on the X and Y axes, and centerx and centery to specify a conversion center point. Example:

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="80" Canvas.Top="20" Opacity="0.5">    </Image>    <Image Source="a1.png" Canvas.Left="80" Canvas.Top="20">        <Image.RenderTransform>            <SkewTransform AngleX="30" AngleY="30"></SkewTransform>        </Image.RenderTransform>    </Image></Canvas>

The following figure shows the effect after running: translatetransform allows us to move elements at certain positions on the X and Y axes by specifying the attributes X and Y, the following example shows how to move and transform images and text to show the shadow effect:

<Canvas background = "# cdfcae"> <Image Source = "a1.png" canvas. left = "80" canvas. top = "80" opacity = "0.5"> </image> <Image Source = "a1.png" canvas. left = "80" canvas. top = "80"> <image. rendertransform> <translatetransform x = "-10" Y = "-10"> </translatetransform> </image. rendertransform> </image> <textblock canvas. top = "80" canvas. left = "360" fontweight = "bold" text = "" fontsize = "60" foreground = "# c1c1c1"> <textblock. rendertransform> <translatetransform x = "5" Y = "5"> </translatetransform> </textblock. rendertransform> </textblock> <textblock canvas. top = "80" canvas. left = "360" fontweight = "bold" text = "" fontsize = "60" foreground = "# ff0000"> </textblock> </canvas>

After the operation, the effect is as follows: transformgroup actually combines several transformations, which is relatively simple to use, the final effect depends on the aesthetics of each person. The following is an 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>            <TransformGroup>                <RotateTransform Angle="5"></RotateTransform>                <SkewTransform AngleX="5" AngleY="5"></SkewTransform>            </TransformGroup>        </Image.RenderTransform>    </Image>    <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50">        <Image.RenderTransform>            <TransformGroup>                <RotateTransform Angle="10"></RotateTransform>                <SkewTransform AngleX="10" AngleY="10"></SkewTransform>            </TransformGroup>        </Image.RenderTransform>    </Image></Canvas>

The effect after running is as follows: Conclusion This article introduces four basic transformations and Transformation Groups in Silverlight.

This article is from the "terrylee technology column" blog, please be sure to keep this source http://terrylee.blog.51cto.com/342737/67281

This article is from 51cto. com technical blog