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>

[Demo|下载代码]

这段代码为Image设置两项效果,分别改变大小和透明度。要注意的是,框架底层通过改变ScaleTransform来改变大小,所以需要显式设置RenderTransform属性(其实可以在应用Effect的时候自动为控件设置,但框架作者并没有这么想……)。另外框架内预设了多种Easing效果,可以让一些效果模拟得更加逼真和动感~

Silverlight.FX里还有许多有意思的东东,下一次再介绍Transition Effect以及支持动画布局的TilePanel等控件。

posted @ 2008-10-25 18:29  XIN...  阅读(807)  评论(0编辑  收藏  举报