Windows Phone开发（18）：变形金刚第九季

变换不是一个好理解的概念，不是吓你，它涉及很多有关代数，几何，以及线性代数的知识。怎么？被我的话吓怕了？不用怕，尽管我们未必能够理解这些概念，只要我们知道怎么使用它们就是了。
其实，变换就是平面上一种坐标变化，听起来很抽象，但，只要我把它说具体了，你就会觉得不抽象了。
相信各位如果玩过Photoshop，或者其它的绘图软件，应该知道什么叫做旋转，什么叫做倾斜，什么叫做平移……
是的，这些就是我们今天要聊的变换，好了，现在你是不是可以坐下来喝一杯珍珠奶茶来放松一下呢？哦，对了，珍珠奶茶尽量少喝哦。

好，闲话少吹，开始今天的表演。

一、TranslateTransform。

这个应该算是最好理解了，就是平移嘛，相信大家不会陌生的，学习解析几何的时候是不是经常玩啊？它无非就两个参数——X和Y，分别是平面上两个方向的位移。

上图中的三个矩形，它们的位置是一样的，但经过平移后，看起来它们好像不在同一个位置了。

<Canvas>  

    <!-- 三个矩形在Canvas中的位置是相同的，但经过平移变换后，  

         看起来，好像并不在同一个位置了。      

    -->  

    <Rectangle Width="120" Height="120"  

               Fill="DarkGreen"  

               Canvas.ZIndex="0"  

               Canvas.Top="15"  

               Canvas.Left="15">  

        <Rectangle.RenderTransform>  

            <TranslateTransform X="20" Y="20"/>  

        </Rectangle.RenderTransform>  

    </Rectangle>  

    <Rectangle Width="120" Height="120"  

               Fill="Yellow"  

               Canvas.ZIndex="1"  

               Canvas.Top="15"  

               Canvas.Left="15">  

        <Rectangle.RenderTransform>  

            <TranslateTransform X="80" Y="80"/>  

        </Rectangle.RenderTransform>  

    </Rectangle>  

    <Rectangle Width="120" Height="120"  

               Fill="Blue"  

               Canvas.ZIndex="2"  

               Canvas.Top="15"  

               Canvas.Left="15">  

        <Rectangle.RenderTransform>  

            <TranslateTransform X="140" Y="140"/>  

        </Rectangle.RenderTransform>  

    </Rectangle>  

</Canvas>  

 

二、RotateTransform。

这个家伙就是用来旋转元素的，Angle属性就是旋转的角度，不用我解释了吧，小学生的知识。另外，有两个属性要注意一下：
CenterX：旋转中心的X坐标，这个坐标是相对于目标的左上角的，例如，你要让一个矩形转旋转，默认的情况，旋转中心就是0，就是矩形的左上角；
CenterY：和上面一样了，只是Y坐标的点。

这两个旋转点不太好把握，如果我们希望比较的相对定位，可以通过UIElement的RenderTransformOrigin属性来改动旋转原点，这个点坐标是相对于元素可视化的边界的，即0到1之间的值，如：
1、左上角：(0,0)
2、左下角：(1,1)
3、顶部居中：(0.5,0)
4、底部居中：(0.5,1)

上图中的三个图象，旋转中心都在底部居中，只是旋转的角度不同而已。

<Grid>  

    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.3"  

           RenderTransformOrigin="0.5,1">  

        <Image.RenderTransform>  

            <RotateTransform Angle="-60"/>  

        </Image.RenderTransform>  

    </Image>  

    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.6"  

           RenderTransformOrigin="0.5,1">  

        <Image.RenderTransform>  

            <RotateTransform Angle="0"/>  

        </Image.RenderTransform>  

    </Image>  

    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform"  

           RenderTransformOrigin="0.5,1">  

        <Image.RenderTransform>  

            <RotateTransform  Angle="60"/>  

        </Image.RenderTransform>  

    </Image>  

</Grid>  

 

三、ScaleTransform。