Windows Phone Development (18): Transformers Nineth season

Transformation is not a good understanding of the concept, not to scare you, it involves a lot of knowledge about algebra, geometry, and linear algebra. How? Scared by my words? Don't be afraid, although we may not be able to understand these concepts as long as we know how to use them.
In fact, the transformation is a coordinate change on the plane, sounds very abstract, but, as long as I say it specifically, you will feel not abstract.
I believe that if you play Photoshop, or other drawing software, you should know what is called rotation, what is called tilt, what is called panning ...
Yes, these are the changes we're going to talk about today, okay, now can you sit down and have a glass of pearl milk tea to relax? Oh, yes, pearl milk tea as much as possible to drink oh.

Well, gossip less and start today's show.

First, TranslateTransform.

This should be regarded as the best understanding, is the translation, I believe we will not be unfamiliar, learning analytic geometry when is not often play ah? It is nothing more than two parameters--x and Y, respectively, is the displacement of the plane on the two direction.

The three rectangles in the, their positions are the same, but after panning, it looks as if they are not in the same position.

2. <Canvas>
4. <!--three rectangles are in the same position in the canvas, but after panning the transform,
6. It looks as if it's not in the same position.
8. -
10. <rectangle width= "height=" 120 "
12. Fill= "Darkgreen"
14. canvas.zindex= "0"
16. canvas.top= "15"
18. Canvas.left= ">"
20. <Rectangle.RenderTransform>
22. <translatetransform x= "y="/>
24. </Rectangle.RenderTransform>
26. </Rectangle>
28. <rectangle width= "height=" 120 "
30. Fill= "Yellow"
32. canvas.zindex= "1"
34. canvas.top= "15"
36. Canvas.left= ">"
38. <Rectangle.RenderTransform>
40. <translatetransform x= "y="/>
42. </Rectangle.RenderTransform>
44. </Rectangle>
46. <rectangle width= "height=" 120 "
48. Fill= "Blue"
50. canvas.zindex= "2"
52. canvas.top= "15"
54. Canvas.left= ">"
56. <Rectangle.RenderTransform>
58. <translatetransform x= "y="/>
60. </Rectangle.RenderTransform>
62. </Rectangle>
64. </Canvas>

Second, RotateTransform.

This guy is used to rotate the element, the angle attribute is the angle of rotation, without my explanation, the knowledge of the pupils. In addition, there are two attributes to note:
CenterX: The x-coordinate of the center of rotation, which is relative to the upper-left corner of the target, for example, if you want a rectangle to rotate, by default, the center of rotation is 0, which is the upper-left corner of the rectangle;
CenterY: The same as above, just the y-coordinate point.

These two rotation points are not very good to grasp, if we want to compare relative positioning, you can change the rotation origin by UIElement's Rendertransformorigin property, this point coordinate is relative to the element visualization boundary, namely 0 to 1 values, such as:
1. Upper left Corner: (0,0)
2. Lower left corner: (+)
3, the top of the Center: (0.5,0)
4, Bottom Center: (0.5,1)

In the three images, the center of rotation is centered at the bottom, but the angle of rotation is different.

2. <Grid>
4. <image margin= "289,42,241,143" source= "/transformsample;component/1.jpg" stretch= "Uniform" Opacity= "0.3"
6. rendertransformorigin= "0.5,1" >
8. <Image.RenderTransform>
10. <rotatetransform angle= " -60"/>
12. </Image.RenderTransform>
14. </Image>
16. <image margin= "289,42,241,143" source= "/transformsample;component/1.jpg" stretch= "Uniform" Opacity= "0.6"
18. rendertransformorigin= "0.5,1" >
20. <Image.RenderTransform>
22. <rotatetransform angle= "0"/>
24. </Image.RenderTransform>
26. </Image>
28. <image margin= "289,42,241,143" source= "/transformsample;component/1.jpg" stretch= "Uniform"
30. rendertransformorigin= "0.5,1" >
32. <Image.RenderTransform>
34. <rotatetransform angle= "/>"
36. </Image.RenderTransform>
38. </Image>
40. </Grid>

Third, ScaleTransform.

Similar to the rotation transformation above, but this is for zooming in and out, it also has a center point, which is the zoom center, again, its default value is the upper left corner of the target element, as to which point is the Zoom Center, you adjust the center coordinates.

In order to clearly see the effect of zooming, the following two images are set to transparency.

2. <Grid>
4. <image source= "/transformsample;component/1.jpg" stretch= "Uniform" horizontalalignment= "Center" Verticalalignment= "Center" margin= "130"
6. canvas.zindex= "0" opacity= "0.09" >
8. <Image.RenderTransform>
10. <scaletransform centerx= "centery=" scalex= "2" scaley= "2"/>
12. </Image.RenderTransform>
14. </Image>
18. <image source= "/transformsample;component/1.jpg" stretch= "Uniform" horizontalalignment= "Center" Verticalalignment= "Center" margin= "130"
20. canvas.zindex= "1" opacity= "0.2" >
22. <Image.RenderTransform>
24. <scaletransform centerx= "centery=" scalex= "1.6" scaley= "1.6"/>
26. </Image.RenderTransform>
28. </Image>
32. <image source= "/transformsample;component/1.jpg" stretch= "Uniform" horizontalalignment= "Center" Verticalalignment= "Center" margin= "130"
34. canvas.zindex= "2"/>
36. </Grid>

