Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / C#
Article

Animated Counter Control

Rate me:
Please Sign up or sign in to vote.
4.88/5 (35 votes)
31 Aug 20032 min read 117.4K   5.9K   72   24
An animated counter control with different themes

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.

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

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

C#
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


Written By
Web Developer
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionWPF Porting Pin
Member 1464251014-Dec-21 5:20
Member 1464251014-Dec-21 5:20 
QuestionHow to use with decimal Pin
Member 1068454726-Sep-20 2:14
Member 1068454726-Sep-20 2:14 
GeneralMy vote of 5 Pin
Gun Gun Febrianza9-Jan-17 9:39
Gun Gun Febrianza9-Jan-17 9:39 
QuestionHow to use this CounterLib.dll in WPF Pin
Padmini P8-Dec-14 21:37
Padmini P8-Dec-14 21:37 
QuestionSize Of Control - Can It Be Made Larger Pin
SynergySystems25-Oct-12 5:49
SynergySystems25-Oct-12 5:49 
GeneralMy vote of 5 Pin
Member 403358621-Feb-11 12:27
Member 403358621-Feb-11 12:27 
GeneralVery Nice Pin
Xmen Real 19-Jun-10 6:41
professional Xmen Real 19-Jun-10 6:41 
GeneralGood job Pin
Mountazar Abou Chrouche31-Jul-07 23:44
Mountazar Abou Chrouche31-Jul-07 23:44 
GeneralVery Nice! Pin
iamcoder11-Apr-06 20:28
iamcoder11-Apr-06 20:28 
GeneralError Pin
Mighty_89918-Apr-04 8:49
Mighty_89918-Apr-04 8:49 
GeneralThe images... Pin
Matt Philmon17-Feb-04 20:34
Matt Philmon17-Feb-04 20:34 
GeneralRe: The images... Pin
Adrian Tosca2-Mar-04 2:44
Adrian Tosca2-Mar-04 2:44 
GeneralVery nice! Thanks Pin
Matt Philmon16-Feb-04 7:59
Matt Philmon16-Feb-04 7:59 
GeneralVery Nice Pin
rwilliams9-Sep-03 4:42
rwilliams9-Sep-03 4:42 
GeneralRe: Very Nice Pin
Adrian Tosca9-Sep-03 5:00
Adrian Tosca9-Sep-03 5:00 
GeneralImpressed Pin
Chris Cocker3-Sep-03 23:20
Chris Cocker3-Sep-03 23:20 
GeneralRe: Impressed Pin
Adrian Tosca9-Sep-03 4:58
Adrian Tosca9-Sep-03 4:58 
GeneralCounter.resx is missing in sources Pin
fbougadou27-Aug-03 10:49
fbougadou27-Aug-03 10:49 
GeneralRe: Counter.resx is missing in sources Pin
Adrian Tosca27-Aug-03 21:54
Adrian Tosca27-Aug-03 21:54 
GeneralRe: Counter.resx is missing in sources Pin
fbougadou28-Aug-03 4:19
fbougadou28-Aug-03 4:19 
GeneralRe: Counter.resx is missing in sources Pin
Adrian Tosca28-Aug-03 21:08
Adrian Tosca28-Aug-03 21:08 
GeneralRe: Empty zips Pin
Nish Nishant27-Aug-03 9:55
sitebuilderNish Nishant27-Aug-03 9:55 
GeneralRe: Empty zips Pin
NormDroid27-Aug-03 21:38
professionalNormDroid27-Aug-03 21:38 
GeneralRe: Empty zips Pin
Andrew Allen27-Aug-03 10:29
Andrew Allen27-Aug-03 10:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.