Scaling circles – loading animation in WPF

Silverlight has an interesting loading animation for the content that is being buffered or downloaded.

I was quite curious on how to implement such a functionality in WPF and I came up with a quite primitive, but working loading animation that somewhat resembles the one above (although, without disappearing ellipses).

Once you have the foundation, you can easily add extra effects (like glow), but I am going to focus only on the basic structure for now.

First of all, I started by creating a window sized 300 by 300. As you read through this article, you will see that in the XAML code, the values I am using are tied to this specific window size. Since this is an experimental project, you can easily adapt it to any window size by correctly placing the ellipses (that is the only element that depends on the window size, hence its location).

<Window x:Class="WPF_Test.MainWindow"
        xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
        xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
        Title="MainWindow" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
    </Grid>
</Window>

Since all ellipses used have the same initial appearance, I am also creating a style, that will be used with each new ellipse (a total number of 8) placed on the window:

<Window.Resources>
        <Style x:Key="EllipseStyle" TargetType="{x:Type Ellipse}">
            <Setter Property="Fill" Value="#FF05289F"/>
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="Height" Value="22"/>
            <Setter Property="Width" Value="22"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        </Style>
</Window.Resources>

When it comes to object animation, it is all tied to the Storyboard element, that will contain the animation keyframes. So I am creating one here as well (also placed inside Window.Resources):

<Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
</Storyboard>

The Key property defines the key by which I will later find this Storyboard element from code-behind and trigger the animation. Notice that the RepeatBehavior property is set to Forever – the animation will be continuous, if the user doesn’t intercept it.

Before placing the keyframe data, I need to create the ellipses, so inside the existing Grid element, I am placing eight ellipses with RenderTransform elements present (since the point of my actual animation is to steadily transform the scale of the ellipses back and forth).

<Ellipse x:Name="ellipse1"  Style="{StaticResource EllipseStyle}" Margin="124,61,132,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>        
<Ellipse x:Name="ellipse2" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Right" Margin="0,74,104,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>
        
<Ellipse x:Name="ellipse3" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Right" Margin="0,105,91,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse4" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Right" Margin="0,0,103,102" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
   <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse5" Style="{StaticResource EllipseStyle}" Margin="124,0,132,87" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse6" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Left" Margin="92,0,0,102" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="ellipse7" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Left" Margin="79,105,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>        
<Ellipse x:Name="ellipse8" Style="{StaticResource EllipseStyle}" HorizontalAlignment="Left" Margin="93,74,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" >
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>

Although this code might seem confusing, in fact it is just building eight ellipses with the same properties (the only one that is different is the location and the alignment).

Now to the interesting part – building the animation. Inside the existing storyboard, I am using eight DoubleAnimationUsingKeyFrames elements – these will handle the animation for each of the ellipses.

Here is how the XAML code block looks like for this specific segment:

<DoubleAnimationUsingKeyFrames BeginTime="0:0:00" Storyboard.TargetName="ellipse1” Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="0:0:01" Value="1.5" KeySpline="0,0,1,1" />
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="0:0:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="0:0:01" Value="1.5" KeySpline="0,0,1,1" />
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:09" Value="1"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    <SplineDoubleKeyFrame KeyTime="00:00:07" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="1.5"/>
    <SplineDoubleKeyFrame KeyTime="00:00:09" Value="1"/>
</DoubleAnimationUsingKeyFrames>

This is indeed a lot of XAML code. However, it is needed to perform the proper animation for all 8 ellipses. There is indeed another way to do it – for example, you could use RotateTransofrm to rotate the grid with an incrementing angle – each time it would be incremented with 45 degrees or Pi/4 since there are 8 circles and 360 degrees in the big ellipse, and use a DispatcherTimer instance to correctly time all this. However, sometimes frame-to-frame animation is more reliable.

Here is an interesting point to be made, and at the beginning it might lead to some mistakes and non-synchronized animation if it is not implemented correctly. It is about the position of SplineDoubleKeyFrame elements – as you see, in the first two DoubleAnimationUsingKeyFrames elements I am using two SplineDoubleKeyFrame elements. After that, I am using three of them.

It can be tempting to continue using two of them all along, however this will not give the desired effect. The reason there are two elements at first is because at the beginning of the storyboard, the animation automatically leads to the first changed position, creating the smooth transition from one state to another. Later on, when the transition is over, the next animation is started (or it can go parallel with the one we have at the beginning).

Here is how it works:

In blue I highlighted the transition from the changed state to the initial one for the object (in my case, that would be the ellipse). Skipping the white part (the transition from the initial state to the new one) and transitioning from that point will cause sync problems – one ellipse will start changing and the next one might as well, while the first one isn’t ready to go back to its initial state yet.

All good by now, but the animation has to be somehow triggered. Since I have a key for the Storyboard I am using, I can put the code below in any event handler to trigger the animation:

Storyboard sb = (Storyboard)FindResource("Storyboard1");
sb.Begin(this);

And since the animation is continuous, it will run until the user stops it. The end result can be tweaked to be a separate user control, you can easily add additional effects (and even a label to show the loading percentage) and even track the number of performed animations to trigger another event.