WPF loading spinner

Question

The goal is to display the information that the application is working  So I m looking for an intelligent implementation sample of a loading spinner using WPF   MVVM

User · Accepted Answer

I wrote this user control which may help, it will display messages with a progress bar spinning to show it is currently loading something.

  <ctr:LoadingPanel x:Name="loadingPanel"
                    IsLoading="{Binding PanelLoading}"
                    Message="{Binding PanelMainMessage}"
                    SubMessage="{Binding PanelSubMessage}" 
                    ClosePanelCommand="{Binding PanelCloseCommand}" />

It has a couple of basic properties that you can bind to.

User · Answer

With Images  Visual summary of options for spinning icons  Recorded using Screen To Gif     Font-Awesome-WPF  Documentation on GitHub   Install via NuGet      PM  Install-Package FontAwesome WPF   Looks like this     XAML    lt fa ImageAwesome Icon  Spinner  Spin  True  SpinDuration  4    gt    Icons pictured are Spinner  CircleOutlineNotch  Refresh and Cog  There are many others     Method from  HAdes  XAML copy paste

User · Answer

The approach is to use geometry with animations applied  Add the required geometry to the Path and animate its RotateTransform from 0-360    My spinner support two types of spinners   Circles      Rings       And the central logic looks like  if spinner SpinnerType    SpinnerType Ring     double innerRad   spinner Radius - spinner ItemRadius   Point center   new Point 0  0    grp Children Add new EllipseGeometry  center  spinner Radius  spinner Radius     grp Children Add new EllipseGeometry center  innerRad  innerRad                     return    var points   GetPointsOnCircle  spinner Diameter  2   double r   spinner ItemRadius  foreach  var point in points     grp Children Add new EllipseGeometry point  r  r     r -  spinner ContinuousSizeReduction     Usage is as simple as follows   lt local SpinnerControl Diameter  quot 60 quot  Fill  quot  FFE8B311 quot   gt  Here is the source code

User · Answer

Here s an example of an all-xaml solution  It binds to an  IsWorking  boolean in the viewmodel to show the control and start the animation    lt UserControl x Class  MainApp Views SpinnerView           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            mc Ignorable  d            d DesignHeight  300  d DesignWidth  300  gt        lt UserControl Resources gt           lt BooleanToVisibilityConverter x Key  BoolToVisConverter   gt       lt  UserControl Resources gt        lt StackPanel Orientation  Horizontal  Margin  5                       Visibility   Binding IsWorking  Converter  StaticResource BoolToVisConverter    gt           lt Label gt Wait    lt  Label gt           lt Ellipse x Name  spinnerEllipse                        Width  20  Height  20  gt               lt Ellipse Fill gt                   lt LinearGradientBrush StartPoint  1 1  EndPoint  0 0   gt                       lt GradientStop Color  White  Offset  0   gt                       lt GradientStop Color  CornflowerBlue  Offset  1   gt                   lt  LinearGradientBrush gt               lt  Ellipse Fill gt               lt Ellipse RenderTransform gt                   lt RotateTransform x Name  SpinnerRotate  CenterX  10  CenterY  10   gt               lt  Ellipse RenderTransform gt               lt Ellipse Style gt                   lt Style TargetType  Ellipse  gt                       lt Style Triggers gt                           lt DataTrigger Binding   Binding IsWorking   Value  True  gt                               lt DataTrigger EnterActions gt                                   lt BeginStoryboard x Name  SpinStoryboard  gt                                       lt Storyboard TargetProperty  RenderTransform Angle   gt                                           lt DoubleAnimation                                             From  0  To  360  Duration  0 0 01                                              RepeatBehavior  Forever    gt                                       lt  Storyboard gt                                   lt  BeginStoryboard gt                               lt  DataTrigger EnterActions gt                               lt DataTrigger ExitActions gt                                   lt StopStoryboard BeginStoryboardName  SpinStoryboard  gt  lt  StopStoryboard gt                               lt  DataTrigger ExitActions gt                           lt  DataTrigger gt                       lt  Style Triggers gt                   lt  Style gt               lt  Ellipse Style gt           lt  Ellipse gt       lt  StackPanel gt   lt  UserControl gt

