超炫酷的WPF实现Loading控件效果

时间  2020-02-09
标签 wpf 实现 loading 控件 效果 繁體版
原文   原文链接

这篇文章主要介绍了超炫酷的WPF实现Loading控件效果，感兴趣的小伙伴们能够参考一下ide


Win8系统的Loading效果仍是很不错的，网上也有人用CSS3等技术实现，研究了一下，并打算用WPF自定义一个Loading控件实现相似的效果，并可让用户对Loading的颗粒（Particle）背景颜色进行自定义，话很少说，直接上代码：函数

一、用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo，VS自动生成以下结构：学习

二、删除UserControl1.xaml，并新建一个Loading的CustomControl(不是UserControl),以下图所示：测试

三、若是报错找不到Loading类型，请编译，下面在Generic.xaml主题文件中对Loading的样式和内容进行定义（注意添加编码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
xmlns:system = "clr-namespace:System;assembly=mscorlib" ），代码以下：
<ResourceDictionary
  xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:system = "clr-namespace:System;assembly=mscorlib"
  xmlns:local= "clr-namespace:WpfControlLibraryDemo" >
 
 
  <Style TargetType= "{x:Type local:Loading}" >
  <Setter Property= "Template" >
   <Setter.Value>
   <ControlTemplate TargetType= "{x:Type local:Loading}" >
    <Border Background= "{TemplateBinding Background}"
     BorderBrush= "{TemplateBinding BorderBrush}"
     BorderThickness= "{TemplateBinding BorderThickness}" >
    <Grid Width = "50" Height = "50" >
     <Grid.Resources>
     <!-- Value Converters -->
     
     <!-- Particle Styling ,must to has RelativeSource -->
     <SolidColorBrush x:Key = "ParticleColor" Color = "{Binding Path=FillColor,RelativeSource={RelativeSource TemplatedParent}}" />
     <SolidColorBrush x:Key = "ParticleBackgroundColor" Color = "Transparent" />
     <system:Double x:Key = "ParticleOpacity" >1</system:Double>
     <system:Double x:Key = "ParticleRadius" >5</system:Double>
 
     <system:Double x:Key = "StartingPointX" >0</system:Double>
     <system:Double x:Key = "StartingPointY" >-20</system:Double>
 
     <system:Double x:Key = "RotationPointX" >0.5</system:Double>
     <system:Double x:Key = "RotationPointY" >0.5</system:Double>
 
     <!-- StoryBoard -->
     <system:TimeSpan x:Key = "StoryBoardBeginTimeP0" >00:00:00.000</system:TimeSpan>
     <system:TimeSpan x:Key = "StoryBoardBeginTimeP1" >00:00:00.100</system:TimeSpan>
     <system:TimeSpan x:Key = "StoryBoardBeginTimeP2" >00:00:00.200</system:TimeSpan>
     <system:TimeSpan x:Key = "StoryBoardBeginTimeP3" >00:00:00.300</system:TimeSpan>
     <system:TimeSpan x:Key = "StoryBoardBeginTimeP4" >00:00:00.400</system:TimeSpan>
     <Duration x:Key = "StoryBoardDuration" >00:00:01.800</Duration>
 
     <!-- Particle Origin Angles -->
     <system:Double x:Key = "ParticleOriginAngleP0" >0</system:Double>
     <system:Double x:Key = "ParticleOriginAngleP1" >-10</system:Double>
     <system:Double x:Key = "ParticleOriginAngleP2" >-20</system:Double>
     <system:Double x:Key = "ParticleOriginAngleP3" >-30</system:Double>
     <system:Double x:Key = "ParticleOriginAngleP4" >-40</system:Double>
 
     <!-- Particle Position & Timing 1 -->
     <system:Double x:Key = "ParticleBeginAngle1" >0</system:Double>
     <system:Double x:Key = "ParticleEndAngle1" >90</system:Double>
     <system:TimeSpan x:Key = "ParticleBeginTime1" >00:00:00.000</system:TimeSpan>
     <Duration x:Key = "ParticleDuration1" >00:00:00.750</Duration>
 
     <!-- Particle Position & Timing 2 -->
     <system:Double x:Key = "ParticleBeginAngle2" >90</system:Double>
     <system:Double x:Key = "ParticleEndAngle2" >270</system:Double>
     <system:TimeSpan x:Key = "ParticleBeginTime2" >00:00:00.751</system:TimeSpan>
     <Duration x:Key = "ParticleDuration2" >00:00:00.300</Duration>
 
     <!-- Particle Position & Timing 3 -->
     <system:Double x:Key = "ParticleBeginAngle3" >270</system:Double>
     <system:Double x:Key = "ParticleEndAngle3" >360</system:Double>
     <system:TimeSpan x:Key = "ParticleBeginTime3" >00:00:01.052</system:TimeSpan>
     <Duration x:Key = "ParticleDuration3" >00:00:00.750</Duration>
 
     <Style x:Key = "EllipseStyle" TargetType = "Ellipse" >
      <Setter Property = "Width" Value = "{StaticResource ParticleRadius}" />
      <Setter Property = "Height" Value = "{StaticResource ParticleRadius}" />
      <Setter Property = "Fill" Value = "{StaticResource ParticleColor}" />
      <Setter Property = "RenderTransformOrigin" Value = "0.5, 0.5" />
      <Setter Property = "Opacity" Value = "{StaticResource ParticleOpacity}" />
     </Style>
     </Grid.Resources>
     <Canvas Width = "1" Height = "1" Margin= "0,0,0,0" >
     <Canvas.Triggers>
      <EventTrigger RoutedEvent = "Canvas.Loaded" >
      <EventTrigger.Actions>
       <BeginStoryboard>
       <Storyboard
     
     BeginTime = "{StaticResource StoryBoardBeginTimeP0}"
     Duration = "{StaticResource StoryBoardDuration}"
     RepeatBehavior = "Forever" >
        <DoubleAnimation
     Storyboard.TargetName = "p0"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle1}"
     To = "{StaticResource ParticleEndAngle1}"
     BeginTime = "{StaticResource ParticleBeginTime1}"
     Duration = "{StaticResource ParticleDuration1}" />
        <DoubleAnimation
     Storyboard.TargetName = "p0"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle2}"
     To = "{StaticResource ParticleEndAngle2}"
     BeginTime = "{StaticResource ParticleBeginTime2}"
     Duration = "{StaticResource ParticleDuration2}" />
        <DoubleAnimation
     Storyboard.TargetName = "p0"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle3}"
     To = "{StaticResource ParticleEndAngle3}"
     BeginTime = "{StaticResource ParticleBeginTime3}"
     Duration = "{StaticResource ParticleDuration3}" />
       </Storyboard>
       </BeginStoryboard>
       <BeginStoryboard>
       <Storyboard
     
     BeginTime = "{StaticResource StoryBoardBeginTimeP1}"
     Duration = "{StaticResource StoryBoardDuration}"
     RepeatBehavior = "Forever" >
 
        <DoubleAnimation
     Storyboard.TargetName = "p1"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle1}"
     To = "{StaticResource ParticleEndAngle1}"
     BeginTime = "{StaticResource ParticleBeginTime1}"
     Duration = "{StaticResource ParticleDuration1}" />
        <DoubleAnimation
     Storyboard.TargetName = "p1"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle2}"
     To = "{StaticResource ParticleEndAngle2}"
     BeginTime = "{StaticResource ParticleBeginTime2}"
     Duration = "{StaticResource ParticleDuration2}" />
        <DoubleAnimation
     Storyboard.TargetName = "p1"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle3}"
     To = "{StaticResource ParticleEndAngle3}"
     BeginTime = "{StaticResource ParticleBeginTime3}"
     Duration = "{StaticResource ParticleDuration3}" />
       </Storyboard>
       </BeginStoryboard>
       <BeginStoryboard>
       <Storyboard
     
     BeginTime = "{StaticResource StoryBoardBeginTimeP2}"
     Duration = "{StaticResource StoryBoardDuration}"
     RepeatBehavior = "Forever" >
 
        <DoubleAnimation
     Storyboard.TargetName = "p2"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle1}"
     To = "{StaticResource ParticleEndAngle1}"
     BeginTime = "{StaticResource ParticleBeginTime1}"
     Duration = "{StaticResource ParticleDuration1}" />
        <DoubleAnimation
     Storyboard.TargetName = "p2"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle2}"
     To = "{StaticResource ParticleEndAngle2}"
     BeginTime = "{StaticResource ParticleBeginTime2}"
     Duration = "{StaticResource ParticleDuration2}" />
        <DoubleAnimation
     Storyboard.TargetName = "p2"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle3}"
     To = "{StaticResource ParticleEndAngle3}"
     BeginTime = "{StaticResource ParticleBeginTime3}"
     Duration = "{StaticResource ParticleDuration3}" />
       </Storyboard>
       </BeginStoryboard>
 
       <BeginStoryboard>
       <Storyboard
     
     BeginTime = "{StaticResource StoryBoardBeginTimeP3}"
     Duration = "{StaticResource StoryBoardDuration}"
     RepeatBehavior = "Forever" >
 
        <DoubleAnimation
     Storyboard.TargetName = "p3"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle1}"
     To = "{StaticResource ParticleEndAngle1}"
     BeginTime = "{StaticResource ParticleBeginTime1}"
     Duration = "{StaticResource ParticleDuration1}" />
        <DoubleAnimation
     Storyboard.TargetName = "p3"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle2}"
     To = "{StaticResource ParticleEndAngle2}"
     BeginTime = "{StaticResource ParticleBeginTime2}"
     Duration = "{StaticResource ParticleDuration2}" />
        <DoubleAnimation
     Storyboard.TargetName = "p3"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle3}"
     To = "{StaticResource ParticleEndAngle3}"
     BeginTime = "{StaticResource ParticleBeginTime3}"
     Duration = "{StaticResource ParticleDuration3}" />
       </Storyboard>
       </BeginStoryboard>
 
       <BeginStoryboard>
       <Storyboard
     
     BeginTime = "{StaticResource StoryBoardBeginTimeP4}"
     Duration = "{StaticResource StoryBoardDuration}"
     RepeatBehavior = "Forever" >
 
        <DoubleAnimation
     Storyboard.TargetName = "p4"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle1}"
     To = "{StaticResource ParticleEndAngle1}"
     BeginTime = "{StaticResource ParticleBeginTime1}"
     Duration = "{StaticResource ParticleDuration1}" />
        <DoubleAnimation
     Storyboard.TargetName = "p4"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle2}"
     To = "{StaticResource ParticleEndAngle2}"
     BeginTime = "{StaticResource ParticleBeginTime2}"
     Duration = "{StaticResource ParticleDuration2}" />
        <DoubleAnimation
     Storyboard.TargetName = "p4"
     Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"
     From = "{StaticResource ParticleBeginAngle3}"
     To = "{StaticResource ParticleEndAngle3}"
     BeginTime = "{StaticResource ParticleBeginTime3}"
     Duration = "{StaticResource ParticleDuration3}" />
       </Storyboard>
       </BeginStoryboard>
      </EventTrigger.Actions>
      </EventTrigger>
     </Canvas.Triggers>
     <Border
   x:Name = "p0"
   Background = "{StaticResource ParticleBackgroundColor}"
   Opacity = "{StaticResource ParticleOpacity}" >
      <Border.RenderTransform>
      <RotateTransform/>
      </Border.RenderTransform>
      <Border.RenderTransformOrigin>
      <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}" />
      </Border.RenderTransformOrigin>
      <Ellipse Style = "{StaticResource EllipseStyle}" >
      <Ellipse.RenderTransform>
       <TransformGroup>
       <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}" />
       <RotateTransform Angle = "{StaticResource ParticleOriginAngleP0}" />
       </TransformGroup>
      </Ellipse.RenderTransform>
      </Ellipse>
     </Border>
     <Border
   x:Name = "p1"
   Background = "{StaticResource ParticleBackgroundColor}"
   Opacity = "{StaticResource ParticleOpacity}" >
      <Border.RenderTransform>
      <RotateTransform/>
      </Border.RenderTransform>
      <Border.RenderTransformOrigin>
      <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}" />
      </Border.RenderTransformOrigin>
      <Ellipse Style = "{StaticResource EllipseStyle}" >
      <Ellipse.RenderTransform>
       <TransformGroup>
       <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}" />
       <RotateTransform Angle = "{StaticResource ParticleOriginAngleP1}" />
       </TransformGroup>
      </Ellipse.RenderTransform>
      </Ellipse>
     </Border>
     <Border
   x:Name = "p2"
   Background = "{StaticResource ParticleBackgroundColor}"
   Opacity = "{StaticResource ParticleOpacity}" >
      <Border.RenderTransform>
      <RotateTransform/>
      </Border.RenderTransform>
      <Border.RenderTransformOrigin>
      <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}" />
      </Border.RenderTransformOrigin>
      <Ellipse Style = "{StaticResource EllipseStyle}" >
      <Ellipse.RenderTransform>
       <TransformGroup>
       <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}" />
       <RotateTransform Angle = "{StaticResource ParticleOriginAngleP2}" />
       </TransformGroup>
      </Ellipse.RenderTransform>
      </Ellipse>
     </Border>
     <Border
   x:Name = "p3"
   Background = "{StaticResource ParticleBackgroundColor}"
   Opacity = "{StaticResource ParticleOpacity}" >
      <Border.RenderTransform>
      <RotateTransform/>
      </Border.RenderTransform>
      <Border.RenderTransformOrigin>
      <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}" />
      </Border.RenderTransformOrigin>
      <Ellipse Style = "{StaticResource EllipseStyle}" >
      <Ellipse.RenderTransform>
       <TransformGroup>
       <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}" />
       <RotateTransform Angle = "{StaticResource ParticleOriginAngleP3}" />
       </TransformGroup>
      </Ellipse.RenderTransform>
      </Ellipse>
     </Border>
     <Border
   x:Name = "p4"
   Background = "{StaticResource ParticleBackgroundColor}"
   Opacity = "{StaticResource ParticleOpacity}" >
      <Border.RenderTransform>
      <RotateTransform/>
      </Border.RenderTransform>
      <Border.RenderTransformOrigin>
      <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}" />
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程