一 以前的方案

以前写过一个圆点绕圈的进度条，根据参数圆点个数和参数每次旋转角度，主要是在cs文件中动态添加圆点，通过后台定时器，动态设置角度后用正弦余弦计算(x,y)的位置。

此方案优点：动态添加Loading的圆点个数和Loading速度

此方案缺点：后台定时器耗性能

WPF 绕圈进度条（一）

二 现在的方案

如果有UI图标，或者自己能够设计矢量图的情况下，可以通过Xaml实现绕圈动画的设置。如下图

添加矢量-Geometry图标

首先通过矢量设计工具，编辑并生成一个绕圈的进度图标（含有8个Path),得到8个StreamGeometry。

比如下面的24*24的图标：

 <Grid x:Name="RootGrid" Width="24" Height="24">

     <Path x:Name="Part1" Opacity="0.16" Fill="{Binding ForegroundBrush}" Data="M20.631728,19.631728C20.0459415,20.2175144,19.0961941,20.2175144,18.5104076,19.631728L16.3890873,17.5104076C15.8033009,16.9246212 15.8033009,15.9748737 16.3890873,15.3890873 16.9748737,14.8033009 17.9246212,14.8033009 18.5104076,15.3890873L20.631728,17.5104076C21.2175144,18.0961941,21.2175144,19.0459415,20.631728,19.631728z"/>

     <Path x:Name="Part2" Opacity="0.28" Fill="{Binding ForegroundBrush}" Data="M12.5,23C11.6715729,23,11,22.3284271,11,21.5L11,18.5C11,17.6715729 11.6715729,17 12.5,17 13.3284271,17 14,17.6715729 14,18.5L14,21.5C14,22.3284271,13.3284271,23,12.5,23z"/>

     <Path x:Name="Part3" Opacity="0.40" Fill="{Binding ForegroundBrush}" Data="M4.36827202,19.631728C3.78248558,19.0459415,3.78248558,18.0961941,4.36827202,17.5104076L6.48959236,15.3890873C7.0753788,14.8033009 8.02512627,14.8033009 8.6109127,15.3890873 9.19669914,15.9748737 9.19669914,16.9246212 8.6109127,17.5104076L6.48959236,19.631728C5.90380592,20.2175144,4.95405845,20.2175144,4.36827202,19.631728z"/>

     <Path x:Name="Part4" Opacity="0.52" Fill="{Binding ForegroundBrush}" Data="M1,11.5C1,10.6715729,1.67157288,10,2.5,10L5.5,10C6.32842712,10 7,10.6715729 7,11.5 7,12.3284271 6.32842712,13 5.5,13L2.5,13C1.67157288,13,1,12.3284271,1,11.5z"/>

     <Path x:Name="Part5" Opacity="0.64" Fill="{Binding ForegroundBrush}" Data="M4.36827202,3.36827202C4.95405845,2.78248558,5.90380592,2.78248558,6.48959236,3.36827202L8.6109127,5.48959236C9.19669914,6.0753788 9.19669914,7.02512627 8.6109127,7.6109127 8.02512627,8.19669914 7.0753788,8.19669914 6.48959236,7.6109127L4.36827202,5.48959236C3.78248558,4.90380592,3.78248558,3.95405845,4.36827202,3.36827202z"/>

     <Path x:Name="Part6" Opacity="0.76" Fill="{Binding ForegroundBrush}" Data="M12.5,0C13.3284271,-1.52179594E-16,14,0.671572875,14,1.5L14,4.5C14,5.32842712 13.3284271,6 12.5,6 11.6715729,6 11,5.32842712 11,4.5L11,1.5C11,0.671572875,11.6715729,1.52179594E-16,12.5,0z"/>

     <Path x:Name="Part7" Opacity="0.88" Fill="{Binding ForegroundBrush}" Data="M20.631728,3.36827202C21.2175144,3.95405845,21.2175144,4.90380592,20.631728,5.48959236L18.5104076,7.6109127C17.9246212,8.19669914 16.9748737,8.19669914 16.3890873,7.6109127 15.8033009,7.02512627 15.8033009,6.0753788 16.3890873,5.48959236L18.5104076,3.36827202C19.0961941,2.78248558,20.0459415,2.78248558,20.631728,3.36827202z"/>

     <Path x:Name="Part8" Opacity="1.00" Fill="{Binding ForegroundBrush}" Data="M24,11.5C24,12.3284271,23.3284271,13,22.5,13L19.5,13C18.6715729,13 18,12.3284271 18,11.5 18,10.6715729 18.6715729,10 19.5,10L22.5,10C23.3284271,10,24,10.6715729,24,11.5z"/>

 </Grid>
  • 透明度：将8个按顺时针排序的Path添加Geometry Data，不透明度由小到大设置。
  • 填充色：可在cs文件中添加依赖属性ForegroundBrush，构造函数中设置DataContent=this，然后Path直接绑定此依赖属性ForegroundBrush值即可。

