Silverlight.FX - 为控件添加Effect
Silverlight.FX项目包含了许多针对现有Silverlight类库的扩展,其中非常实用的是可为控件添加Effect和Transition Effect(过渡效果)。使用过Flex开发的一定对这个特性比较熟悉,而现在使用Silverlight.FX同样可以非常简单地实现它们~
Silverlight.FX通过为对象(控件)添加Attached Property来定义效果、过渡效果,甚至连触发效果的事件也可以通过它来定义。下面的一段代码为Image设置了一个简单的效果。
<Image Source="netfxlogo.png" Opacity="0.4" Stretch="None" RenderTransformOrigin="0.5,0.5">
<fxui:Interaction.Behaviors>
<!--当鼠标悬浮-->
<fxui:HoverEffect>
<!--框架支持组合效果,Composition设置为Parallel以使以下动画效果同时进行-->
<fxeffects:CompositeEffect Composition="Parallel">
<fxeffects:Resize ScaleXRatio="1.2" ScaleYRatio="1.2" Duration="0:0:0.7" Easing="ElasticOut"/>
<fxeffects:Fade FadeOpacity="1.0" Duration="0:0:0.7" Easing="ElasticOut"/>
</fxeffects:CompositeEffect>
</fxui:HoverEffect>
</fxui:Interaction.Behaviors>
<!--显式为Resize效果设置ScaleTransform-->
<Image.RenderTransform>
<ScaleTransform/>
</Image.RenderTransform>
</Image>
这段代码为Image设置两项效果,分别改变大小和透明度。要注意的是,框架底层通过改变ScaleTransform来改变大小,所以需要显式设置RenderTransform属性(其实可以在应用Effect的时候自动为控件设置,但框架作者并没有这么想……)。另外框架内预设了多种Easing效果,可以让一些效果模拟得更加逼真和动感~
Silverlight.FX里还有许多有意思的东东,下一次再介绍Transition Effect以及支持动画布局的TilePanel等控件。