Windows Phone (15) UI Transformation

In WP, any object inherited from uielement can be transformed by an application. Of course, it contains textblock, rectangle, and other elements. The following uses textblock to demonstrate the case, here we will introduce the transformations in 7 as follows:

Translatetransform
Movement position, including horizontal movement and vertical movement

Scaletransform
Zoom to zoom in and out the UI, including the zoom on the X axis and the zoom on the Y axis.

Rotatetransform
Rotate according to the defined rotation point Setting Angle

Skewtransform
Tilt the UI from a certain angle

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

 

Here, you need to use the rendertransform attribute defined by uielement to set the transformation.

 

Translatetransform

Sample Code:

<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> <translatetransform x = "-2" Y = "3"> </translatetransform> </textblock. rendertransform> </textblock> </GRID>

From the above XAML file, we can see the defined Moving position. X indicates the number of moving on the X axis. This value is positive, indicating moving the corresponding position to the right. If it is negative, it indicates moving the corresponding position to the left; Y indicates the number of moves on the Y axis. Similarly, the Y value moves the corresponding position up and down to the corresponding position. See the following figure:

 

 

Scaletransform

Sample Code:

<Grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <textblock X: name = "tbshow" verticalalignment = "center" horizontalalignment = "center" text = "conversion Text Example" foreground = "cyan"> <textblock. rendertransform> <scaletransform scalex = "2" scaley = "2" centerx = "20" centery = "30"> </scaletransform> </textblock. rendertransform> </textblock> </GRID>

Here, scaletransform sets four attributes. centerx and centery indicate the point where the transformation is set. The point coordinate here is (20 30 ), scalex and scaley indicate the multiples of zooming in the X and Y directions. Here it can be decimal places. When the set value is greater than 0, the zooming function is implemented, however, when the value is 0, the text disappears, and when the value is smaller than 0, the result is that the text is inverted between the left and right sides.

The code above doubles the height and width of the textblock element.

 

This is the case when we change both scalex and scaley to negative values.

 

 

Rotatetransform

 

Sample Code:

<Grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <textblock X: name = "tb1" fontsize = "72" horizontalalignment = "center" verticalignment = "center" text = "text =" Example 1 "foreground =" cyan "> <textblock. rendertransform> <rotatetransform angle = "30" centerx = "1" centery = "1"> </rotatetransform> </textblock. rendertransform> </textblock> <textblock X: name = "tbshow" fontsize = "72" verticalalignment = "center" horizontalalignment = "center" text = "Example 2" foreground = "cyan"> <textblock. rendertransform> <rotatetransform angle = "-30" centerx = "1" centery = "1"> </rotatetransform> </textblock. rendertransform> </textblock> </GRID>

Here, centerx and centery also represent the defined transformation points, and angle represents the defined angle. As shown above, the angle is divided into positive and negative values. When it is 0, it means no angle, without any changes, the implementation results are as follows:

 

Skewtransform

 

Sample Code:

<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> <skewtransform anglex = "20" angley = "20"> </skewtransform> </textblock. rendertransform> </textblock> </GRID>

Skewtransform indicates the skew angle on the X and Y axes based on a certain transformation point. The anglex attribute set above indicates the skew angle on the X axis, and angley indicates the skew angle on the Y axis, the default conversion point is (0 0). Just like the code in the previous example, the angle is also divided into positive and negative values. If it is equal to 0, there is no angle conversion ,:

 

This is more practical;

You will find that they will all run out of the grid content area based on the transformation of a certain point ···

 

 

 

 

 

                                                                                                                                                                         
Xtep Qianli