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.

Answer 1

To get this:

Stick this in a user control:

<UserControl.Resources>     <Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/>     <Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/>      <Style x:Key="BusyAnimationStyle" TargetType="Control">         <Setter Property="Background" Value="#7F000000"/>          <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="Control">                     <ControlTemplate.Resources>                         <Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                          <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">                             <ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">                                 <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>                                 <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>                             </ColorAnimationUsingKeyFrames>                         </Storyboard>                     </ControlTemplate.Resources>                      <ControlTemplate.Triggers>                         <Trigger Property="IsVisible" Value="True">                             <Trigger.EnterActions>                                 <BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />                                 <BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>                                 <BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>                             </Trigger.EnterActions>                              <Trigger.ExitActions>                                 <StopStoryboard BeginStoryboardName="Storyboard0"/>                                 <StopStoryboard BeginStoryboardName="Storyboard1"/>                                 <StopStoryboard BeginStoryboardName="Storyboard2"/>                                 <StopStoryboard BeginStoryboardName="Storyboard3"/>                                 <StopStoryboard BeginStoryboardName="Storyboard4"/>                                 <StopStoryboard BeginStoryboardName="Storyboard5"/>                                 <StopStoryboard BeginStoryboardName="Storyboard6"/>                                 <StopStoryboard BeginStoryboardName="Storyboard7"/>                             </Trigger.ExitActions>                         </Trigger>                     </ControlTemplate.Triggers>                      <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">                         <Grid>                         <Canvas Height="60" Width="60">                             <Canvas.Resources>                                 <Style TargetType="Ellipse">                                     <Setter Property="Width" Value="15"/>                                     <Setter Property="Height" Value="15" />                                     <Setter Property="Fill" Value="#009B9B9B" />                                 </Style>                             </Canvas.Resources>                              <Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>                             <Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>                             <Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>                             <Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>                             <Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />                             <Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>                             <Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>                             <Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />                             <Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>                         </Canvas>                             <Label Content="{Binding Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>                         </Grid>                     </Border>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style> </UserControl.Resources> <Control Style="{StaticResource BusyAnimationStyle}"/> 

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..

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">     <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>     <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="Width" >     <DoubleAnimationUsingKeyFrames.KeyFrames>         <SplineDoubleKeyFrame  KeyTime="00:00:00.0" Value="15" />         <SplineDoubleKeyFrame  KeyTime="00:00:01.0" Value="12" />         <SplineDoubleKeyFrame  KeyTime="00:00:01.6" Value="0" />     </DoubleAnimationUsingKeyFrames.KeyFrames> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="Height" >     <DoubleAnimationUsingKeyFrames.KeyFrames>         <SplineDoubleKeyFrame  KeyTime="00:00:00.0" Value="15" />         <SplineDoubleKeyFrame  KeyTime="00:00:01.0" Value="12" />         <SplineDoubleKeyFrame  KeyTime="00:00:01.6" Value="0" />     </DoubleAnimationUsingKeyFrames.KeyFrames> </DoubleAnimationUsingKeyFrames> 

Answer 2

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> 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.

<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">     <Grid  Margin="20">         <fa:ImageAwesome Icon="Refresh" Spin="True" Height="48" Width="48" />     </Grid> </Window>