简单的等待进度条

[img]http://dl.iteye.com/upload/attachment/205307/49820dda-853d-3b0d-9c65-050ea29e107b.png[/img]
最近我需要制作一些简单的进度条以显示“等待状态”(就像Vista里这样：
[img]http://dl.iteye.com/upload/attachment/205309/bf2e9510-edb9-3015-ad4b-8d83b333c3ce.png[/img]
)。 Microsoft Expression Blend 使你能在一分钟甚至更少的时间内就完成具有非常眩目效果的动画。
我将向你展示如何制作非常简单的连续动画，并针对制作快速动画给出一些提示。
在你继续之前的最小要求是: 这篇文章并不是写给菜鸟的， 这意味着你在操作 Microsoft Expression Blend上必须具有一些基本的知识和经验。
[b]1. 绘图[/b]
使用工具: Microsoft Expression Blend 1/2/3
打开 Microsoft Expression Blend 并创建一个新的WPF应用程序工程。（如果是创建Silverlight应用程序，在Blend的Window菜单下没有Trigger菜单，只有WPF应用程序才有）
在主窗体中绘制两个圆形。
选择 椭圆形 并按住 Shift键 来画出正圆 (小圆的半径大约是大圆的60%).
[img]http://dl.iteye.com/upload/attachment/205311/24f8d115-35e3-3257-b25c-69a4151a3c17.png[/img]

[img]http://dl.iteye.com/upload/attachment/205313/d0a8dc3d-36c1-35b5-92d2-8539af0c233b.png[/img]

[img]http://dl.iteye.com/upload/attachment/205315/705ee2f5-55b8-33c0-b594-23cfac4d076b.png[/img]
[b]2. 对齐[/b]
现在我们要把小圆对齐在大圆的中心。
选择两个圆并单击鼠标右键， 然后选择 对齐 > 水平居中 和 对齐 > 垂直居中 。
[img]http://dl.iteye.com/upload/attachment/205317/0faaa975-7903-3f19-bbd3-1710b614e774.png[/img]

[img]http://dl.iteye.com/upload/attachment/205319/1f91f28d-9e7b-3bc7-9890-1bf10ab498bf.png[/img]
[b]3. 合并[/b]
现在要将两圆合并成为一个图形。
选择两圆，然后单击鼠标右键，选择 合并 > 排除重叠 。
[img]http://dl.iteye.com/upload/attachment/205321/0e8cddd3-ece8-383f-94ee-23ac4e96a6a6.png[/img]

[img]http://dl.iteye.com/upload/attachment/205323/c063395c-6a6b-3098-b66c-7e6dba8be404.png[/img]
4. 填充颜色
先来填充背景色：
我们选择自己喜好的色彩，然后用 渐变画笔 来填充。一侧颜色深一些，另一侧颜色浅一些，可以设置成半透明。
[img]http://dl.iteye.com/upload/attachment/205325/2503fd16-a04e-397c-9207-2d087c9b773b.png[/img]

[img]http://dl.iteye.com/upload/attachment/205327/de207949-f97a-33e2-a279-adad1c6f67d9.png[/img]

[img]http://dl.iteye.com/upload/attachment/205329/2dd79a91-8228-30ed-acca-7f41a0a85b11.png[/img]
再来填充轮廓的颜色：

是用纯色画笔或者渐变画笔均可 (也可以设置成半透明)。


[img]http://dl.iteye.com/upload/attachment/205331/cb1f53a6-df9f-3e92-9a13-3b3a70e9ec36.png[/img]

[img]http://dl.iteye.com/upload/attachment/205333/d7c200d2-b08e-39ed-ac2c-e52f17ea33ea.png[/img]
现在就要转换这一环状图形成为控件了。

在图形上单击鼠标右键，然后选择 生成控件 。

[img]http://dl.iteye.com/upload/attachment/205335/219d7370-268b-39b2-aaba-ed67de0de86b.png[/img]

[img]http://dl.iteye.com/upload/attachment/205337/4bae6cae-1a16-320d-b31a-5d887018f166.png[/img]
这样 Microsoft Expression Blend就会从我们声明的图形来创建一个新的用户控件 (并且用我们生成的实例“ucWaiting”替换 “Window1”中的图形路径)。

[img]http://dl.iteye.com/upload/attachment/205339/59051d99-78dc-3bae-9842-acea711ae17e.png[/img]

