在Silverlight中有五种基本变换,分别是RotateTransform:旋转变换、ScaleTransform:缩放变换、 SkewTransform:倾斜变换、TranslateTransform:移动变换、TransformGroup:变换组,在这里我们分别讲解这 五种变换的使用方法以便在实际中更好的应用。

        RotateTransform:旋转变换

        使用方法:设置Angle属性为需要转换的角度,设置其中心点为CenterX、CentyY,这个是X、Y轴的二维平面旋转。

        下面我们来看一个Demo实例,可以设置让图标按照某一个角度旋转,其代码

  1. 如下: 
  2.  
  3. <!--RotateTransform变换--> 
  4. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11" 
  5.         Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png"  Opacity=".3"/> 
  6. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1" 
  7.         Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png" > 
  8.     <Image.RenderTransform> 
  9.         <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform> 
  10.     </Image.RenderTransform> 
  11. </Image> 

        ScaleTransform:缩放变换

        使用方法:使用CenterXCenterY属性指定一个中心点,然后设置ScaleX让对象在X轴进行缩放,设置ScaleY属性让对象在Y轴进行缩放。

        下面我们来看一个Demo实例,可以设置让图标按照某点缩放,其代码如下:

 

  1. <!--ScaleTransform变换--> 
  2. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image21" 
  3.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png"  Opacity=".3"/> 
  4. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image2" 
  5.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png"
  6.     <Image.RenderTransform> 
  7.         <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform> 
  8.     </Image.RenderTransform> 
  9. </Image> 

        SkewTransform:倾斜变换

        使用方法:使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

        下面我们来看一个Demo实例,可以设置让图标按照某点倾斜,其代码如下:

 

  1. <!--SkewTransform变换--> 
  2. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image31" 
  3.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/> 
  4. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image3" 
  5.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" > 
  6.     <Image.RenderTransform> 
  7.         <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform> 
  8.     </Image.RenderTransform> 
  9. </Image> 

        TranslateTransform:移动变换

        使用方法:X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。

        下面我们来看一个Demo实例,可以设置让图标移动变换,其代码如下:

 

  1. <!--TranslateTransform变换--> 
  2. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image41" 
  3.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/> 
  4. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image4" 
  5.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" > 
  6.     <Image.RenderTransform> 
  7.         <TranslateTransform X="10" Y="50"></TranslateTransform> 
  8.     </Image.RenderTransform> 
  9. </Image> 

        TransformGroup:变换组

        使用方法:在其内部可以应用多种变换规则,直接在其内添加其他变换方式即可。

        下面我们来看一个Demo实例,可以设置让图标变换多个组,其代码如下:

 

  1. <!--TransformGroup变换--> 
  2. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image51" 
  3.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/> 
  4. <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image5" 
  5.         Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" > 
  6.     <Image.RenderTransform> 
  7.         <TransformGroup> 
  8.             <ScaleTransform ScaleY="-1"/> 
  9.             <TranslateTransform Y="100"/> 
  10.         </TransformGroup> 
  11.     </Image.RenderTransform> 
  12. </Image> 

        其实在Silverlight中,还有一种矩阵变换(MatrixTransform),相较于以上变换更复杂也更灵活,下篇文章将单独以矩阵变换为主题,进行详细的实例分析。

        下面请看运行效果如下,如需源码请点击SLTrans.rar下载。