User · Answer

In WPF  you can now simply do   Mouse OverrideCursor   System Windows Input Cursors Wait     set the cursor to loading spinner  Mouse OverrideCursor   System Windows Input Cursors Arrow     set the cursor back to arrow

User · Answer

CircularProgressBarBlue xaml   lt UserControl  x Class  CircularProgressBarBlue     xmlns  http   schemas microsoft com winfx 2006 xaml presentation  xmlns x  http   schemas microsoft com winfx 2006 xaml  Background  Transparent  Name  progressBar  gt   lt UserControl Resources gt       lt Storyboard x Key  spinning   gt           lt DoubleAnimation              Storyboard TargetName  SpinnerRotate               Storyboard TargetProperty   RotateTransform Angle                                From  0               To  360                               RepeatBehavior  Forever   gt       lt  Storyboard gt   lt  UserControl Resources gt   lt Grid      x Name  LayoutRoot       Background  Transparent       HorizontalAlignment  Center       VerticalAlignment  Center  gt       lt Image Source  C  SpinnerImage BlueSpinner png  RenderTransformOrigin  0 5 0 5  VerticalAlignment  Stretch  HorizontalAlignment  Stretch  gt           lt Image RenderTransform gt               lt RotateTransform                  x Name  SpinnerRotate                  Angle  0   gt           lt  Image RenderTransform gt       lt  Image gt     lt  Grid gt      CircularProgressBarBlue xaml cs  using System   using System Windows   using System Windows Media Animation                 lt summary gt          Interaction logic for CircularProgressBarBlue xaml          lt  summary gt      public partial class CircularProgressBarBlue               private Storyboard  sb           public CircularProgressBarBlue                         InitializeComponent                StartStoryBoard                IsVisibleChanged    CircularProgressBarBlueIsVisibleChanged                     void CircularProgressBarBlueIsVisibleChanged object sender  DependencyPropertyChangedEventArgs e                        if   sb    null  return              if  e    null  amp  amp  e NewValue    null  amp  amp     bool e NewValue                                   sb Begin                     sb Resume                              else                                sb Stop                                     void StartStoryBoard                         try                                sb    Storyboard TryFindResource  spinning                    if   sb    null                       sb Begin                              catch

User · Answer

