Click here to Skip to main content
13,351,239 members (52,764 online)
Click here to Skip to main content
Add your own
alternative version


68 bookmarked
Posted 26 Aug 2003

Animated Counter Control

, 31 Aug 2003
Rate this:
Please Sign up or sign in to vote.
An animated counter control with different themes


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)
        for(int i=0; i!=DigitCount; i++) 
              (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;

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 
        Graphics g = Graphics.FromImage(framedDigitBitmap);
              numbersBitmap, 0, 0, 
              new Rectangle(Digit * width, frames - Frame, width, frames), 
               numbersBitmap, 0, Frame, 
               new Rectangle( PrevDigit * width, 0, width, frames - Frame + 2), 
        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!


  • 1 Sep 2003 - updated source code


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


About the Author

Adrian Tosca
Web Developer
Romania Romania
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Gun Gun Febrianza9-Jan-17 10:39
member Gun Gun Febrianza9-Jan-17 10:39 
QuestionHow to use this CounterLib.dll in WPF Pin
Padmini P8-Dec-14 22:37
memberPadmini P8-Dec-14 22:37 
QuestionSize Of Control - Can It Be Made Larger Pin
Member 954552725-Oct-12 6:49
memberMember 954552725-Oct-12 6:49 
GeneralMy vote of 5 Pin
Member 403358621-Feb-11 13:27
memberMember 403358621-Feb-11 13:27 
GeneralVery Nice Pin
Xmen W.K.19-Jun-10 7:41
memberXmen W.K.19-Jun-10 7:41 
GeneralGood job Pin
Mountazar Abou Chrouche1-Aug-07 0:44
memberMountazar Abou Chrouche1-Aug-07 0:44 
GeneralVery Nice! Pin
iamcoder11-Apr-06 21:28
memberiamcoder11-Apr-06 21:28 
GeneralError Pin
Mighty_89918-Apr-04 9:49
memberMighty_89918-Apr-04 9:49 
GeneralThe images... Pin
Matt Philmon17-Feb-04 21:34
memberMatt Philmon17-Feb-04 21:34 
GeneralRe: The images... Pin
Adrian Tosca2-Mar-04 3:44
memberAdrian Tosca2-Mar-04 3:44 
GeneralVery nice! Thanks Pin
Matt Philmon16-Feb-04 8:59
memberMatt Philmon16-Feb-04 8:59 
GeneralVery Nice Pin
rwilliams9-Sep-03 5:42
memberrwilliams9-Sep-03 5:42 
GeneralRe: Very Nice Pin
Adrian Tosca9-Sep-03 6:00
memberAdrian Tosca9-Sep-03 6:00 
GeneralImpressed Pin
Chris Cocker4-Sep-03 0:20
memberChris Cocker4-Sep-03 0:20 
GeneralRe: Impressed Pin
Adrian Tosca9-Sep-03 5:58
memberAdrian Tosca9-Sep-03 5:58 
GeneralCounter.resx is missing in sources Pin
fbougadou27-Aug-03 11:49
memberfbougadou27-Aug-03 11:49 
GeneralRe: Counter.resx is missing in sources Pin
Adrian Tosca27-Aug-03 22:54
memberAdrian Tosca27-Aug-03 22:54 
GeneralRe: Counter.resx is missing in sources Pin
fbougadou28-Aug-03 5:19
memberfbougadou28-Aug-03 5:19 
GeneralRe: Counter.resx is missing in sources Pin
Adrian Tosca28-Aug-03 22:08
memberAdrian Tosca28-Aug-03 22:08 
GeneralRe: Empty zips Pin
Nishant S27-Aug-03 10:55
editorNishant S27-Aug-03 10:55 
GeneralRe: Empty zips Pin
Normski27-Aug-03 22:38
memberNormski27-Aug-03 22:38 
GeneralRe: Empty zips Pin
Andrew Allen27-Aug-03 11:29
memberAndrew Allen27-Aug-03 11: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 1 Sep 2003
Article Copyright 2003 by Adrian Tosca
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid