Silverlight中的5种基本变换

Silverlight实用窍门系列：Silverlight中的5种基本变换RotateTransform、ScaleTransform、SkewTransform、TranslateTransform、TransformGroup

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

        RotateTransform:旋转变换

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

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

<!--RotateTransform变换-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" >
<Image.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
</Image.RenderTransform>
</Image>

        ScaleTransform：缩放变换

        使用方法：使用CenterX 和 CenterY属性指定一个中心点，然后设置ScaleX让对象在X轴进行缩放，设置ScaleY属性让对象在Y轴进行缩放。

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

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

        SkewTransform：倾斜变换

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

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

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

        TranslateTransform：移动变换

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

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

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

        TransformGroup：变换组

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

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

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

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

       原文地址：http://www.haogongju.net/art/93865