This is an update to the code given by  HAdes to parameterize width  height  and ellipse size  This implementation automatically calculates required angles  widths  and heights on the fly  The user control is bound to itself  code-behind  which takes care of all calculations  XAML  lt UserControl x Class  quot WpfApplication2 Spinner quot               xmlns  quot http   schemas microsoft com winfx 2006 xaml presentation quot               xmlns x  quot http   schemas microsoft com winfx 2006 xaml quot               xmlns mc  quot http   schemas openxmlformats org markup-compatibility 2006 quot                xmlns d  quot http   schemas microsoft com expression blend 2008 quot                xmlns local  quot clr-namespace WpfApplication2 quot               mc Ignorable  quot d quot                DataContext  quot  Binding RelativeSource  RelativeSource Self   quot               d DesignHeight  quot 300 quot  d DesignWidth  quot 300 quot  gt       lt UserControl Resources gt           lt Color x Key  quot FilledColor quot  A  quot 255 quot  B  quot 155 quot  R  quot 155 quot  G  quot 155 quot   gt           lt Color x Key  quot UnfilledColor quot  A  quot 0 quot  B  quot 155 quot  R  quot 155 quot  G  quot 155 quot   gt            lt Style x Key  quot BusyAnimationStyle quot  TargetType  quot Control quot  gt               lt Setter Property  quot Background quot  Value  quot Transparent quot   gt                lt Setter Property  quot Template quot  gt                   lt Setter Value gt                       lt ControlTemplate TargetType  quot Control quot  gt                           lt ControlTemplate Resources gt                               lt Storyboard x Key  quot Animation0 quot  BeginTime  quot 00 00 00 0 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseN quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation1 quot  BeginTime  quot 00 00 00 2 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseNE quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation2 quot  BeginTime  quot 00 00 00 4 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseE quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation3 quot  BeginTime  quot 00 00 00 6 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseSE quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation4 quot  BeginTime  quot 00 00 00 8 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseS quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation5 quot  BeginTime  quot 00 00 01 0 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseSW quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation6 quot  BeginTime  quot 00 00 01 2 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseW quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                                lt Storyboard x Key  quot Animation7 quot  BeginTime  quot 00 00 01 4 quot  RepeatBehavior  quot Forever quot  gt                                   lt ColorAnimationUsingKeyFrames Storyboard TargetName  quot ellipseNW quot  Storyboard TargetProperty  quot  Shape Fill   SolidColorBrush Color  quot  gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 00 0 quot  Value  quot  StaticResource FilledColor  quot   gt                                       lt SplineColorKeyFrame KeyTime  quot 00 00 01 6 quot  Value  quot  StaticResource UnfilledColor  quot   gt                                   lt  ColorAnimationUsingKeyFrames gt                               lt  Storyboard gt                           lt  ControlTemplate Resources gt                            lt ControlTemplate Triggers gt                               lt Trigger Property  quot IsVisible quot  Value  quot True quot  gt                                   lt Trigger EnterActions gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation0  quot  x Name  quot Storyboard0 quot    gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation1  quot  x Name  quot Storyboard1 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation2  quot  x Name  quot Storyboard2 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation3  quot  x Name  quot Storyboard3 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation4  quot  x Name  quot Storyboard4 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation5  quot  x Name  quot Storyboard5 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation6  quot  x Name  quot Storyboard6 quot   gt                                       lt BeginStoryboard Storyboard  quot  StaticResource Animation7  quot  x Name  quot Storyboard7 quot   gt                                   lt  Trigger EnterActions gt                                    lt Trigger ExitActions gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard0 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard1 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard2 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard3 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard4 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard5 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard6 quot   gt                                       lt StopStoryboard BeginStoryboardName  quot Storyboard7 quot   gt                                   lt  Trigger ExitActions gt                               lt  Trigger gt                           lt  ControlTemplate Triggers gt                            lt Border BorderBrush  quot  TemplateBinding BorderBrush  quot  BorderThickness  quot  TemplateBinding BorderThickness  quot  Background  quot  TemplateBinding Background  quot  gt                               lt Grid gt                                   lt Canvas gt                                       lt Canvas Resources gt                                           lt Style TargetType  quot Ellipse quot  gt                                               lt Setter Property  quot Width quot  Value  quot  Binding Path EllipseSize  quot   gt                                               lt Setter Property  quot Height quot  Value  quot  Binding Path EllipseSize  quot    gt                                               lt Setter Property  quot Fill quot  Value  quot Transparent quot    gt                                           lt  Style gt                                       lt  Canvas Resources gt                                        lt Ellipse x Name  quot ellipseN quot  Canvas Left  quot  Binding Path EllipseN Left  quot  Canvas Top  quot  Binding Path EllipseN Top  quot   gt                                       lt Ellipse x Name  quot ellipseNE quot  Canvas Left  quot  Binding Path EllipseNE Left  quot  Canvas Top  quot  Binding Path EllipseNE Top  quot   gt                                       lt Ellipse x Name  quot ellipseE quot  Canvas Left  quot  Binding Path EllipseE Left  quot  Canvas Top  quot  Binding Path EllipseE Top  quot   gt                                       lt Ellipse x Name  quot ellipseSE quot  Canvas Left  quot  Binding Path EllipseSE Left  quot  Canvas Top  quot  Binding Path EllipseSE Top  quot   gt                                       lt Ellipse x Name  quot ellipseS quot  Canvas Left  quot  Binding Path EllipseS Left  quot  Canvas Top  quot  Binding Path EllipseS Top  quot   gt                                       lt Ellipse x Name  quot ellipseSW quot  Canvas Left  quot  Binding Path EllipseSW Left  quot  Canvas Top  quot  Binding Path EllipseSW Top  quot   gt                                       lt Ellipse x Name  quot ellipseW quot  Canvas Left  quot  Binding Path EllipseW Left  quot  Canvas Top  quot  Binding Path EllipseW Top  quot   gt                                       lt Ellipse x Name  quot ellipseNW quot  Canvas Left  quot  Binding Path EllipseNW Left  quot  Canvas Top  quot  Binding Path EllipseNW Top  quot   gt                                    lt  Canvas gt                                   lt Label Content  quot  Binding Path Text  quot  HorizontalAlignment  quot Center quot  VerticalAlignment  quot Center quot   gt                               lt  Grid gt                           lt  Border gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt           lt  Style gt       lt  UserControl Resources gt       lt Border gt           lt Control Style  quot  StaticResource BusyAnimationStyle  quot   gt       lt  Border gt   lt  UserControl gt   Code Behind  C   using System  using System Windows  using System Windows Controls   namespace WpfApplication2            lt summary gt          Interaction logic for Spinner xaml          lt  summary gt      public partial class Spinner   UserControl               public int EllipseSize   get  set      8          public int SpinnerHeight   get  set      0          public int SpinnerWidth   get  set      0               start positions         public EllipseStartPosition EllipseN   get  private set            public EllipseStartPosition EllipseNE   get  private set            public EllipseStartPosition EllipseE   get  private set            public EllipseStartPosition EllipseSE   get  private set            public EllipseStartPosition EllipseS   get  private set            public EllipseStartPosition EllipseSW   get  private set            public EllipseStartPosition EllipseW   get  private set            public EllipseStartPosition EllipseNW   get  private set             public Spinner                         InitializeComponent                       private void initialSetup                         float horizontalCenter    float  SpinnerWidth   2               float verticalCenter    float  SpinnerHeight   2               float distance    float Math Min SpinnerHeight  SpinnerWidth   2               double angleInRadians   44 8              float cosine    float Math Cos angleInRadians               float sine    float Math Sin angleInRadians                EllipseN   newPos left  horizontalCenter  top  verticalCenter - distance               EllipseNE   newPos left  horizontalCenter    distance   cosine   top  verticalCenter -  distance   sine                EllipseE   newPos left  horizontalCenter   distance  top  verticalCenter               EllipseSE   newPos left  horizontalCenter    distance   cosine   top  verticalCenter    distance   sine                EllipseS   newPos left  horizontalCenter  top  verticalCenter   distance               EllipseSW   newPos left  horizontalCenter -  distance   cosine   top  verticalCenter    distance   sine                EllipseW   newPos left  horizontalCenter - distance  top  verticalCenter               EllipseNW   newPos left  horizontalCenter -  distance   cosine   top  verticalCenter -  distance   sine                       private EllipseStartPosition newPos float left  float top                        return new EllipseStartPosition     Left   left  Top   top                                protected override void OnPropertyChanged DependencyPropertyChangedEventArgs e                        if e Property Name     quot Height quot                                 SpinnerHeight   Convert ToInt32 e NewValue                              if  e Property Name     quot Width quot                                 SpinnerWidth   Convert ToInt32 e NewValue                              if SpinnerHeight  gt  0  amp  amp  SpinnerWidth  gt  0                                initialSetup                               base OnPropertyChanged e                        public struct EllipseStartPosition               public float Left   get  set            public float Top   get  set             Sample Use  lt Window x Class  quot WpfApplication2 MainWindow quot          xmlns  quot http   schemas microsoft com winfx 2006 xaml presentation quot          xmlns x  quot http   schemas microsoft com winfx 2006 xaml quot          xmlns d  quot http   schemas microsoft com expression blend 2008 quot          xmlns mc  quot http   schemas openxmlformats org markup-compatibility 2006 quot          xmlns local  quot clr-namespace WpfApplication2 quot          xmlns animated  quot WpfApplication2 MainWindow quot          mc Ignorable  quot d quot          Title  quot MainWindow quot  Height  quot 350 quot  Width  quot 525 quot  gt        lt StackPanel Background  quot DarkGoldenrod quot  Width  quot 200 quot  Height  quot 200 quot  VerticalAlignment  quot Top quot  HorizontalAlignment  quot Left quot   gt           lt Button Height  quot 35 quot  gt               lt Button Content  gt                   lt DockPanel LastChildFill  quot True quot  Height  quot NaN quot  Width  quot NaN quot  HorizontalAlignment  quot Left quot  gt                       lt local Spinner EllipseSize  quot 4 quot  DockPanel Dock  quot Left quot  HorizontalAlignment  quot Left quot  Margin  quot 0 0 10 5 quot  Height  quot 16 quot  Width  quot 16 quot   gt                       lt TextBlock Text  quot Cancel quot  VerticalAlignment  quot Center quot   gt                   lt  DockPanel gt               lt  Button Content gt           lt  Button gt        lt  StackPanel gt    lt  Window gt

