WPF: Circular Progress Bar

Ever wanted a slightly different progress bar from the standard WPF Progress bar which looks like the following (IsIndeterminate is like the WinForms Marquee enum value):

1:  <ProgressBar VerticalAlignment="Top"
2:      Height="22" IsIndeterminate="True"/>

What I would like is one that is more like the ones you see all over the web, where we have a round wheel sort of progress indicator. Would you like one of those?

Well fear not, your search is over, here is a very simple idea, just arrange some Ellipses in a circle within a Canvas and do a constant Rotate StoryBoard and bam, a circular progress bar.

Here is the XAML for such a UserControl.

 1:  <UserControl x:Class="Sonic.CircularProgressBar"
 2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4:      Height="120" Width="120" Background="Transparent">
 5:      <Grid x:Name="LayoutRoot" Background="Transparent"
 6:            HorizontalAlignment="Center" VerticalAlignment="Center">
 7:          <Grid.RenderTransform>
 8:              <ScaleTransform x:Name="SpinnerScale"
 9:                              ScaleX="1.0" ScaleY="1.0" />
10:          </Grid.RenderTransform>
11:          <Canvas RenderTransformOrigin="0.5,0.5"
12:                  HorizontalAlignment="Center"
13:                  VerticalAlignment="Center"
14:                  Width="120" Height="120" >
15:              <Ellipse Width="21.835" Height="21.862"
16:                       Canvas.Left="20.1696"
17:                       Canvas.Top="9.76358"
18:                       Stretch="Fill" Fill="Orange"
19:                       Opacity="1.0"/>
20:              <Ellipse Width="21.835" Height="21.862"
21:                       Canvas.Left="2.86816"
22:                       Canvas.Top="29.9581" Stretch="Fill"
23:                       Fill="Black" Opacity="0.9"/>
24:              <Ellipse Width="21.835" Height="21.862"
25:                       Canvas.Left="5.03758e-006"
26:                       Canvas.Top="57.9341" Stretch="Fill"
27:                       Fill="Black" Opacity="0.8"/>
28:              <Ellipse Width="21.835" Height="21.862"
29:                       Canvas.Left="12.1203"
30:                       Canvas.Top="83.3163" Stretch="Fill"
31:                       Fill="Black" Opacity="0.7"/>
32:              <Ellipse Width="21.835" Height="21.862"
33:                       Canvas.Left="36.5459"
34:                       Canvas.Top="98.138" Stretch="Fill"
35:                       Fill="Black" Opacity="0.6"/>
36:              <Ellipse Width="21.835" Height="21.862"
37:                       Canvas.Left="64.6723"
38:                       Canvas.Top="96.8411" Stretch="Fill"
39:                       Fill="Black" Opacity="0.5"/>
40:              <Ellipse Width="21.835" Height="21.862"
41:                       Canvas.Left="87.6176"
42:                       Canvas.Top="81.2783" Stretch="Fill"
43:                       Fill="Black" Opacity="0.4"/>
44:              <Ellipse Width="21.835" Height="21.862"
45:                       Canvas.Left="98.165"
46:                       Canvas.Top="54.414" Stretch="Fill"
47:                       Fill="Black" Opacity="0.3"/>
48:              <Ellipse Width="21.835" Height="21.862"
49:                       Canvas.Left="92.9838"
50:                       Canvas.Top="26.9938" Stretch="Fill"
51:                       Fill="Black" Opacity="0.2"/>
52:              <Ellipse Width="21.835" Height="21.862"
53:                       Canvas.Left="47.2783"
54:                       Canvas.Top="0.5" Stretch="Fill"
55:                       Fill="Black" Opacity="0.1"/>
56:              <Canvas.RenderTransform>
57:                  <RotateTransform x:Name="SpinnerRotate"
58:                                   Angle="0" />
59:              </Canvas.RenderTransform>
60:              <Canvas.Triggers>
61:                  <EventTrigger RoutedEvent="ContentControl.Loaded">
62:                      <BeginStoryboard>
63:                          <Storyboard>
64:                              <DoubleAnimation
65:                                  Storyboard.TargetName
66:                                      ="SpinnerRotate"
67:                                   Storyboard.TargetProperty
68:                                      ="(RotateTransform.Angle)"
69:                                   From="0" To="360"
70:                                   Duration="0:0:01"
71:                                   RepeatBehavior="Forever" />
72:                          </Storyboard>
73:                      </BeginStoryboard>
74:                  </EventTrigger>
75:              </Canvas.Triggers>
76:          </Canvas>
77:      </Grid>
78:  </UserControl>

And here is all the C# codebehind:

 1:  using System;
 2:  using System.Collections.Generic;
 3:  using System.Linq;
 4:  using System.Text;
 5:  using System.Windows;
 6:  using System.Windows.Controls;
 7:  using System.Windows.Data;
 8:  using System.Windows.Documents;
 9:  using System.Windows.Input;
10:  using System.Windows.Media;
11:  using System.Windows.Media.Animation;
12:  using System.Windows.Media.Imaging;
13:  using System.Windows.Navigation;
14:  using System.Windows.Shapes;
15:
16:  namespace Sonic
17:  {
18:      /// <summary>
19:      /// Provides a circular progress bar
20:      /// </summary>
21:      public partial class CircularProgressBar : UserControl
22:      {
23:          public CircularProgressBar()
24:          {
25:              InitializeComponent();
26:
27:              //Use a default Animation Framerate of 20, which uses less CPU time
28:              //than the standard 50 which you get out of the box
29:              Timeline.DesiredFrameRateProperty.OverrideMetadata(
30:                  typeof(Timeline),
31:                      new FrameworkPropertyMetadata { DefaultValue = 20 } );
32:          }
33:      }
34:  }

And here is an example of one of these CircularProgressBar controls in use:

 1:  <Window
 2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4:          xmlns:local="clr-namespace:Sonic"
 5:      x:Class="Sonic.MainWindow">
 6:
 7:
 8:      <Grid>
 9:              <local:CircularProgressBar/>
10:          </Grid>
11:
12:  </Window>

And here it is in action (obviously, it looks better in run time)… Enjoy!