大佬教程收集整理的这篇文章主要介绍了Silverlight实用窍门系列:53.Silverlight中的5种基本变换RotateTransform、ScaleTransform……,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在Silverlight中有五种基本变换,分别是RotateTransform:旋转变换、ScaleTransform:缩放变换、 SkewTransform:倾斜变换、TranslateTransform:移动变换、TransformGroup:变换组,在这里我们分别讲解这 五种变换的使用方法以便在实际中更好的应用。
使用方法:设置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,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>
使用方法:使用CenterX 和 CenterY属性指定一个中心点,然后设置ScaleX让对象在X轴进行缩放,设置ScaleY属性让对象在Y轴进行缩放。
下面我们来看一个Demo实例,可以设置让图标按照某点缩放,其代码如下:
- <!--ScaleTransform变换-->
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,0" Name="image21"
- Stretch="Fill" Width="50" source="/SLTrans;component/iPhone_002.png" Opacity=".3"/>
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,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>
使用方法:使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
下面我们来看一个Demo实例,可以设置让图标按照某点倾斜,其代码如下:
- <!--SkewTransform变换-->
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,0" Name="image31"
- Stretch="Fill" Width="50" source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,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>
使用方法:X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。
下面我们来看一个Demo实例,可以设置让图标移动变换,其代码如下:
- <!--TranslateTransform变换-->
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,0" Name="image41"
- Stretch="Fill" Width="50" source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,0" Name="image4"
- Stretch="Fill" Width="50" source="/SLTrans;component/iPhone_004.png" >
- <Image.RenderTransform>
- <TranslateTransform X="10" Y="50"></TranslateTransform>
- </Image.RenderTransform>
- </Image>
使用方法:在其内部可以应用多种变换规则,直接在其内添加其他变换方式即可。
下面我们来看一个Demo实例,可以设置让图标变换多个组,其代码如下:
- <!--TransformGroup变换-->
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,0" Name="image51"
- Stretch="Fill" Width="50" source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
- <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,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……全部内容,希望文章能够帮你解决Silverlight实用窍门系列:53.Silverlight中的5种基本变换RotateTransform、ScaleTransform……所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。