User · Answer

This repo on github seems to do the job quite well   https   github com blackspikeltd Xaml-Spinners-WPF  The spinners are all light weight and can easily be placed wherever needed  There is a sample project included in the repo that shows how to use them   No nasty code-behinds with a bunch of logic either  If MVVM support is needed  one can just take these and throw them in a Grid with a Visibility binding

User · Answer

use an enum type to indicate your ViewModel s State    public enum ViewModeType       Default       Busy       etc      then in your ViewModels Base class use a property  public ViewModeType ViewMode       get   return this viewMode        set               if  this viewMode    value                        this viewMode   value                                You should notify property changed here                     and in view trigger the ViewMode and if it is busy show busyindicator    lt Trigger Property  ViewMode  Value  Busy  gt       lt  -- Show BusyIndicator -- gt   lt  Trigger gt

User · Answer

You can do it without any additional controls and libraries  using only Image control and transform    lt Image     Source   images spinner png      Width  100      Height  100      RenderTransformOrigin  0 5  0 5  Visibility   Binding IsLoading  Converter  StaticResource BooleanToVisibilityConverter    gt       lt Image RenderTransform gt           lt RotateTransform x Name  noFreeze    gt       lt  Image RenderTransform gt       lt Image Triggers gt           lt EventTrigger RoutedEvent  Loaded  gt               lt BeginStoryboard gt                   lt Storyboard gt                       lt DoubleAnimation                         Storyboard TargetProperty   Image RenderTransform   RotateTransform Angle                           To  360  Duration  0 0 1  RepeatBehavior  Forever    gt                   lt  Storyboard gt               lt  BeginStoryboard gt           lt  EventTrigger gt       lt  Image Triggers gt   lt  Image gt    Replace  images spinner png with your image  Change To  360  to To  -360  if you want to rotate it counterclockwise  Duration  0 0 1  equals to 1 second per rotation

