CountUp

Namespace: Wisej.Web.Ext.CountUp

Assembly: Wisej.Web.Ext.CountUp (4.1.0.0)

• Control
  • CountUp

Represents a control that displays a numeric value with a counting animation, based on the CountUp.js library countUp.

C#

public class CountUp : Control

VB.NET

Public Class CountUp
    Inherits Control

When the control is first shown it counts from 0 to Value. Every time Value changes afterwards, it counts from the currently displayed number to the new value, and fires CountTerminated when the animation ends.

The group and decimal separators are taken from CurrentCulture.

Example:

Creating a counter that animates to a new total:

var counter = new CountUp
{
    Duration = 1500,
    TextAlign = HorizontalAlignment.Right,
    Font = new Font("Segoe UI", 36f)
};
counter.CountTerminated += (s, e) => AlertBox.Show("Done!");
this.Controls.Add(counter);

counter.Value = 12500;

Constructors

CountUp()

Initializes a new instance of CountUp.

Properties

Duration

Int32: Returns or sets the duration of the animation in milliseconds. (Default: 2500)

The default is 2500. A change applies to the next animation started by setting Value.

Throws:

• ArgumentOutOfRangeException The value is less than 100.

Numerals

String[]: Returns or sets an array of custom numerals used to display the digits from 0 to 9.

The array must be empty (the default, uses the standard digits) or contain exactly 10 strings, where the element at index n replaces the digit n. Setting null resets it to an empty array.

Throws:

• ArgumentException The array doesn't contain 0 or 10 elements.

Example:

Displaying the value using Eastern Arabic numerals:

this.countUp1.Numerals = new[] { "٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩" };

TextAlign

HorizontalAlignment: Returns or sets the alignment of the label. The default is Left. (Default: Left)

Value: One of the HorizontalAlignment values.

UseEasing

Boolean: Returns or sets whether the animation will use easing. (Default: True)

When true (default) the counting slows down as it approaches the target value (ease-out exponential); when false the number changes at a constant rate.

UseGrouping

Boolean: Returns or sets whether the numeric value will be formatted using the grouping separator. (Default: True)

The separator is the NumberGroupSeparator of CurrentCulture, i.e. "1,000,000" in en-US and "1.000.000" in de-DE.

Value

Single: Returns or sets a numeric value to count to. (Default: 0)

Changing the value starts a new animation on the client from the currently displayed number to the new value; CountTerminated is fired when the animation ends.

The number is displayed without decimals: fractional values are rounded to the nearest integer.

Example:

Updating the counter with the result of a query:

private void buttonRefresh_Click(object sender, EventArgs e)
{
    this.countUp1.Value = GetOrderCount();
}

Methods

OnCountTerminated(e)

Fires the CountTerminated event.

Parameter	Type	Description
e	EventArgs	The EventArgs that contains the event data.

OnValueChanged(e)

Fires the ValueChanged event.

Parameter	Type	Description
e	EventArgs	The EventArgs that contains the event data.

OnWebEvent(e)

Processes events from the client.

Parameter	Type	Description
e	WisejEventArgs

OnWebRender(config)

Renders the client component.

Parameter	Type	Description
config	Object	Dynamic configuration object.

Events

CountTerminated

EventHandler Fired when the widget has finished counting.

ValueChanged

EventHandler Fired when the value changes.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejSerializable