变换特效在动画中尤其有用，可以改变Silverlight对象的形状的方法，使用变换为图形对象提供旋转、缩放、扭曲和移动的特效，可以改变元素的尺寸和位置，达到奇异的效果。
变换特效不仅适用于图形，也适用于控件。

4.1旋转变换

旋转变换RotateTransform用于将图形对象旋转一个指定的角度，在平面内控制图形旋转，需要两个参数，一个是旋转的中心，另一个旋转的角度，因此具有如下3个属性。
◎ Angle：旋转指定角度值，默认值为0
◎ CenterX：旋转的水平中心点，默认值为0
◎ CenterY：旋转的垂直中心点，默认值为0
 
如：
<Button Height="65" HorizontalAlignment="Left" Margin="37,0,0,145" VerticalAlignment="Bottom" Width="158" Content="按扭" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" FontSize="26.667">
                  <Button.RenderTransform>
                         <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="41.46"/>
                                <TranslateTransform/>
                         </TransformGroup>
                  </Button.RenderTransform>
</Button>
显示的结果如图4.1-1：
 
           
图4.1-1
 
默认点（CenterX，CenterY），是相对定位，即(0,0)表示的是左上角。
 

4.2缩放变换

缩放变换ScaleTransform用于放大或缩小一个图形对象，可以水平缩放或者垂直缩放，或同时水平或垂直缩放，主要使用两对参数，放大/缩小倍数和缩放中心位置，主要参数如下：
◎ ScaleX：增加图形对象的宽度，默认值为1。
◎ ScaleY：增加图形对象的高度，默认值为1。
◎ CenterX：水平缩放的方向，默认值为0。
◎ CenterY：垂直缩放的方向，默认值为0。
如：
<TextBlock TextWrapping="Wrap" Width="83" Height="35.5" FontSize="25" Canvas.Top="53.75" Canvas.Left="109" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="140,165,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width">
           <TextBlock.RenderTransform>
                  <TransformGroup>
                         <ScaleTransform ScaleX="3" ScaleY="1"/>                     
                  </TransformGroup>
           </TextBlock.RenderTransform>大家好</TextBlock>
    <TextBlock TextWrapping="Wrap" Width="83" Height="35.5" FontSize="25" RenderTransformOrigin="0.5,0.5" Margin="53,104,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width"><TextBlock.RenderTransform>
                         <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>                     
                         </TransformGroup>
</TextBlock.RenderTransform>大家好</TextBlock>    
呈现的结果，如图4.2-1：
 
 
 
                  图4.2-1
当图像不平翻转或垂直翻转时，可ScaleX=-1,ScaleY=-1,操作是选择从菜单“对象”中的“翻转”。
<Image Margin="63,50,0,218" Source="flower1.jpg" Stretch="Fill" HorizontalAlignment="Left" Width="152" RenderTransformOrigin="0.5,0.5">
           </Image>
           <Image Margin="239,114,249,154" Source="flower1.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                  <Image.RenderTransform>
                         <TransformGroup>
                                <ScaleTransform  ScaleX="-1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform/>
                         </TransformGroup>
                  </Image.RenderTransform>
</Image>
 
显示的结果见图4.2-2：
         
 
图4.2-2

4.3扭曲变换

扭曲变换SkewTransform可以达到简单的立体效果，用于将一个图形对象扭曲指定的角度，具有如下4个属性
◎ AngleX：水平扭曲值，默认值为0。
◎ AngleY：垂直扭曲值，默认值为0。
◎ CenterX：扭曲水平基点，默认值为0。
◎ CenterY：扭曲垂直基点，默认值为0。
如：
<Image Margin="217.197,124.188,272.484,188" Source="house2.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
                  <Image.RenderTransform>
                         <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform AngleX="40"/>
                                <RotateTransform />
                                <TranslateTransform/>
                         </TransformGroup>
                  </Image.RenderTransform>
</Image>
           <Image Margin="20,36,0,0" Source="house2.jpg" Stretch="Fill" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Width="155" Height="173" VerticalAlignment="Top"/>        
   显示的结果如图4.3-1：
 
 
 
                       图4.3-1

4.4移动变换

移动变换TranslateTransform是一个简单的转换，将一个图形对象从一个位置移动到另一个位置，具有两个属性。
◎ X：水平移动的距离，默认值为0。
◎ Y：垂直移动的距离，默认值为0。
如：
<Rectangle Width="181" Height="107" Fill="#FFFFFFFF" Stroke="#FF000000"  RenderTransformOrigin="0.5,0.5">
           <Rectangle.RenderTransform>
                  <TransformGroup>
                    <TranslateTransform X="50" Y="90"/>
                  </TransformGroup>
           </Rectangle.RenderTransform>
</Rectangle>
移动变换主要用在动画中动态地实现它。

4.5组合变换

