一 以前的方案

以前写过一个圆点绕圈的进度条，根据参数圆点个数和参数每次旋转角度，主要是在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. JAVA数据结构之链表

    JAVA数据结构之链表 什么是链表呢? 链表作为最基本的数据结构之一,定义如下: 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 简单来说呢,链 ...

  2. Python3.* 和Python2.*的区别

    许多Python初学者都会问:我应该学习哪个版本的Python.对于这个问题,我的回答通常是“先选择一个最适合你的Python教程,教程中使用哪个版本的Python,你就用那个版本.等学得差不多了,再 ...

  3. Hadoop-2.0 目录简介

    Hadoop-2.0 目录简介 一.目录结构 将下载的压缩包解压: 解压后文件夹如下: 二.各文件夹目录结构 1.bin:Hadoop2.0的最基本管理脚本和使用脚本所在目录.这些脚本是sbin目录下 ...

  4. 逆向基本使用：IDA

    如何导出IDA数据中数组的内容进行编程? 如这种: .data:00427A54 ; char byte_427A54[] .data:00427A54 byte_427A54 db 0FEh ; D ...

  5. QEMU Networking

    QEMU Networking QEMU has a number of really nice ways to set up networking for its guests. It can be ...

  6. 删除坏掉的 Active Directory Domain

    最近公司的某个 Domain Controller 报告可能由于长时间没在线,同步失败,然后用 Repldiag 工具清理 lingering objects 的过程中,该工具报告存在 serious ...

  7. 应用篇 = Docker下的Redis

    一.工具介绍 1.1 什么是Docker? Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目.使用 Google 公司推出的 Go 语言 ...

  8. Javascript高级编程学习笔记（81）—— 富文本(1)

    富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...

  9. Ubuntu18.04或者Deepin15.8 部署Django项目

    一.首先先安装nginx静态服务 1.安装gcc g++的依赖库sudo apt-get install build-essential && sudo apt-get install ...

  10. TextView的跑马灯效果实现

    TextView的跑马灯效果实现 问题描述 当文字内容过长,但是只允许显示一行时,可以将文字显示为跑马灯效果,即文字滚动显示. 代码实现 第一种方法实现 先查询TextView控件的属性,得到以下信息 ...