Windows Phone (16) UI Transformation

 

The four transform classes mentioned in the previous article are relatively simple. Here we will talk about the four transform classes:

 

Matrixtransfrom matrix transformation, a transformation represented by a standard matrix

Transformgroup composite Transformation combines multiple transformations into one transformation in the specified order

Compositetransform combination Transformation combines a series of transformations in a fixed order

 

Matrixtransfrom

 

It indicates that the two-dimensional x-y plane uses the 3x3 matrix for custom transformation. The four transformation classes in the previous article are based on this, and the mtrixtransform class is run through the matrix algorithm to get the corresponding effect.

 

 

　　
The value of the third column in the matrix is fixed!

Principle:
The process of using the original coordinate (x0, y0) to obtain the transformed new coordinate (x1, Y1) through this 3*3 matrix is as follows:

[X0, y0] *. After the coordinates (x0 * M11 + x0 * m21, y0 * m12 + y0 * m22) are obtained through matrix multiplication, add (offsetx, offsety) the new coordinates (x1, Y1) are obtained ). That is, the final coordinate (x1, Y1): x1
= X0 * M11 + x0 * m21 + offsetx, Y1 = y0 * m12 + y0 * m22 + offsety.

1 <! -- Source code usage --> 2 3 <matrixtransform matrix = "M11 M12 m21 m22 offsetx offsety"> </matrixtransform>

Example:

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0"> <! -- <Textblock X: name = "tb1" fontsize = "72" horizontalalignment = "center" verticalignment = "center" text = "conversion Text Example" foreground = "cyan"> </textblock> --> <textblock X: name = "tbshow" fontsize = "72" verticalalignment = "center" horizontalalignment = "center" text = "conversion Text Example" foreground = "cyan"> <textblock. rendertransform> <matrixtransform matrix = "0, 1, 2, 2"> </matrixtransform> </textblock. rendertransform> </textblock> </GRID>

Effect:

 

Summary

 

M11 -- X-axis Scaling
M12 -- Y axis tilt
M21 -- skew on the X axis
M22 -- Y-axis Scaling
Offsetx -- displacement on the X axis
Offsety -- displacement on the Y axis

Part reference: http://www.cnblogs.com/crazypig/archive/2012/02/20/2359599.html

Http://www.oschina.net/question/213217_49488

 

Transformgroup

Indicates a combination of the transformation effect. transformgroup can contain other transformations. Of course, transformgroup is nested.

 

Code:

 

<! -- Contentpanel-transformgroup --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <textblock X: name = "tbshow" fontsize = "72" verticalalignment = "center" horizontalalignment = "center" text = "conversion Text Example" foreground = "cyan"> <textblock. rendertransform> <transformgroup> <translatetransform x = "-2" Y = "3"> </translatetransform> <scaletransform scalex = "0.8" scaley = "0.9"> </scaletransform> <rotatetransform angle = "23"> </rotatetransform> <transformgroup> <matrixtransform matrix = "1, 0, 1, 1, 1 "> </matrixtransform> </transformgroup> </textblock. rendertransform> </textblock> </GRID>

Note that we are defining the sequence of transformations, because each transformation is based on the basis of the previous transformation. effect:

 

 

 

Compositetransform

Is a combination of transformations and is ordered. All transformations are set through attributes.

<! -- Contentpanel-compositetransform --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <textblock X: name = "tbshow" fontsize = "72" verticalalignment = "center" horizontalalignment = "center" text = "conversion Text Example" foreground = "cyan"> <textblock. rendertransform> <compositetransform rotation = "23" translatex = "-2" translatey = "3" scalex = "0.8" scaley = "0.9"> </compositetransform> </textblock. rendertransform> </textblock> </GRID>

In the code above, rotation indicates the rotation angle, translatex indicates the position of translation on the X axis, translatey indicates the position of translation on the Y axis, and scalex indicates the size of scaling on the X axis, scaley indicates the scaling size on the Y axis;

 

The similarities and differences between transformgroup and compositetransfom: You can set the same attributes to achieve the same effect. In transformgroup, you can use transformgroup for multiple times of the same transformation, however, attributes used in compositetransfom are not allowed. In addition, in transformgroup, we can use custom transformations.MatrixtransfromBut this attribute does not exist in compositetransfom; the two also need to note that order, different order, implementation effect is different;