添加绕圈动画

1. 设置一个主动改变透明度的动画静态资源Storyboard.Circle。间隔时间，如0.8秒内，8个path均循环改变其的透明度，从而达到绕圈的效果

         <Storyboard x:Key="Storyboard.Circle" RepeatBehavior="Forever">

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part1" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.16"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part2" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.28"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part3" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.40"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part4" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.52"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part5" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.64"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part6" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.76"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part7" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.88"/>

             </DoubleAnimationUsingKeyFrames>

             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part8" Storyboard.TargetProperty="Opacity">

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.00"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.88"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.76"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.64"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.52"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.28"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.16"/>

                 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.00"/>

             </DoubleAnimationUsingKeyFrames>

         </Storyboard>

2. 触发和暂停绕圈动画

通过一个属性IsActive，来触发动画是否启动和停止。

StopStoryboard可以将当前的动画停止，用法：BeginStoryboardName="XXX"

除了StopStoryboard，BeginStoryboard，还有其它Storyboard类，可以顺带了解一下。

 <DataTrigger Binding="{Binding IsActive}" Value="True">

     <DataTrigger.EnterActions>

         <BeginStoryboard Name="LoadingBeginStoryboard" Storyboard="{StaticResource Storyboard.Circle}"/>

     </DataTrigger.EnterActions>

 </DataTrigger>

 <DataTrigger Binding="{Binding IsActive}" Value="False">

     <DataTrigger.EnterActions>

         <StopStoryboard BeginStoryboardName="LoadingBeginStoryboard" />

     </DataTrigger.EnterActions>

 </DataTrigger>

另：我们可以通过设置具体的加载尺寸，来设置Loading的显示大小。如32*32，64*64

可以在cs文件中添加个依赖属性LoadingSize，然后通过设置DataContext=this，xmal中直接可以根据绑定的LoadingSize改变样式。

 <ControlTemplate.Triggers>

     <DataTrigger Binding="{Binding LoadingSize}" Value="{x:Static controls:LoadingSize.Size32}">

         <Setter TargetName="RootGrid" Property="Width" Value="32"/>

         <Setter TargetName="RootGrid" Property="Height" Value="32"/>

         <Setter TargetName="Part1" Property="Data" Value="M24,16C24,14.8954305,24.8867064,14,25.9981014,14L30.0018986,14C31.1054196,14 32,14.8877296 32,16 32,17.1045695 31.1132936,18 30.0018986,18L25.9981014,18C24.8945804,18,24,17.1122704,24,16z"/>

         <Setter TargetName="Part2" Property="Data" Value="M21.6626297,10.3647781C20.8815811,9.58372955,20.8754122,8.3235685,21.6612872,7.53769356L24.4923994,4.70658134C25.2727065,3.92627423 26.53299,3.92142998 27.3194839,4.70792389 28.1005325,5.48897247 28.1067014,6.74913352 27.3208265,7.53500847L24.4897143,10.3661207C23.7094072,11.1464278,22.4491236,11.151272,21.6626297,10.3647781z"/>

         <Setter TargetName="Part3" Property="Data" Value="M14,1.99810135C14,0.894580447 14.8877296,0 16,0 17.1045695,0 18,0.886706352 18,1.99810135L18,6.00189865C18,7.10541955 17.1122704,8 16,8 14.8954305,8 14,7.11329365 14,6.00189865L14,1.99810135z"/>

         <Setter TargetName="Part4" Property="Data" Value="M4.6857653,7.50948051C3.90545819,6.7291734 3.90061394,5.46888984 4.68710785,4.68239593 5.46815643,3.90134735 6.72831748,3.89517845 7.51419243,4.68105339L10.3453046,7.5121656C11.1256118,8.29247272 11.130456,9.55275627 10.3439621,10.3392502 9.56291351,11.1202988 8.30275246,11.1264677 7.51687752,10.3405927L4.6857653,7.50948051z"/>

         <Setter TargetName="Part5" Property="Data" Value="M0,16C0,14.8954305,0.886706352,14,1.99810135,14L6.00189865,14C7.10541955,14 8,14.8877296 8,16 8,17.1045695 7.11329365,18 6.00189865,18L1.99810135,18C0.894580447,18,0,17.1122704,0,16z"/>

         <Setter TargetName="Part6" Property="Data" Value="M4.6626297,27.3647781C3.88158112,26.5837296,3.87541221,25.3235685,4.66128715,24.5376936L7.49239937,21.7065813C8.27270649,20.9262742 9.53299004,20.92143 10.3194839,21.7079239 11.1005325,22.4889725 11.1067014,23.7491335 10.3208265,24.5350085L7.48971428,27.3661207C6.70940716,28.1464278,5.44912361,28.151272,4.6626297,27.3647781z"/>

         <Setter TargetName="Part7" Property="Data" Value="M14,25.9981014C14,24.8945804 14.8877296,24 16,24 17.1045695,24 18,24.8867064 18,25.9981014L18,30.0018986C18,31.1054196 17.1122704,32 16,32 14.8954305,32 14,31.1132936 14,30.0018986L14,25.9981014z"/>

         <Setter TargetName="Part8" Property="Data" Value="M21.6857653,24.5094805C20.9054582,23.7291734 20.9006139,22.4688898 21.6871078,21.6823959 22.4681564,20.9013473 23.7283175,20.8951784 24.5141924,21.6810534L27.3453046,24.5121656C28.1256118,25.2924727 28.130456,26.5527563 27.3439621,27.3392502 26.5629135,28.1202988 25.3027525,28.1264677 24.5168775,27.3405927L21.6857653,24.5094805z"/>

     </DataTrigger>

 </ControlTemplate.Triggers>

