Animated Counter Control

Introduction

Counter is a C# control that displays a value with digits from a bitmap. Thirteen themes are included in the control resources but others can be added. The counter will start to move when the ToValue property is changed. A "fall" animation effect happen when a digit is changed. The timer interval that increment/ decrement the value can be changed from the default of 1000(1 sec). The animation speed, number of digits displayed can also be changed. The CounterFinish event is raised when the counter Value equals ToValue.

Another theme for the Counter

The code

The c# control class Counter is derived from System.Windows.Forms.UserControl. It overrides the OnPaintBackground method to draw itself.

protected override void OnPaintBackground(
        System.Windows.Forms.PaintEventArgs e)
{
    try 
    {
        for(int i=0; i!=DigitCount; i++) 
        {
            e.Graphics.DrawImage(
              (digits[i] as CounterDigit).DigitBitmap, 
              i * digitWidth, 0);
        }
    } 
    catch {}
}

There are two timers in the control. The main timer it is used to Increment / Decrement the Value towards the ToValue. The other timer - animation timer - is used to animate the digits to obtain the "fall" effect.

private void animationTimer_Tick(object source, EventArgs e)
{
    for(int i=0; i!=DigitCount; i++) 
    {
        CounterDigit cd = digits[i] as CounterDigit;
        cd.NextFrame();
    }
    Invalidate();
}

Every digit frame is moved to the next frame until the last frame is reached and the animation stops. After that the control is invalidated to force repaint itself.

There is an additional helper class CounterDigit for an digit representation.

The image displayed at a certain moment of time depend on the Frame property used for animation effect. This is built from the current digit and the previous digit.

public Bitmap DigitBitmap 
{
    get 
    {
        Graphics g = Graphics.FromImage(framedDigitBitmap);
        try 
        {
            g.DrawImage(
              numbersBitmap, 0, 0, 
              new Rectangle(Digit * width, frames - Frame, width, frames), 
              GraphicsUnit.Pixel);
            g.DrawImage(
               numbersBitmap, 0, Frame, 
               new Rectangle( PrevDigit * width, 0, width, frames - Frame + 2), 
               GraphicsUnit.Pixel);
        }
        finally 
        {
            g.Dispose();
        }
        return framedDigitBitmap;
    }
}

Properties for adjusting the appearance and behavior

There are a couple of properties that modify the appearance and behavior of the Counter control:

Value - is the value displayed in the control
ToValue - is the value that the Counter intend to reach
DigitCount - is the number of digits displayed. For example for 5 and the value 34 the control will display 00034
TimerInterval - is the interval between automatic value updates that increment / decrement the counter to the ToValue property
AnimationSpeed - is the speed for digit fall animation
NumbersTheme - is the theme used to display the digits. Can be chosen from 13 predefined bitmaps embedded in the control resources.

Final thoughts

The Counter is a pretty looking control and that its its main quality. I build it to show how a simple animation effect can be achieved. To actually be useful the control might require some modifications. Have fun with it!

History

1 Sep 2003 - updated source code

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here