手把手教你 用 wpf 制作metro ProgressRing 原创.docx
《手把手教你 用 wpf 制作metro ProgressRing 原创.docx》由会员分享，可在线阅读，更多相关《手把手教你 用 wpf 制作metro ProgressRing 原创.docx（16页珍藏版）》请在冰点文库上搜索。
手把手教你用wpf制作metroProgressRing原创
效果图:
bolg地址：
还在羡慕metro的ProgressRing吗？
wpf也可以拥有
首先说下思路，
一共6个点围绕一直圆转，所以需要使用rotation动画并且一直转下去。
那么下面的问题就好解决了。
首先是xaml部分
我们需要实现旋转动画：
所以要用到这个：
[html]viewplaincopyprint?
1.2. Storyboard.TargetProperty="（Ellipse.RenderTransform）.（TransformGroup.Children）[2].（RotateTransform.Angle）">
3. 0:
0"/>
4. 0:
0.2">
5.
6. 0:
1.6">
7.
8. 0:
1.8">
9.
10. 0:
3.2"/>
11. 0:
3.4">
12.
13. 0:
5.0">
14.
15.
0:
0"/>0:
0.2">0:
1.6">0:
1.8">0:
3.2"/>0:
3.4">0:
5.0">
上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值
代码如下：
[html]viewplaincopyprint?
1.Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
2.
3.
4.
5.
6.
7.
8.
9.
10.
Name="el"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57">
接下来的事情就好办了，我们需要他转1圈就消失结束后也消失，所以需要控制透明度，
[html]viewplaincopyprint?
1.2. Storyboard.TargetProperty="Opacity">
3. 0:
0"/>
4. 0:
0.2">
5.
6.
7.
8.
9. 0:
1.6">
10.
11. 0:
1.8">
12.
13. 0:
3.2"/>
14. 0:
3.5">
15.
16.
17.
18.
19. 0:
5.0">
20.
21.
0:
0"/>0:
0.2">0:
1.6">0:
1.8">0:
3.2"/>0:
3.5">0:
5.0">
最终把一个圆变成多个圆的工作就交给代码了，需要一点点小技巧以下使用.net4.5实现其他版本可以吧Task.Delay替换成Thread.Sleep
[html]viewplaincopyprint?
1.2. xmlns="
3. xmlns:
x="
4. xmlns:
mc="http:
//schemas.openxmlformats.org/markup-compatibility/2006"
5. xmlns:
d="
6. xmlns:
i="
7. xmlns:
local="clr-namespace:
Transvalue.MetroStyleBusyIndicator"
8. x:
Class="Transvalue.MetroStyleBusyIndicator.MetroRotaionIndicator"
9. mc:
Ignorable="d"
10. d:
DesignHeight="300" d:
DesignWidth="300">
11.
12. Key="Trans" RepeatBehavior="Forever">
13. 14. Storyboard.TargetProperty="（Ellipse.RenderTransform）.（TransformGroup.Children）[2].（RotateTransform.Angle）">
15. 0:
0"/>
16. 0:
0.2">
17.
18. 0:
1.6">
19.
20. 0:
1.8">
21.
22. 0:
3.2"/>
23. 0:
3.4">
24.
25. 0:
5.0">
26.
27.
28. 29. Storyboard.TargetProperty="Opacity">
30. 0:
0"/>
31. 0:
0.2">
32.
33.
34.
35.
36. 0:
1.6">
37.
38. 0:
1.8">
39.
40. 0:
3.2"/>
41. 0:
3.5">
42.
43.
44.
45.
46. 0:
5.0">
47.
48.
49.
50.
51.
52. Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
53.
54.
55.
56.
57.
58.
59.
60.
61.
62. Name="el2" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0" >
63.
64.
65.
66.
67.
68.
69.
70.
71.
72. Name="el3" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
73.
74.
75.
76.
77.
78.
79.
80.
81.
82. Name="el4" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0
升级会员 