使用ContentControl来呈现，在ContentControl的模板中设置Loading内容。例如：

<ContentControl x:Name="LoadingContent" Template="{StaticResource Template.Loading}"/>

三 替代方案

以上是在图标位置不变化的情况下设置透明度实现的，如果需要简单点的实现方式或者整体绕圈旋转效果，可以设置

1. ContentControl的模板内容为一张完整图片Image或者DrawingImage

2. 添加旋转RotateTransform，绕中心旋转需要设置RenderTransformOrigin="0.5,0.5"

3. 添加动画

触发条件trigges设置，可参考上面的循环动画开启和停止逻辑。

详细实现：

     /// <summary>

     /// 菊花Loading

     /// </summary>

     public partial class ChrysanthemumLoading : UserControl

     {

         public ChrysanthemumLoading()

         {

             InitializeComponent();

         }

         public static readonly DependencyProperty IsActivepProperty = DependencyProperty.Register("IsActive",

             typeof(bool), typeof(ChrysanthemumLoading), new PropertyMetadata(default(bool)));

         public bool IsActive

         {

             get => (bool)GetValue(IsActivepProperty);

             set => SetValue(IsActivepProperty, value);

         }

     }
 <UserControl x:Class="Control.ChrysanthemumLoading"

              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

              xmlns:local="clr-namespace:Control"

              mc:Ignorable="d" x:Name="TheChrysanthemumLoading"

              d:DesignHeight="90" d:DesignWidth="90">

     <UserControl.Resources>

         <ImageSource x:Key="Image.Loading">Resource/Loading.png</ImageSource>

         <ControlTemplate x:Key="Template.Loading" TargetType="ContentControl">

             <Viewbox x:Name="RootGrid" Width="72" Height="72">

                 <Image x:Name="StateIcon" Stretch="Uniform" Source="{StaticResource Image.Loading}" RenderTransformOrigin="0.5,0.5">

                     <Image.RenderTransform>

                         <RotateTransform x:Name="LoadingContentRotateTransform"/>

                     </Image.RenderTransform>

                 </Image>

             </Viewbox>

            <ControlTemplate.Triggers>

                 <DataTrigger Binding="{Binding ElementName=TheChrysanthemumLoading,Path=IsActive}" Value="True">

                    <DataTrigger.EnterActions>

                        <BeginStoryboard Name="LoadingBeginStoryboard">

                            <Storyboard RepeatBehavior="Forever" TargetName="LoadingContentRotateTransform" TargetProperty="Angle">

                                <DoubleAnimation From="0" To="360" Duration="0:0:2"/>

                            </Storyboard>

                         </BeginStoryboard>

                    </DataTrigger.EnterActions>

                </DataTrigger>

                 <DataTrigger Binding="{Binding ElementName=TheChrysanthemumLoading,Path=IsActive}" Value="False">

                    <DataTrigger.EnterActions>

                        <StopStoryboard BeginStoryboardName="LoadingBeginStoryboard" />

                    </DataTrigger.EnterActions>

                </DataTrigger>

             </ControlTemplate.Triggers>

         </ControlTemplate>

     </UserControl.Resources>

     <ContentControl x:Name="LoadingContentControl" Template="{StaticResource Template.Loading}"/>

 </UserControl>

