超炫酷的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教程