User · Answer

Check out the BusyIndicator in the extended WPF Toolkit

User · Answer

To get this     Stick this in a user control    lt UserControl Resources gt       lt Color x Key  FilledColor  A  255  B  155  R  155  G  155   gt       lt Color x Key  UnfilledColor  A  0  B  155  R  155  G  155   gt        lt Style x Key  BusyAnimationStyle  TargetType  Control  gt           lt Setter Property  Background  Value   7F000000   gt            lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType  Control  gt                       lt ControlTemplate Resources gt                           lt Storyboard x Key  Animation0  BeginTime  00 00 00 0  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse0  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation1  BeginTime  00 00 00 2  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse1  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation2  BeginTime  00 00 00 4  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse2  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation3  BeginTime  00 00 00 6  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse3  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation4  BeginTime  00 00 00 8  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse4  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation5  BeginTime  00 00 01 0  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse5  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation6  BeginTime  00 00 01 2  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse6  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                            lt Storyboard x Key  Animation7  BeginTime  00 00 01 4  RepeatBehavior  Forever  gt                               lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse7  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt                                   lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt                                   lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt                               lt  ColorAnimationUsingKeyFrames gt                           lt  Storyboard gt                       lt  ControlTemplate Resources gt                        lt ControlTemplate Triggers gt                           lt Trigger Property  IsVisible  Value  True  gt                               lt Trigger EnterActions gt                                   lt BeginStoryboard Storyboard   StaticResource Animation0   x Name  Storyboard0    gt                                   lt BeginStoryboard Storyboard   StaticResource Animation1   x Name  Storyboard1   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation2   x Name  Storyboard2   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation3   x Name  Storyboard3   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation4   x Name  Storyboard4   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation5   x Name  Storyboard5   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation6   x Name  Storyboard6   gt                                   lt BeginStoryboard Storyboard   StaticResource Animation7   x Name  Storyboard7   gt                               lt  Trigger EnterActions gt                                lt Trigger ExitActions gt                                   lt StopStoryboard BeginStoryboardName  Storyboard0   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard1   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard2   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard3   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard4   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard5   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard6   gt                                   lt StopStoryboard BeginStoryboardName  Storyboard7   gt                               lt  Trigger ExitActions gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                        lt Border BorderBrush   TemplateBinding BorderBrush   BorderThickness   TemplateBinding BorderThickness   Background   TemplateBinding Background   gt                           lt Grid gt                           lt Canvas Height  60  Width  60  gt                               lt Canvas Resources gt                                   lt Style TargetType  Ellipse  gt                                       lt Setter Property  Width  Value  15   gt                                       lt Setter Property  Height  Value  15    gt                                       lt Setter Property  Fill  Value   009B9B9B    gt                                   lt  Style gt                               lt  Canvas Resources gt                                lt Ellipse x Name  ellipse0  Canvas Left  1 75  Canvas Top  21   gt                               lt Ellipse x Name  ellipse1  Canvas Top  7  Canvas Left  6 5   gt                               lt Ellipse x Name  ellipse2  Canvas Left  20 5  Canvas Top  0 75   gt                               lt Ellipse x Name  ellipse3  Canvas Left  34 75  Canvas Top  6 75   gt                               lt Ellipse x Name  ellipse4  Canvas Left  40 5  Canvas Top  20 75    gt                               lt Ellipse x Name  ellipse5  Canvas Left  34 75  Canvas Top  34 5   gt                               lt Ellipse x Name  ellipse6  Canvas Left  20 75  Canvas Top  39 75   gt                               lt Ellipse x Name  ellipse7  Canvas Top  34 25  Canvas Left  7    gt                               lt Ellipse Width  39 5  Height  39 5  Canvas Left  8 75  Canvas Top  8  Visibility  Hidden   gt                           lt  Canvas gt                               lt Label Content   Binding Path Text   HorizontalAlignment  Center  VerticalAlignment  Center   gt                           lt  Grid gt                       lt  Border gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt   lt  UserControl Resources gt   lt Control Style   StaticResource BusyAnimationStyle    gt    To get a cool disappearing effect on each ellipse add the following after each ColorAnimationUsingKeyFrames element  Be sure to point it to the correct ellipse     lt ColorAnimationUsingKeyFrames Storyboard TargetName  ellipse0  Storyboard TargetProperty   Shape Fill   SolidColorBrush Color   gt       lt SplineColorKeyFrame KeyTime  00 00 00 0  Value   StaticResource FilledColor    gt       lt SplineColorKeyFrame KeyTime  00 00 01 6  Value   StaticResource UnfilledColor    gt   lt  ColorAnimationUsingKeyFrames gt   lt DoubleAnimationUsingKeyFrames Storyboard TargetName  ellipse0  Storyboard TargetProperty  Width   gt       lt DoubleAnimationUsingKeyFrames KeyFrames gt           lt SplineDoubleKeyFrame  KeyTime  00 00 00 0  Value  15    gt           lt SplineDoubleKeyFrame  KeyTime  00 00 01 0  Value  12    gt           lt SplineDoubleKeyFrame  KeyTime  00 00 01 6  Value  0    gt       lt  DoubleAnimationUsingKeyFrames KeyFrames gt   lt  DoubleAnimationUsingKeyFrames gt   lt DoubleAnimationUsingKeyFrames Storyboard TargetName  ellipse0  Storyboard TargetProperty  Height   gt       lt DoubleAnimationUsingKeyFrames KeyFrames gt           lt SplineDoubleKeyFrame  KeyTime  00 00 00 0  Value  15    gt           lt SplineDoubleKeyFrame  KeyTime  00 00 01 0  Value  12    gt           lt SplineDoubleKeyFrame  KeyTime  00 00 01 6  Value  0    gt       lt  DoubleAnimationUsingKeyFrames KeyFrames gt   lt  DoubleAnimationUsingKeyFrames gt

