Blend是WPF/SL开发人员的利器, 你可以在美工板上绘制形状、路径和控件,然后修改其外观和行为,你也可以导入图像、视频和声音等等。 今天我给大家演示如何用Blend中提供的ControlStoryboardAction行为来控制Storyboard(情节提要)。环境为Blend3+win7.

1.打开Blend, 创建wpf工程,默认为WpfApplication1. 如下图:

 Expression Blend操作: 使用behavior来控制Storyboard_工具

2.利用Blend创建一个简单的动画

1>首先把Blend的工作区选为“动画”, 切换快捷键为F6,打开方式“窗口/工作区/动画”。 如下图:

 Expression Blend操作: 使用behavior来控制Storyboard_behavior_02

2>在“工具”中选择“椭圆形”, 或者在“资产”中点击左边的”控件“后选择”椭圆形“。如下图:

 Expression Blend操作: 使用behavior来控制Storyboard_behavior_03

3>向美工板拖入2个椭圆形,将其中一个椭圆的填充为红色。如下图:

 Expression Blend操作: 使用behavior来控制Storyboard_wpf_04

4>选择空白的椭圆, 然后右击, 选择”路径/转换为运动路径“。如下图:

 Expression Blend操作: 使用behavior来控制Storyboard_工作_05

5>这时Blend弹出”转换为运动路径“对话框,选择红色的椭圆, 点击确定。Blend就会为我们生成一个情景提要Storyboard1. 点击”play”可以立即看到动画效果。 如下图:

Expression Blend操作: 使用behavior来控制Storyboard_工作_06

6>关闭Storyboard1情节提要,如下图:

Expression Blend操作: 使用behavior来控制Storyboard_工具_07

7>在“资产”中点击“行为”, 选择“ControlStoryborardAction”, 拖动到“对象和时间线”中红色椭圆的节点下。 如下图:

Expression Blend操作: 使用behavior来控制Storyboard_behavior_08

8>点击添加的行为“ControlStoryboardAciton”, 选择“属性”, 如下图:

Expression Blend操作: 使用behavior来控制Storyboard_blend_09

9>SourceName为事件的触发对象, 此演示中即为红色椭圆;EventName为触发事件的名称,此演示中为单击鼠标左键;ControlStoryboardOption为情节提要的控制,有Play/Stop等等, 此演示中为Play;Storyboard为要控制的storyboard, 此演示中选择为我们刚刚创建好的Storyboard1. 总的来说就是单击红色椭圆,开始播放情节提要Storyboard1,也就是让红色椭圆开始转动。

10>F5运行,单击红色椭圆就可以看到大家想要的效果了。 如下图:

Expression Blend操作: 使用behavior来控制Storyboard_工作_10

(p.s.大家肯定发现程序一启动,动画就开始播放了, 原因是刚刚Blend为我们创建Storyboard1时,也在MainWindow.xaml创建了触发事件, 可以删掉此代码, 如下:

<Window.Triggers>      <EventTrigger RoutedEvent="FrameworkElement.Loaded">          <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>      </EventTrigger>  </Window.Triggers>

OK,通过此次演示, 相信大家都会了如何在Blend中用ControlStoryboardAction控制storyboard。

参考文献:Control Storyboards Easily using Behaviors

工程Demo:SourceCode