手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）

效果图:

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

一共6个点围绕一直圆转，所以需要使用rotation动画 并且一直转下去。

那么下面的问题就好解决了。

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

1. <DoubleAnimationUsingKeyFrames
2. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
3. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
4. <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">
5. </EasingDoubleKeyFrame>
6. <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">
7. </EasingDoubleKeyFrame>
8. <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">
9. </EasingDoubleKeyFrame>
10. <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>
11. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">
12. </EasingDoubleKeyFrame>
13. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">
14. </EasingDoubleKeyFrame>
15. </DoubleAnimationUsingKeyFrames>

上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值

代码如下：

1. <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
2. <Ellipse.RenderTransform>
3. <TransformGroup>
4. <ScaleTransform/>
5. <SkewTransform/>
6. <RotateTransform CenterX="-20" CenterY="-40"/>
7. <TranslateTransform/>
8. </TransformGroup>
9. </Ellipse.RenderTransform>
10. </Ellipse>

接下来的事情就好办了，我们需要他转1圈就消失 结束后也消失，所以需要控制透明度，

1. <DoubleAnimationUsingKeyFrames
2. Storyboard.TargetProperty="Opacity">
3. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
4. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
5. <EasingDoubleKeyFrame.EasingFunction>
6. <BackEase EasingMode="EaseInOut"/>
7. </EasingDoubleKeyFrame.EasingFunction>
8. </EasingDoubleKeyFrame>
9. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
10. </EasingDoubleKeyFrame>
11. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
12. </EasingDoubleKeyFrame>
13. <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
14. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
15. <EasingDoubleKeyFrame.EasingFunction>
16. <BackEase EasingMode="EaseOut"/>
17. </EasingDoubleKeyFrame.EasingFunction>
18. </EasingDoubleKeyFrame>
19. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">
20. </EasingDoubleKeyFrame>
21. </DoubleAnimationUsingKeyFrames>

最终把一个圆变成多个圆的工作 就交给代码了，需要一点点小技巧 以下使用.net 4.5实现 其他版本可以吧Task.Delay 替换成Thread.Sleep

1. <UserControl
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6. xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
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. <UserControl.Resources>
12. <Storyboard x:Key="Trans" RepeatBehavior="Forever">
13. <DoubleAnimationUsingKeyFrames
14. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
15. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
16. <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">
17. </EasingDoubleKeyFrame>
18. <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">
19. </EasingDoubleKeyFrame>
20. <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">
21. </EasingDoubleKeyFrame>
22. <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>
23. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">
24. </EasingDoubleKeyFrame>
25. <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">
26. </EasingDoubleKeyFrame>
27. </DoubleAnimationUsingKeyFrames>
28. <DoubleAnimationUsingKeyFrames
29. Storyboard.TargetProperty="Opacity">
30. <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
31. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
32. <EasingDoubleKeyFrame.EasingFunction>
33. <BackEase EasingMode="EaseInOut"/>
34. </EasingDoubleKeyFrame.EasingFunction>
35. </EasingDoubleKeyFrame>
36. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
37. </EasingDoubleKeyFrame>
38. <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
39. </EasingDoubleKeyFrame>
40. <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
41. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
42. <EasingDoubleKeyFrame.EasingFunction>
43. <BackEase EasingMode="EaseOut"/>
44. </EasingDoubleKeyFrame.EasingFunction>
45. </EasingDoubleKeyFrame>
46. <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">
47. </EasingDoubleKeyFrame>
48. </DoubleAnimationUsingKeyFrames>
49. </Storyboard>
50. </UserControl.Resources>
51. <Canvas>
52. <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
53. <Ellipse.RenderTransform>
54. <TransformGroup>
55. <ScaleTransform/>
56. <SkewTransform/>
57. <RotateTransform CenterX="-20" CenterY="-40"/>
58. <TranslateTransform/>
59. </TransformGroup>
60. </Ellipse.RenderTransform>
61. </Ellipse>
62. <Ellipse x:Name="el2" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0" >
63. <Ellipse.RenderTransform>
64. <TransformGroup>
65. <ScaleTransform/>
66. <SkewTransform/>
67. <RotateTransform CenterX="-20" CenterY="-40"/>
68. <TranslateTransform/>
69. </TransformGroup>
70. </Ellipse.RenderTransform>
71. </Ellipse>
72. <Ellipse x:Name="el3" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
73. <Ellipse.RenderTransform>
74. <TransformGroup>
75. <ScaleTransform/>
76. <SkewTransform/>
77. <RotateTransform CenterX="-20" CenterY="-40"/>
78. <TranslateTransform/>
79. </TransformGroup>
80. </Ellipse.RenderTransform>
81. </Ellipse>
82. <Ellipse x:Name="el4" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
83. <Ellipse.RenderTransform>
84. <TransformGroup>
85. <ScaleTransform/>
86. <SkewTransform/>
87. <RotateTransform CenterX="-20" CenterY="-40"/>
88. <TranslateTransform/>
89. </TransformGroup>
90. </Ellipse.RenderTransform>
91. </Ellipse>
92. <Ellipse x:Name="el5" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
93. <Ellipse.RenderTransform>
94. <TransformGroup>
95. <ScaleTransform/>
96. <SkewTransform/>
97. <RotateTransform CenterX="-20" CenterY="-40"/>
98. <TranslateTransform/>
99. </TransformGroup>
100. </Ellipse.RenderTransform>
101. </Ellipse>
102. <Ellipse x:Name="el6" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
103. <Ellipse.RenderTransform>
104. <TransformGroup>
105. <ScaleTransform/>
106. <SkewTransform/>
107. <RotateTransform CenterX="-20" CenterY="-40"/>
108. <TranslateTransform/>
109. </TransformGroup>
110. </Ellipse.RenderTransform>
111. </Ellipse>
112. </Canvas>
113. </UserControl>

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Threading;
6. using System.Threading.Tasks;
7. using System.Windows;
8. using System.Windows.Controls;
9. using System.Windows.Data;
10. using System.Windows.Documents;
11. using System.Windows.Input;
12. using System.Windows.Media;
13. using System.Windows.Media.Animation;
14. using System.Windows.Media.Imaging;
15. using System.Windows.Navigation;
16. using System.Windows.Shapes;
17. namespace Transvalue.MetroStyleBusyIndicator
18. {
19. /// <summary>
20. /// MetroRotaionIndicator.xaml 的交互逻辑
21. /// </summary>
22. public partial class MetroRotaionIndicator : UserControl
23. {
24. Storyboard trans;
25. public MetroRotaionIndicator()
26. {
27. InitializeComponent();
28. trans = Resources["Trans"] as Storyboard;
29. this.Loaded += ((sender, e) =>
30. {
31. Active();
32. });
33. }
34. public async void Active()
35. {
36. el.BeginStoryboard(trans);
37. await Task.Delay(170);
38. el2.BeginStoryboard(trans);
39. await Task.Delay(170);
40. el3.BeginStoryboard(trans);
41. await Task.Delay(170);
42. el4.BeginStoryboard(trans);
43. await Task.Delay(170);
44. el5.BeginStoryboard(trans);
45. await Task.Delay(170);
46. el6.BeginStoryboard(trans);
47. }
48. public void Stop()
49. {
50. trans.Stop(el);
51. trans.Stop(el2);
52. trans.Stop(el3);
53. trans.Stop(el4);
54. trans.Stop(el5);
55. trans.Stop(el6);
56. }
57. }
58. }

将以上内容编译成用户控件即可使用。

xmlns:MetroStyleBusyIndicator="clr-namespace:Transvalue.MetroStyleBusyIndicator;assembly=Transvalue.MetroStyleBusyIndicator"

<MetroStyleBusyIndicator:MetroRotaionIndicator HorizontalAlignment="Left" Height="187" Margin="924,534,0,0" VerticalAlignment="Top" Width="217"/>