Click here to Skip to main content
Click here to Skip to main content
Go to top

Animated Counter Control

, 31 Aug 2003
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

 
QuestionSize Of Control - Can It Be Made Larger PinmemberMember 954552725-Oct-12 5:49 
GeneralMy vote of 5 PinmemberMember 403358621-Feb-11 12:27 
GeneralVery Nice PinmemberXmen W.K.19-Jun-10 6:41 
GeneralGood job PinmemberMountazar Abou Chrouche31-Jul-07 23:44 
GeneralVery Nice! Pinmemberiamcoder11-Apr-06 20:28 
GeneralError PinmemberMighty_89918-Apr-04 8:49 
GeneralThe images... PinmemberMatt Philmon17-Feb-04 20:34 
GeneralRe: The images... PinmemberAdrian Tosca2-Mar-04 2:44 
GeneralVery nice! Thanks PinmemberMatt Philmon16-Feb-04 7:59 
GeneralVery Nice Pinmemberrwilliams9-Sep-03 4:42 
GeneralRe: Very Nice PinmemberAdrian Tosca9-Sep-03 5:00 
GeneralImpressed PinmemberChris Cocker3-Sep-03 23:20 
GeneralRe: Impressed PinmemberAdrian Tosca9-Sep-03 4:58 
GeneralCounter.resx is missing in sources Pinmemberfbougadou27-Aug-03 10:49 
GeneralRe: Counter.resx is missing in sources PinmemberAdrian Tosca27-Aug-03 21:54 
GeneralRe: Counter.resx is missing in sources Pinmemberfbougadou28-Aug-03 4:19 
GeneralRe: Counter.resx is missing in sources PinmemberAdrian Tosca28-Aug-03 21:08 
GeneralRe: Empty zips PineditorNishant S27-Aug-03 9:55 
GeneralRe: Empty zips PinmemberNormski27-Aug-03 21:38 
GeneralRe: Empty zips PinmemberAndrew Allen27-Aug-03 10:29 

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 | Mobile
Web02 | 2.8.140916.1 | Last Updated 1 Sep 2003
Article Copyright 2003 by Adrian Tosca
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid