一 以前的方案

以前写过一个圆点绕圈的进度条，根据参数圆点个数和参数每次旋转角度，主要是在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. python对象的for迭代实现

    第一种:__iter__ 实现__iter__的对象,是可迭代对象.__iter__方法可以直接封装一个迭代器,从而实现for循环 class A: def __init__(self): self. ...

  2. Hadoop2.0源码包简介

    Hadoop2.0源码包简介 1.解压源码包: 2.目录结构: hadoop-common-project:Hadoop基础库所在目录,如RPC.Metrics.Counter等.包含了其它所有模块可 ...

  3. 记一次生产环境thrift服务的配置问题

    问题现象 有客户反馈我们的产品有时反应很慢,处理会出现超时. 问题分析过程 1.第一反应可能是用户增加,并发量太大了,询问了运营,最近用户注册数据并没有猛增. 2.分析access日志,发现有隔一段时 ...

  4. WSGI and Paste学习笔记

    The Problem Lots of web frameworks Zope, Quixote, Webware, SkunkWeb and Twisted Web etc Applications ...

  5. Python 操作excel之 openpyxl模块

    1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win-amd64-py2.7.exe · font(字体 ...

  6. PHP全栈学习笔记18

    php基础知识,JavaScript,jQuery,ajax基础知识 linux基础知识,mysql数据库的基础与优化 程序设计,PHP框架基础知识,算法,逻辑思维,高并发 PHP基础知识 引用变量, ...

  7. Python学习笔记【第四篇】：基本数据类型

    变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...

  8. docker安装及配置

    docker下载安装(官方) 卸载旧版本 sudo yum remove docker docker-client docker-client-latest docker-common docker- ...

  9. Oracle优化器基础知识之访问数据的方法

    目录 一.访问数据的方法 1.直接访问数据 2.访问索引 一.访问数据的方法 Oracle访问表中数据的方法有两种,一种是直接表中访问数据,另外一种是先访问索引,如果索引数据不符合目标SQL,就回表, ...

  10. [原创]K8 Jboss jmx-console getshell exploit

    [原创]K8 Jboss jmx-console getshell exploit https://www.cnblogs.com/k8gege/p/10645858.html 0x00 前言 今天内 ...