学Silverlight 2系列(29):使用Transform实现更炫的效果(上)
2008-10-03 11:38:24 来源:WEB开发网
倾斜变换(SkewTransform)
倾斜变换SkewTransform允许我们对元素围绕一点进行一定角度的倾斜,可以通过属性AngleX和AngleY分别设置在X轴和Y轴上倾斜角度,以及CenterX和CenterY来指定一个变换中心点。如下面的例子:
<Canvas Background="#CDFCAE">
<Image Source="a1.png" Canvas.Left="80" Canvas.Top="20" Opacity="0.5">
</Image>
<Image Source="a1.png" Canvas.Left="80" Canvas.Top="20">
<Image.RenderTransform>
<SkewTransform AngleX="30" AngleY="30"></SkewTransform>
</Image.RenderTransform>
</Image>
</Canvas>
运行后的效果如下:
移动变换(TranslateTransform)
移动变换TranslateTransform允许我们对元素在X轴和Y轴上做一定位置的移动,通过属性X和Y两个属性来指定,如下面的例子,对图片和文字做一些移动变换,使其显示出阴影效果:
<Canvas Background="#CDFCAE">
<Image Source="a1.png" Canvas.Left="80" Canvas.Top="80" Opacity="0.5">
</Image>
<Image Source="a1.png" Canvas.Left="80" Canvas.Top="80">
<Image.RenderTransform>
<TranslateTransform X="-10" Y="-10"></TranslateTransform>
</Image.RenderTransform>
</Image>
<TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
Text="博客园" FontSize="60" Foreground="#C1C1C1">
<TextBlock.RenderTransform>
<TranslateTransform X="5" Y="5"></TranslateTransform>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Top="80" Canvas.Left="360" FontWeight="Bold"
Text="博客园" FontSize="60" Foreground="#FF0000"></TextBlock>
</Canvas>
运行后效果如下所示:
Tags:Silverlight 系列 使用
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接