多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
Blend是WPF/SL开发人员的利器, 你可以在美工板上绘制形状、路径和控件,然后修改其外观和行为,你也可以导入图像、视频和声音等等。 今天我给大家演示如何用Blend中提供的ControlStoryboardAction行为来控制Storyboard(情节提要)。环境为Blend3+win7. 1.打开Blend, 创建wpf工程,默认为WpfApplication1. 如下图: [![1](https://box.kancloud.cn/2016-02-02_56b00159c3d3a.gif "1")](http://hi.csdn.net/attachment/201006/22/1278723_1277187306Kfab.png) 2.利用Blend创建一个简单的动画 > 1>首先把Blend的工作区选为“动画”, 切换快捷键为F6,打开方式“窗口/工作区/动画”。 如下图: >  [![2](https://box.kancloud.cn/2016-02-02_56b00159d28ba.gif "2")](http://hi.csdn.net/attachment/201006/22/1278723_1277187308MffY.png) > 2>在“工具”中选择“椭圆形”, 或者在“资产”中点击左边的”控件“后选择”椭圆形“。如下图: >  [![3](https://box.kancloud.cn/2016-02-02_56b00159e73ec.gif "3")](http://hi.csdn.net/attachment/201006/22/1278723_1277187309D4Vd.png) > 3>向美工板拖入2个椭圆形,将其中一个椭圆的填充为红色。如下图: >  ![4](https://box.kancloud.cn/2016-02-02_56b0015a020e5.gif "4") > 4>选择空白的椭圆, 然后右击, 选择”路径/转换为运动路径“。如下图: >  [![5](https://box.kancloud.cn/2016-02-02_56b0015a11272.gif "5")](http://hi.csdn.net/attachment/201006/22/1278723_1277187311bbbZ.png) > 5>这时Blend弹出”转换为运动路径“对话框,选择红色的椭圆, 点击确定。Blend就会为我们生成一个情景提要Storyboard1. 点击”play”可以立即看到动画效果。 如下图: > [![6](https://box.kancloud.cn/2016-02-02_56b0015a2289c.gif "6")](http://hi.csdn.net/attachment/201006/22/1278723_1277187316JtGX.png) > 6>关闭Storyboard1情节提要,如下图: > [![7](https://box.kancloud.cn/2016-02-02_56b0015a3e65a.gif "7")](http://hi.csdn.net/attachment/201006/22/1278723_127718731872Z1.png) > 7>在“资产”中点击“行为”, 选择“ControlStoryborardAction”, 拖动到“对象和时间线”中红色椭圆的节点下。 如下图: > [![8](https://box.kancloud.cn/2016-02-02_56b0015a4da15.gif "8")](http://hi.csdn.net/attachment/201006/22/0_1277189925h81Q.gif) > 8>点击添加的行为“ControlStoryboardAciton”, 选择“属性”, 如下图: > [![9](https://box.kancloud.cn/2016-02-02_56b0015a5d268.gif "9")](http://hi.csdn.net/attachment/201006/22/1278723_1277187320uffL.png) > 9>SourceName为事件的触发对象, 此演示中即为红色椭圆;EventName为触发事件的名称,此演示中为单击鼠标左键;ControlStoryboardOption为情节提要的控制,有Play/Stop等等, 此演示中为Play;Storyboard为要控制的storyboard, 此演示中选择为我们刚刚创建好的Storyboard1. 总的来说就是单击红色椭圆,开始播放情节提要Storyboard1,也就是让红色椭圆开始转动。 > 10>F5运行,单击红色椭圆就可以看到大家想要的效果了。 如下图: > [![10](https://box.kancloud.cn/2016-02-02_56b0015a6e3ed.gif "10")](http://hi.csdn.net/attachment/201006/22/1278723_12771873220Lll.png) > (p.s.大家肯定发现程序一启动,动画就开始播放了, 原因是刚刚Blend为我们创建Storyboard1时,也在MainWindow.xaml创建了触发事件, 可以删掉此代码, 如下: ~~~ <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> </EventTrigger> </Window.Triggers> ~~~ [](http://11011.net/software/vspaste) OK,通过此次演示, 相信大家都会了如何在Blend中用ControlStoryboardAction控制storyboard。 参考文献:[Control Storyboards Easily using Behaviors](http://blogs.msdn.com/b/expression/archive/2010/05/25/control-storyboards-easily-using-behaviors.aspx) 工程Demo:[SourceCode](http://d.download.csdn.net/down/2475753/muzizongheng)