Click here to Skip to main content
11,487,406 members (71,648 online)
Click here to Skip to main content

Animated Counter Control

, 31 Aug 2003 89.6K 4.1K 66
Rate this:
Please Sign up or sign in to vote.
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.

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

Share

About the Author

Adrian Tosca
Web Developer
Romania Romania
No Biography provided

Comments and Discussions

 
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 

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

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

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