组合变换TransformGroup就是把多个变换组合起来，比如移动一个元素的同时对它作缩放，如：
<Grid x:Name="LayoutRoot" Background="White">
           <Rectangle HorizontalAlignment="Left" Height="106" Margin="38,36,0,0" Stroke="#FFE02727" VerticalAlignment="Top" Width="201"/>
           <Rectangle Margin="260,157,179,217" Stroke="#FFE02727">
                                <Rectangle.RenderTransform>
                  <TransformGroup>
                         <ScaleTransform ScaleX="1.5"  ScaleY="1"/>
                         <SkewTransform AngleX="20" AngleY="0"/>
                         <RotateTransform Angle="30"/>
                         <TranslateTransform X="10" Y="0"/>
                  </TransformGroup>
           </Rectangle.RenderTransform>                 
           </Rectangle>        
    </Grid>
显示的结果，如图4.5-1：
 
 
               图4.5-1

4.6复合变换

复合变换CompositeTransform可以简化组合变换TransformGroup的XAML代码，如上述组合变换的等效XAML如下：
<Grid x:Name="LayoutRoot" Background="White">
           <Rectangle HorizontalAlignment="Left" Height="106" Margin="38,36,0,0" Stroke="#FFE02727" VerticalAlignment="Top" Width="201"/>
           <Rectangle Margin="260,157,179,217" Stroke="#FFE02727">
                                <Rectangle.RenderTransform>
<CompositeTransform ScaleX="1.5"  ScaleY="1" SkewX="20"  Rotation="30" TranslateX="10"/>
           </Rectangle.RenderTransform>                 
           </Rectangle>        
    </Grid>

4.7矩阵变换

矩阵变换MatrixTransform是一个自定义的变形对象，图形的旋转、绽放、扭曲、移动等变换，都通过矩阵变换来实现，如直接使用矩阵变换，还可以提高运行速度。
矩阵变形MatrixTransform由3*3的矩阵组成，如表9-1所示：
表9-1
M11，默认值：1.0
M12，默认值：0.0
      0.0
M21，默认值：0.0
M22，默认值：1.0
      0.0
OffsetX，默认值：0.0
OffsetY，默认值：0.0
      1.0
如将第二行第二列中的值更改为5，则可将该对象拉伸为当前高度的五倍，如将第三行第一列中的值更改为500，则可将该对象沿x轴移动500单位，如将第三行第二列中的值更改为500，则可将该对象沿y轴移动500单位，如果同时更改，则变换同时进行。

范例 示范使用矩阵变换创建立方体

图4.7-1是运行后效果，由三个矩形变形组成的一个立方体。
 
               图4.7-1
◎XAML标记如下，已添加注解。
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="Ch9_Exam5_1.MainPage"
    Width="640" Height="480" mc:Ignorable="d">
    <Canvas>      
           <Rectangle Stroke="#FF1D1919" Height="172" Width="170" StrokeThickness="5" UseLayoutRounding="False" Canvas.Top="15.8" d:LayoutRounding="Auto" >
                  <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.741,1.083" StartPoint="0.259,-0.083">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="White" Offset="1"/>
                         </LinearGradientBrush>
                  </Rectangle.Fill>
<!--左面的矩阵变形-->
                  <Rectangle.RenderTransform>
                         <MatrixTransform>
                                <MatrixTransform.Matrix>
<Matrix OffsetX="60" OffsetY="100"     M12="-0.6" />
                                </MatrixTransform.Matrix>
                         </MatrixTransform>
                  </Rectangle.RenderTransform>
           </Rectangle>
<Rectangle Height="172" Width="169" StrokeThickness="5" Canvas.Left="230" Canvas.Top="15" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                  <Rectangle.Stroke>
                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="White" Offset="1"/>
                         </LinearGradientBrush>
                  </Rectangle.Stroke>
                  <Rectangle.Fill>
           <LinearGradientBrush EndPoint="0.185,1.171" StartPoint="0.815,-0.171">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="#FFACC7EF" Offset="1"/>
                         </LinearGradientBrush>
                  </Rectangle.Fill>
<!--右面的矩阵变形-->
                   <Rectangle.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
<Matrix OffsetX="0"  OffsetY="0"    M12="0.9" />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Rectangle.RenderTransform>
           </Rectangle>
           <Rectangle Stroke="#FF413B3B" Height="169.533" Width="168.8" StrokeThickness="5" Canvas.Left="139" Canvas.Top="96" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                  <Rectangle.Fill>
                         <LinearGradientBrush EndPoint="0.211,0.016" StartPoint="0.789,0.984">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="#FFE9ADAD" Offset="1"/>
                         </LinearGradientBrush>
                  </Rectangle.Fill>
<!--下面的矩阵变形-->
                   <Rectangle.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
<Matrix OffsetX="90" OffsetY="90" M11="1" M12="0.9"  M21="-1" M22="0.6" />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Rectangle.RenderTransform>
           </Rectangle>
    </Canvas>
</UserControl>