Silverlight graphics: Transformation

You can use a two-dimensional (2-D) Transform in Silverlight.
Class to rotate, scale proportionally, twist, and move (PAN) objects. The following example illustrates how to rotate and distort a line of text.

XAML

<StackPanel>　
　<TextBlock　FontSize="28"　Text="Hello">　
　　<TextBlock.RenderTransform>　
　　　<TransformGroup>　
　　　　<RotateTransform　Angle="45"　/>　
　　　　<SkewTransform　CenterX="0"　CenterY="0"　AngleX="60"/>　
　　　</TransformGroup>　
　　</TextBlock.RenderTransform>　
　</TextBlock>　
</StackPanel>　
　

What is transformation?

Transform defines how to map points in a coordinate space or Transform them to another coordinate space. This ing is performed by transforming the Matrix (a Double with three rows and three columns ).
Value set.

Note:

Silverlight uses the Line Priority matrix. The vector is represented by a row vector instead of a column vector.

 

The following table shows the structure of the Silverlight matrix.

M11   Default Value: 1.0	M12   Default Value: 0.0	0.0
M21   Default Value: 0.0	M22   Default Value: 1.0	0.0
OffsetX   Default Value: 0.0	OffsetY   Default Value: 0.0	1.0

 

By processing Matrix Values, you can rotate, scale, twist, and move (PAN) Objects proportionally. For example, if you change the value (OffsetX value) in the first column of the third row to 100, you can
X axis moves 100 units. If you change the value in the second column of the Second row to 3, you can stretch an object to three times its current height. If you change two values at the same time, you can move the object 100 along the x axis
Unit and stretch its height to 3 times the original. Because Silverlight only supports affine transformation, the values in the right column are always 0, 0, and 1.

Although Silverlight enables you to directly process matrix values, it also provides many
Class, you can use these classes to transform objects without understanding how to configure the basic matrix structure. For example, using the ScaleTransform class, you can set the ScaleX and
The ScaleY attribute scales objects proportionally without processing the transformation matrix. Similarly, with the RotateTransform class, you only need to set the Angle
Property to rotate the object.

Conversion class

Silverlight provides the following two-dimensional Transform classes for common transformation operations.

Class	Description	Statement
RotateTransform	Rotate the element by the specified Angle.
ScaleTransform	Scale the elements proportionally according to the specified ScaleX and ScaleY.
SkewTransform	Distort elements by the specified AngleX and AngleY.
TranslateTransform	Moves (PAN) elements by the specified X and Y values.

 

To create more complex transformations, Silverlight provides the following two classes.

Class	Description
TransformGroup	Combine multiple TransformGroup objects into a single Transform that can be subsequently applied to Transform attributes.
MatrixTransform	Create custom transformations not provided by other Transform classes. Before using MatrixTransform The matrix is processed directly.

 

Common conversion attributes

One way to Transform an object is to declare an appropriate Transform type and apply it to the object's Transform attributes. Different types of objects have different types of conversion attributes. The following table lists several common
Silverlight type and its conversion attributes.

Type	Transform attributes
Brush	Transform, RelativeTransform
Geometry	Transform
UIElement	RenderTransform

 

Transformation and Coordinate System

When you transform an object, you not only transform an object, but also the coordinate system of the object. By default, the transformation is centered on the origin (0, 0) of the coordinate system of the target object. The only exception is
TranslateTransform, the object does not have the central attribute to be set, because the translation effect is the same no matter where the center is.

The following example uses RotateTransform to rotate the Rectangle element (a UIElement) around its default center (0, 0) by 45
Degree.

XAML

<Grid　x:Name="LayoutRoot"　Background="White">　
　<Rectangle　Width="50"　Height="50"　
　　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　Angle="45"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</Grid>　
　

The rotation effect is displayed.

Rotate a 45-degree rectangular element around a vertex (0, 0)

By default, the element is rotated around the upper left corner (0, 0. RotateTransform, ScaleTransform, and SkewTransform
Class provides CenterX and CenterY attributes, which can be used to specify the application points of the transformation.

The next example also uses RotateTransform to rotate the Rectangle element 45 degrees. However, this time the CenterX and CenterY
So the center of RotateTransform is (25, 25 ).

XAML

<StackPanel>　
　<Rectangle　Width="50"　Height="50"　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　Angle="45"　CenterX="25"　CenterY="25"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

Rotate a 45-degree rectangular element around a point (25, 25)

Animation processing of transformations

Transform objects can be animated. To perform animation processing on Transform, apply compatible types of animations to the attributes you want to perform animation processing.

The following example uses Storyboard and DoubleAnimation together with RotateTransform to enable Rectangle
Rotate in place.

XAML

<StackPanel　Margin="15">　
　<StackPanel.Resources>　
　　<Storyboard　x:Name="myStoryboard">　
　　　<DoubleAnimation　
　　　　Storyboard.TargetName="myTransform"　
　　　　Storyboard.TargetProperty="Angle"　
　　　　From="0"　To="360"　Duration="0:0:5"　
　　　　RepeatBehavior="Forever"　/>　
　　</Storyboard>　
　</StackPanel.Resources>　
　<Rectangle　Width="50"　Height="50"　Fill="RoyalBlue"　
　　MouseLeftButtonDown="StartAnimation">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　x:Name="myTransform"　Angle="45"　CenterX="25"　CenterY="25"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

VB

Private　Sub　StartAnimation(ByVal　sender　As　Object,　ByVal　e　As　MouseEventArgs)
　　　　myStoryboard.Begin()
End　Sub

Interactive Transformation

You can use code to access and operate Transform objects. One way to achieve this goal is to name Transform and then access it using code. The following example shows how to click
How to add ScaleX and ScaleY attribute values of ScaleTransform applied to Rectangle.

XAML

<StackPanel>　
　<Rectangle　MouseLeftButtonDown="HandleMouseButtonDown"　
　　Width="50"　Height="50"　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　
　　　<!--　If　you　give　the　transform　a　name　you　can　
　　　　Access　it　easily　from　code.　-->　
　　　<ScaleTransform　x:Name="myScaleTransform"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

VB

Private　Sub　HandleMouseButtonDown(ByVal　sender　As　Object,　ByVal　e　As　MouseButtonEventArgs)　
　　'　Increase　ScaleX　and　ScaleY　by　25%.　
　　myScaleTransform.ScaleX　=　(myScaleTransform.ScaleX　*　1.25)　
　　myScaleTransform.ScaleY　=　(myScaleTransform.ScaleY　*　1.25)　
End　Sub　
　

3D Conversion

You can use perspective conversion to apply 3D effects to any Silverlight
UIElement. For example, you can create an illusion that the object is rotated toward you or away from you, as shown in.

Images converted from Perspective