Silverlight下实现Windows8风格的进度条

  1            <Style TargetType="ProgressBar">
  2                             <Setter Property="IsIndeterminate"
  3                                     Value="True" />
  4                             <Setter Property="Background"
  5                                     Value="White" />
  6                             <Setter Property="Height"
  7                                     Value="40" />
  8                             <Setter Property="Width"
  9                                     Value="40" />
 10                             <Setter Property="Margin"
 11                                     Value="0" />
 12                             <Setter Property="Template">
 13                                 <Setter.Value>
 14                                     <ControlTemplate TargetType="ProgressBar">
 15                                         <Grid x:Name="Root"
 16                                               Background="Transparent">
 17                                             <VisualStateManager.VisualStateGroups>
 18                                                 <VisualStateGroup x:Name="CommonStates">
 19                                                     <VisualState x:Name="Determinate" />
 20                                                     <VisualState x:Name="Indeterminate">
 21                                                         <Storyboard RepeatBehavior="Forever">
 22                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1"
 23                                                                                            Storyboard.TargetProperty="Opacity"
 24                                                                                            BeginTime="0">
 25                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 26                                                                                         Value="1" />
 27                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 28                                                                                         Value="1" />
 29                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 30                                                                                         Value="0" />
 31                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 32                                                                                         Value="0" />
 33                                                             </DoubleAnimationUsingKeyFrames>
 34                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2"
 35                                                                                            Storyboard.TargetProperty="Opacity"
 36                                                                                            BeginTime="00:00:00.167">
 37                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 38                                                                                         Value="1" />
 39                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 40                                                                                         Value="1" />
 41                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 42                                                                                         Value="0" />
 43                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 44                                                                                         Value="0" />
 45                                                             </DoubleAnimationUsingKeyFrames>
 46                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3"
 47                                                                                            Storyboard.TargetProperty="Opacity"
 48                                                                                            BeginTime="00:00:00.334">
 49                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 50                                                                                         Value="1" />
 51                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 52                                                                                         Value="1" />
 53                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 54                                                                                         Value="0" />
 55                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 56                                                                                         Value="0" />
 57                                                             </DoubleAnimationUsingKeyFrames>
 58                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4"
 59                                                                                            Storyboard.TargetProperty="Opacity"
 60                                                                                            BeginTime="00:00:00.501">
 61                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 62                                                                                         Value="1" />
 63                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 64                                                                                         Value="1" />
 65                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 66                                                                                         Value="0" />
 67                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 68                                                                                         Value="0" />
 69                                                             </DoubleAnimationUsingKeyFrames>
 70                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5"
 71                                                                                            Storyboard.TargetProperty="Opacity"
 72                                                                                            BeginTime="00:00:00.668">
 73                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 74                                                                                         Value="1" />
 75                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 76                                                                                         Value="1" />
 77                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 78                                                                                         Value="0" />
 79                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 80                                                                                         Value="0" />
 81                                                             </DoubleAnimationUsingKeyFrames>
 82                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E6"
 83                                                                                            Storyboard.TargetProperty="Opacity"
 84                                                                                            BeginTime="00:00:00.835">
 85                                                                 <DiscreteDoubleKeyFrame KeyTime="0"
 86                                                                                         Value="1" />
 87                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
 88                                                                                         Value="1" />
 89                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
 90                                                                                         Value="0" />
 91                                                                 <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
 92                                                                                         Value="0" />
 93                                                             </DoubleAnimationUsingKeyFrames>
 94                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1R"
 95                                                                                            BeginTime="0"
 96                                                                                            Storyboard.TargetProperty="Angle">
 97                                                                 <SplineDoubleKeyFrame KeyTime="0"
 98                                                                                       Value="-110"
 99                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