Loading图片下载：https://files.cnblogs.com/files/kybs0/685541-20180518193710558-2041248227.rar

关键字：进度条，Svg图片，图片旋转

WPF 绕圈进度条（二）的更多相关文章

  1. WPF 绕圈进度条（一）

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...

  2. WPF 自定义绕圈进度条

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...

  3. WPF 自定义绕圈进度条（转）

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...

  4. WPF 简单的绕圈进度条(无cs代码)

    方案: 图标位置不变化的情况下设置透明度实现 代码: <Window x:Class="WpfApp1.MainWindow" xmlns="http://sche ...

  5. WPF Canvas实现进度条

    原文:WPF Canvas实现进度条 先看效果图: 思路: 一个Canvas做背景,一个Canvas用来显示进度,图片放在显示进度的Canvas中,靠右设置为图片本身宽度一半的距离,视觉上实现以图片中 ...

  6. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  7. WPF好看的进度条实现浅谈（效果有点类似VS2012安装界面）

    为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了Mode ...

  8. WPF 实现圆形进度条

    项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...

  9. 使用线程新建WPF窗体(公用进度条窗体)

    使用线程新建窗体 项目中需要一个公用的进度条窗体.大家知道在wpf中,有两个线程,一个是UI线程,另一个是监听线程(一直监听用户的输入).如果我们后台有阻塞UI线程的计算存在,那么界面上的比如进度条什 ...

随机推荐

  1. Sql- Group By ,Where,having用法

    Group by,where,having 是数据库查询中最常用的几个关键字.在工作中,时常用到,前面遇到一个问题,一个查询中使用了where ,group by ,having及聚集函数时 ,执行顺 ...

  2. 关于IO的整理

    我们知道io只是输入输出,在java语言中分为同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO,现在的IO,一般是用作两种用途:一种是进行文件或者目录的操作(将不同的输入输出源抽象成流,所以流 ...

  3. Centos6.5---samba文件共享服务配置（一）

    Linux---------samba文件共享服务配置(一) samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. https://www.cnblogs.com/zo ...

  4. 背水一战 Windows 10 (120) - 后台任务: 后台上传任务

    [源码下载] 背水一战 Windows 10 (120) - 后台任务: 后台上传任务 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 后台上传任务 示例演示 uwp 的后台上 ...

  5. Android常用第三方支付

    移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...

  6. iTerm2 使用笔记

    iTerm2 使用了1年多了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下tips,提高工作效率,方便以后查阅. 一.几个术语 从小到大:session > pane > ...

  7. DCT(离散余弦变换)算法原理和源码(python)

    原理: 离散余弦变换(DCT for Discrete Cosine Transform)是与傅里叶变换相关的一种变换,它类似于离散傅里叶变换(DFT for Discrete Fourier Tra ...

  8. 线性整流函数（ReLU）

    线性整流函数(Rectified Linear Unit, ReLU),又称修正线性单元, 是一种人工神经网络中常用的激活函数(activation function),通常指代以斜坡函数及其变种为代 ...

  9. 【app】自动化环境搭建（Appium）for java

    Appium来做app自动化相信大家都很熟悉了吧,就不再赘述他的概念和作用了,我们接下来着重介绍怎么来搭建整个app自动化环境,整个环境包括如下几个步骤: 1.安装jdk和eclipse及配置jdk的 ...

  10. Spring Boot Redis Cluster 实战干货

    添加配置信息 spring.redis: database: 0 # Redis数据库索引(默认为0) #host: 192.168.1.8 #port: 6379 password: 123456 ...