Four, SkewTransform.

The twisted transformation, which can be said to be tilted, does achieve the effect of tilting.
It also has a central point, similar to the above, where the Anglex is distorted along the x axis, and the Angley is twisted along the y axis.

2. <Grid>
4. <image source= "/transformsample;component/1.jpg" horizontalalignment= "Center"
6. Verticalalignment= "Center"
8. Margin= "/>"
10. <image source= "/transformsample;component/1.jpg" horizontalalignment= "Center"
12. Verticalalignment= "Center"
14. margin= "opacity=" "0.3" >
16. <Image.RenderTransform>
18. <skewtransform centerx= "0" centery= " -200" anglex= "" angley= "0"/>
20. </Image.RenderTransform>
22. </Image>
24. <image source= "/transformsample;component/1.jpg" horizontalalignment= "Center"
26. Verticalalignment= "Center"
28. margin= "opacity=" "0.3" >
30. <Image.RenderTransform>
32. <skewtransform centerx= "0" centery= " -550" anglex= " -15" angley= "0"/>
34. </Image.RenderTransform>
36. </Image>
40. </Grid>

Five, TransformGroup.

Strictly speaking, this is not a transformation, but it can be achieved by adding n transformations together.

2. <Grid>
4. <image source= "/transformsample;component/1.jpg"
6. Stretch= "Uniform" margin= "65,98,472,92"/>
8. <image source= "/transformsample;component/1.jpg"
10. Stretch= "Uniform" margin= "65,98,472,92" >
12. <Image.RenderTransform>
14. <TransformGroup>
16. <translatetransform x= "y="/>
18. <scaletransform scalex= "1.5" scaley= "1.5" centerx= "185" centery= "280"/>
20. <rotatetransform centerx= "centery=" angle= "/>"
22. </TransformGroup>
24. </Image.RenderTransform>
26. </Image>
30. </Grid>

Six, Compositetransform.

This is a bit like the transformgroup above, but as you can see, it does not overlay multiple transformations, but applies multiple transformations at the same time, but it is sequential.
Shift---rotation----Warp, zoom

2. <Grid>
4. <image source= "/transformsample;component/1.jpg" stretch= "Uniform" margin= "48,68,492,131"/>
6. <image source= "/transformsample;component/1.jpg" stretch= "Uniform" margin= "48,68,492,131"
8. opacity= "0.5" >
10. <Image.RenderTransform>
12. <compositetransform
14. centerx= "" centery= "185"
16. Rotation= "45"
18. skewx= "skewy=" 15 "
20. scalex= "1.2" scaley= "1.2"
22. translatex= "translatey=" "/>"
24. </Image.RenderTransform>
26. </Image>
30. </Grid>

Seven, Matrixtrasform.

This is the most complex of a transformation, it is a 3-by-3 matrix, but because it 3rd column 0,0,1, so, in fact, we only need to set 6 values is enough. Each of them is:
M11 M12 0
M21 M22 0
OffsetX OffsetY 1
May be offsetx and offsety more easy to see is the displacement, that front? We can guess that the default value of 1 is scaling, because it is not possible to be 0 times times, the remaining two is the x-axis and y-axis direction of the tilt value.

In fact, I also write code to find the regular, keep the parameters of the change alone to see the changes in the graph can find the answer.

M11--x axis Scaling
Tilt on m12--y axis
Tilt on m21--x axis
M22--y axis Scaling
Displacement on the offsetx--x axis
Displacement on the offsety--y axis

2. <Grid>
4. <image height= "206" horizontalalignment= "left" margin= "73,104,0,0" name= "Image1" stretch= "Uniform" Verticalalignment= "Top" width= "139" source= "/transformsample;component/1.jpg" >
6. <Image.RenderTransform>
8. <matrixtransform matrix= "2,0,0,1,12,6"/>
10. </Image.RenderTransform>
12. </Image>
14. <image height= "206" horizontalalignment= "left" margin= "122,424,0,0" name= "Image2" source= "/transformsample; Component/1.jpg "stretch=" Uniform "verticalalignment=" Top "width=" 136 ">
16. <Image.RenderTransform>
18. <matrixtransform matrix= "1,-1,0,1,0,137"/>
20. </Image.RenderTransform>
22. </Image>
24. <image height= "206" horizontalalignment= "left" margin= "293,12,0,0" name= "Image3" source= "/transformsample; Component/1.jpg "stretch=" Uniform "verticalalignment=" Top "width=" 139 ">
26. <Image.RenderTransform>
28. <matrixtransform matrix= "1,0.6,0,1,0,0"/>
30. </Image.RenderTransform>
32. </Image>
34. <image height= "206" horizontalalignment= "left" margin= "269,424,0,0" name= "Image4" source= "/transformsample; Component/1.jpg "stretch=" Uniform "verticalalignment=" Top "width=" 139 ">
36. <Image.RenderTransform>
38. <matrixtransform matrix= "1,1,0,1,0,0"/>
40. </Image.RenderTransform>
42. </Image>
44. </Grid>

How do you learn about transformations? Personal recommendation a method, very effective, that is------nonsense.
Really, the study effect is very good, hehe.

You can write the code, then change the values constantly, see what's changed, and you'll find the pattern a few more times.

Windows Phone Development (18): Transformers Nineth season