100                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
101                                                                                       Value="10"
102                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
103                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
104                                                                                       Value="93" />
105                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
106                                                                                       Value="205"
107                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
108                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
109                                                                                       Value="357"
110                                                                                       KeySpline="0,0.19,0.07,0.72" />
111                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
112                                                                                       Value="439" />
113                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
114                                                                                       Value="585"
115                                                                                       KeySpline="0,0,0.95,0.37" />
116                                                             </DoubleAnimationUsingKeyFrames>
117                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2R"
118                                                                                            BeginTime="00:00:00.167"
119                                                                                            Storyboard.TargetProperty="Angle">
120                                                                 <SplineDoubleKeyFrame KeyTime="0"
121                                                                                       Value="-116"
122                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
123                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
124                                                                                       Value="4"
125                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
126                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
127                                                                                       Value="87" />
128                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
129                                                                                       Value="199"
130                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
131                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
132                                                                                       Value="351"
133                                                                                       KeySpline="0,0.19,0.07,0.72" />
134                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
135                                                                                       Value="433" />
136                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
137                                                                                       Value="579"
138                                                                                       KeySpline="0,0,0.95,0.37" />
139                                                             </DoubleAnimationUsingKeyFrames>
140                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3R"
141                                                                                            BeginTime="00:00:00.334"
142                                                                                            Storyboard.TargetProperty="Angle">
143                                                                 <SplineDoubleKeyFrame KeyTime="0"
144                                                                                       Value="-122"
145                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
146                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
147                                                                                       Value="-2"
148                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
149                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
150                                                                                       Value="81" />
151                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
152                                                                                       Value="193"
153                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
154                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
155                                                                                       Value="345"
156                                                                                       KeySpline="0,0.19,0.07,0.72" />
157                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
158                                                                                       Value="427" />
159                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
160                                                                                       Value="573"
161                                                                                       KeySpline="0,0,0.95,0.37" />
162                                                             </DoubleAnimationUsingKeyFrames>
163                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4R"
164                                                                                            BeginTime="00:00:00.501"
165                                                                                            Storyboard.TargetProperty="Angle">
166                                                                 <SplineDoubleKeyFrame KeyTime="0"
167                                                                                       Value="-128"
168                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
169                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
170                                                                                       Value="-8"
171                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
172                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
173                                                                                       Value="75" />
174                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
175                                                                                       Value="187"
176                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
177                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
178                                                                                       Value="339"
179                                                                                       KeySpline="0,0.19,0.07,0.72" />
180                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
181                                                                                       Value="421" />
182                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
183                                                                                       Value="567"
184                                                                                       KeySpline="0,0,0.95,0.37" />
185                                                             </DoubleAnimationUsingKeyFrames>
186                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5R"
187                                                                                            BeginTime="00:00:00.668"
188                                                                                            Storyboard.TargetProperty="Angle">
189                                                                 <SplineDoubleKeyFrame KeyTime="0"
190                                                                                       Value="-134"
191                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
192                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
193                                                                                       Value="-14"
194                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
195                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
196                                                                                       Value="69" />
197                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
198                                                                                       Value="181"
199                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
200                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
201                                                                                       Value="331"
202                                                                                       KeySpline="0,0.19,0.07,0.72" />
203                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
204                                                                                       Value="415" />
205                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
206                                                                                       Value="561"
207                                                                                       KeySpline="0,0,0.95,0.37" />
208                                                             </DoubleAnimationUsingKeyFrames>
209                                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E6R"
210                                                                                            BeginTime="00:00:00.835"
211                                                                                            Storyboard.TargetProperty="Angle">
212                                                                 <SplineDoubleKeyFrame KeyTime="0"
213                                                                                       Value="-140"
214                                                                                       KeySpline="0.13,0.21,0.1,0.7" />
215                                                                 <SplineDoubleKeyFrame KeyTime="0:0:0.433"
216                                                                                       Value="-20"
217                                                                                       KeySpline="0.02,0.33,0.38,0.77" />
218                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.2"
219                                                                                       Value="63" />
220                                                                 <SplineDoubleKeyFrame KeyTime="0:0:1.617"
221                                                                                       Value="175"
222                                                                                       KeySpline="0.57,0.17,0.95,0.75" />
223                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.017"
224                                                                                       Value="325"
225                                                                                       KeySpline="0,0.19,0.07,0.72" />
226                                                                 <SplineDoubleKeyFrame KeyTime="0:0:2.783"
227                                                                                       Value="409" />
228                                                                 <SplineDoubleKeyFrame KeyTime="0:0:3.217"
229                                                                                       Value="555"
230                                                                                       KeySpline="0,0,0.95,0.37" />
231                                                             </DoubleAnimationUsingKeyFrames>
232                                                         </Storyboard>
233                                                     </VisualState>
234                                                 </VisualStateGroup>
235                                             </VisualStateManager.VisualStateGroups>
236                                             <Canvas RenderTransformOrigin="0.5,0.5"
237                                                     Background="Transparent">
238                                                 <Canvas.RenderTransform>
239                                                     <TransformGroup>
240                                                         <RotateTransform x:Name="E1R" />
241                                                         <TranslateTransform />
242                                                     </TransformGroup>
243                                                 </Canvas.RenderTransform>
244                                                 <Ellipse x:Name="E1"
245                                                          Width="6"
246                                                          Height="6"
247                                                          Opacity="0"
248                                                          Fill="{TemplateBinding Background}"
249                                                          Canvas.Left="0"
250                                                          Canvas.Top="0"
251                                                          RenderTransformOrigin="0.5,0.5">
252                                                     <Ellipse.Effect>
253                                                         <BlurEffect Radius="1" />
254                                                     </Ellipse.Effect>
255                                                 </Ellipse>
256                                             </Canvas>
257                                             <Canvas RenderTransformOrigin="0.5,0.5"
258                                                     Background="Transparent">
259                                                 <Canvas.RenderTransform>
260                                                     <TransformGroup>
261                                                         <RotateTransform x:Name="E2R" />
262                                                         <TranslateTransform />
263                                                     </TransformGroup>
264                                                 </Canvas.RenderTransform>
265                                                 <Ellipse x:Name="E2"
266                                                          Width="6"
267                                                          Height="6"
268                                                          Opacity="0"
269                                                          Fill="{TemplateBinding Background}"
270                                                          Canvas.Left="0"
271                                                          Canvas.Top="0"
272                                                          RenderTransformOrigin="0.5,0.5">
273                                                     <Ellipse.Effect>
274                                                         <BlurEffect Radius="1" />
275                                                     </Ellipse.Effect>
276                                                 </Ellipse>
277                                             </Canvas>
278                                             <Canvas RenderTransformOrigin="0.5,0.5"
279                                                     Background="Transparent">
280                                                 <Canvas.RenderTransform>
281                                                     <TransformGroup>
282                                                         <RotateTransform x:Name="E3R" />
283                                                         <TranslateTransform />
284                                                     </TransformGroup>
285                                                 </Canvas.RenderTransform>
286                                                 <Ellipse x:Name="E3"
287                                                          Width="6"
288                                                          Height="6"
289                                                          Opacity="0"
290                                                          Fill="{TemplateBinding Background}"
291                                                          Canvas.Left="0"
292                                                          Canvas.Top="0"
293                                                          RenderTransformOrigin="0.5,0.5">
294                                                     <Ellipse.Effect>
295                                                         <BlurEffect Radius="1" />
296                                                     </Ellipse.Effect>
297                                                 </Ellipse>
298                                             </Canvas>
299                                             <Canvas RenderTransformOrigin="0.5,0.5"
300                                                     Background="Transparent">
301                                                 <Canvas.RenderTransform>
302                                                     <TransformGroup>
303                                                         <RotateTransform x:Name="E4R" />
304                                                         <TranslateTransform />
305                                                     </TransformGroup>
306                                                 </Canvas.RenderTransform>
307                                                 <Ellipse x:Name="E4"
308                                                          Width="6"
309                                                          Height="6"
310                                                          Opacity="0"
311                                                          Fill="{TemplateBinding Background}"
312                                                          Canvas.Left="0"
313                                                          Canvas.Top="0"
314                                                          RenderTransformOrigin="0.5,0.5">
315                                                     <Ellipse.Effect>
316                                                         <BlurEffect Radius="1" />
317                                                     </Ellipse.Effect>
318                                                 </Ellipse>
319                                             </Canvas>
320                                             <Canvas RenderTransformOrigin="0.5,0.5"
321                                                     Background="Transparent">
322                                                 <Canvas.RenderTransform>
323                                                     <TransformGroup>
324                                                         <RotateTransform x:Name="E5R" />
325                                                         <TranslateTransform />
326                                                     </TransformGroup>
327                                                 </Canvas.RenderTransform>
328                                                 <Ellipse x:Name="E5"
329                                                          Width="6"
330                                                          Height="6"
331                                                          Opacity="0"
332                                                          Fill="{TemplateBinding Background}"
333                                                          Canvas.Left="0"
334                                                          Canvas.Top="0"
335                                                          RenderTransformOrigin="0.5,0.5">
336                                                     <Ellipse.Effect>
337                                                         <BlurEffect Radius="1" />
338                                                     </Ellipse.Effect>
339                                                 </Ellipse>
340                                             </Canvas>
341                                             <Canvas RenderTransformOrigin="0.5,0.5"
342                                                     Background="Transparent">
343                                                 <Canvas.RenderTransform>
344                                                     <TransformGroup>
345                                                         <RotateTransform x:Name="E6R" />
346                                                         <TranslateTransform />
347                                                     </TransformGroup>
348                                                 </Canvas.RenderTransform>
349                                                 <Ellipse x:Name="E6"
350                                                          Width="6"
351                                                          Height="6"
352                                                          Opacity="0"
353                                                          Fill="{TemplateBinding Background}"
354                                                          Canvas.Left="0"
355                                                          Canvas.Top="0"
356                                                          RenderTransformOrigin="0.5,0.5">
357                                                     <Ellipse.Effect>
358                                                         <BlurEffect Radius="1" />
359                                                     </Ellipse.Effect>
360                                                 </Ellipse>
361                                             </Canvas>
362                                         </Grid>
363                                     </ControlTemplate>
364                                 </Setter.Value>
365                             </Setter>
366                         </Style>
原文地址:https://www.cnblogs.com/zengezenge/p/2814745.html