[img]http://dl.iteye.com/upload/attachment/205341/1b15bfdd-6fbe-3977-91d0-19bd1f7e6137.png[/img]
现在，在你继续下面的工作之前，必须重新生成一下工程，以更新控件的引用。
[b]5. 创建简单的旋转动画[/b]
由于控件必须在其加载事件触发时就播放连续动画,所以我建议从触发器面板中添加一个新的事件触发器来新建一个 stroryboard。

单击在 触发器 面板上的 + 事件 按钮 ， Microsoft Expression Blend 将会添加一个默认的事件 'Loaded' (即当控件在可见的父容器中加载时就触发事件)。
再单击 + 按钮 并在弹出的询问你是否创建新的Stroryboard（动画）的对话框中单击 确定。

[img]http://dl.iteye.com/upload/attachment/205345/7c06d457-7e7e-3177-81a3-ada0d7aca49a.png[/img]

[img]http://dl.iteye.com/upload/attachment/205347/ac09dcae-1971-32f8-9e29-9397fc6b6a6b.png[/img]
这些操作将会在 时间线 上创建一个叫做 “OnLoaded1” 的新的storyboard (动画）。
这时 Microsoft Expression Blend会自动切换到 时间线记录模式, 单击 红色的圆 以关闭该模式（见图中标注）:

[img]http://dl.iteye.com/upload/attachment/205349/457d61ad-598f-3ddf-8653-3eb32523d454.png[/img]
通过在时间线中录制新的关键帧，来保存当前图形的位置。放大时间线，并将坐标移动到 0.5秒 的位置。选择图形，也就是我们的环状控件，然后单击上述步骤中的红色的圆，开始录制动作。
[img]http://dl.iteye.com/upload/attachment/205351/a2ee2769-70aa-3b1a-b71c-67d1d033fedc.png[/img]

[img]http://dl.iteye.com/upload/attachment/205353/c462c7c1-6a8f-3438-afdd-29c318d8cb0c.png[/img]
将图形旋转360度 (按住 Shift键 来旋转45度。 每个运动阶段个旋转一次。)。 在一个周期完成后,关闭录制模式。这时你可以通过 播放 按钮来预览动画了。

[img]http://dl.iteye.com/upload/attachment/205355/aefc7e0d-5054-3f63-a057-833faa2f0d2d.png[/img]

[img]http://dl.iteye.com/upload/attachment/205357/13b94b3b-2db4-3a25-9002-58f86eaec5ae.png[/img]
Storyboard 包含了 两个关键帧 的动画, 动画又使得图形产生了简单的旋转。这一动画将在 Load 事件触发时开始播放。

[b]6. 连续的动画[/b]

在上一步的基础上我们再来制作连续的动画：

在对象和时间线面板中展开 “path” 对象，再展开 “RenderTransform” 和 “Rotation” 动画。在 “Angle” 上单击右键，并选择 “编辑重复次数”。
在打开的“编辑重复” 窗口中单击 “设置为永久的” 图形按钮， 然后单击 “确定” 关闭对话框。

[img]http://dl.iteye.com/upload/attachment/205359/31a27c33-f59d-3495-a0db-5187061de0e1.png[/img]

[img]http://dl.iteye.com/upload/attachment/205361/45efe38e-07dc-3308-b852-4907abb1e4e8.png[/img]
这样动画就用永远地播放下去了。
7.完成

最后，在主窗体中调整控件的大小，然后测试工程。
设置控件的大小为 24x24 像素，然后按 F5键 进行测试
[img]http://dl.iteye.com/upload/attachment/205363/f102d7a8-c4ed-332a-abfb-a0a2faa12141.png[/img]
现在它彻底完成了！

>> 当然你也可以通过添加额外的函数、属性来扩展这个控件 (比如一个 boolean 类型的属性'EnableAnimation' 或者 'ContinuouseAnimation'), 还可以使用更多更眩目的图形设计或者颜色。
提示…
[b]以下是有关动画的一些提示：[/b]
这个子菜单允许你通过更简单的方式创建动画:

[img]http://dl.iteye.com/upload/attachment/205365/89832cf0-697c-3fbf-b3e3-7f55ad62866e.png[/img]
许多初学者对这些选项不熟悉:

[复制] - 复制选中的动画,在你想要复制已经存在的动画时非常有用

[反转] - 反转关键帧，在你想要反转关键帧或者通过反转关键帧复制某些动画时非常有用。比如， 一个动画用于显示某些 GUI 元素, 而另一个又用于隐藏这一元素;这时你就可以创建一个显示的动画，然后通过复制反转关键帧的动画来制作隐藏的动画。
希望这篇文章对你能有帮助 ;-)