User · Answer

The customized spinner posted by  Menol had a small issue where the spinner would be shifted down and to the right by the size of one dot  I have updated the code so that it compensates for this offset by subtracting by half the dot    Here is the updated code       private void initialSetup                 float horizontalCenter    float  SpinnerWidth   2           float verticalCenter    float  SpinnerHeight   2           float distance    float Math Min SpinnerHeight  SpinnerWidth    2          float dotComp    float  EllipseSize   2            double angleInRadians   44 8          float cosine    float Math Cos angleInRadians           float sine    float Math Sin angleInRadians            EllipseN   newPos left  horizontalCenter - dotComp  top  verticalCenter - distance - dotComp           EllipseNE   newPos left  horizontalCenter    distance   cosine  - dotComp  top  verticalCenter -  distance   sine  - dotComp           EllipseE   newPos left  horizontalCenter   distance - dotComp  top  verticalCenter - dotComp           EllipseSE   newPos left  horizontalCenter    distance   cosine  - dotComp  top  verticalCenter    distance   sine  - dotComp           EllipseS   newPos left  horizontalCenter - dotComp  top  verticalCenter   distance - dotComp           EllipseSW   newPos left  horizontalCenter -  distance   cosine  - dotComp  top  verticalCenter    distance   sine  - dotComp           EllipseW   newPos left  horizontalCenter - distance - dotComp  top  verticalCenter - dotComp           EllipseNW   newPos left  horizontalCenter -  distance   cosine  - dotComp  top  verticalCenter -  distance   sine  - dotComp

User · Answer

A very simple  plug and play  spinner could be one of the spinning icons from the Font Awesome Wpf Package  Spinning icons    The usage is quite simple  just install the nuget package   PM gt  Install-Package FontAwesome WPF   Then add the reference to the namespace   xmlns fa  http   schemas fontawesome io icons     and use the ImageAwesome control  Set the Spin  True  property and select one of the  Spinner    Refresh    Cog  and  CircleOutlinedNotched  Icon  It s scalable and can be resized by setting width and height    lt Window x Class  Example FontAwesome WPF Single      xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      xmlns fa  http   schemas fontawesome io icons       Title  Single  Height  300  Width  300  gt       lt Grid  Margin  20  gt           lt fa ImageAwesome Icon  Refresh  Spin  True  Height  48  Width  48    gt       lt  Grid gt   lt  Window gt

[c#] WPF loading spinner

Examples related to c#

Examples related to wpf

Examples related to mvvm

Examples related to spinner

Examples related to loading