Silverlight实用窍门系列:53.Silverlight中的5种基本变换RotateTransform、ScaleTransform……
2011-08-15 10:06
405 查看
在Silverlight中有五种基本变换,分别是RotateTransform:旋转变换、ScaleTransform:缩放变换、 SkewTransform:倾斜变换、TranslateTransform:移动变换、TransformGroup:变换组,在这里我们分别讲解这 五种变换的使用方法以便在实际中更好的应用。
RotateTransform:旋转变换
使用方法:设置Angle属性为需要转换的角度,设置其中心点为CenterX、CentyY,这个是X、Y轴的二维平面旋转。
下面我们来看一个Demo实例,可以设置让图标按照某一个角度旋转,其代码
ScaleTransform:缩放变换
使用方法:使用CenterX 和 CenterY属性指定一个中心点,然后设置ScaleX让对象在X轴进行缩放,设置ScaleY属性让对象在Y轴进行缩放。
下面我们来看一个Demo实例,可以设置让图标按照某点缩放,其代码如下:
SkewTransform:倾斜变换
使用方法:使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
下面我们来看一个Demo实例,可以设置让图标按照某点倾斜,其代码如下:
TranslateTransform:移动变换
使用方法:X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。
下面我们来看一个Demo实例,可以设置让图标移动变换,其代码如下:
TransformGroup:变换组
使用方法:在其内部可以应用多种变换规则,直接在其内添加其他变换方式即可。
下面我们来看一个Demo实例,可以设置让图标变换多个组,其代码如下:
其实在Silverlight中,还有一种矩阵变换(MatrixTransform),相较于以上变换更复杂也更灵活,下篇文章将单独以矩阵变换为主题,进行详细的实例分析。
下面请看运行效果如下,如需源码请点击SLTrans.rar下载。
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),相较于以上变换更复杂也更灵活,下篇文章将单独以矩阵变换为主题,进行详细的实例分析。
下面请看运行效果如下,如需源码请点击SLTrans.rar下载。
相关文章推荐
- Silverlight实用窍门系列:53.Silverlight中的5种基本变换RotateTransform、ScaleTransform、SkewTransform、TranslateTransform、TransformGroup
- Silverlight实用窍门:Silverlight中五种基本变换
- Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- Silverlight实用窍门系列:54.详解Silverlight中的矩阵变换MatrixTransform,实现其余各种变换【附带实例源码】
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- Silverlight实用窍门系列:54.详解Silverlight中的矩阵变换MatrixTransform,实现其余各种变换
- Windows 8实用窍门系列:10.Windows 8的基本变换和矩阵变换以及AppBar应用程序栏
- Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
- Silverlight实用窍门系列:44.Silverlight 4.0中进行单元测试 【附带源码实例】
- Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)【附带源码实例】
- Silverlight实用窍门系列:72.Silverlight的Implicit Style、自定义主题皮肤、系统主题皮肤 推荐
- Silverlight实用窍门系列:21.循环访问WebService方法来看Silverlight下WebService异步请求【附带源码实例】
- Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate
- silverlight 中 物件儿的位置变换 TransformGroup,RotateTransform 和 ScaleTransform 用C#
- Silverlight实用窍门系列:36.Silverlight中播放视频和打印文档【附带源码实例】
- 转载 Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))
- Silverlight实用窍门系列:22.Silverlight使用WebService调用C++,Delphi编写的DLL文件【实例源码下载】
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】
- Silverlight实用窍门系列:5.绑定webService数据到DataGrid,设置DataGrid模板,模拟数据库数据的绑定【附带实例源码】