Siticone Numeric UpDown

The SiticoneUpDown is a highly customizable replacement for the standard numeric up-down control. It offers smooth value change animations, integrated gradient support, customizable buttons with ripple effects, and smart interaction features like mouse wheel scrolling and acceleration on repeat clicks.

Numeric Logic

Configure the core behavior for number handling, ranges, and precision.

Property	Type	Description
`Value`	decimal	The current numeric value displayed.
`Minimum`	decimal	The lowest allowed value (Default: 0).
`Maximum`	decimal	The highest allowed value (Default: 100).
`Increment`	decimal	The amount to add or subtract when clicking buttons.
`DecimalPlaces`	int	Number of digits to display after the decimal point.
`InputType`	Enum	`WholeNumbers` (integers only) or `Decimals`.
`StepPoints`	List<decimal>	A list of predefined values to snap to. If populated, incrementing/decrementing will jump between these specific numbers instead of adding/subtracting the Increment.

Visual Customization

Create a unique look with gradients, custom borders, and rounded corners.

Property	Type	Description
`ShowBorder`	bool	Toggles visibility of the control's border.
`BorderColor`	Color	Color of the border in idle state.
`HoverBorderColor`	Color	Border color when the mouse is over the control.
`ActiveBorderColor`	Color	Border color when the control has focus.
`CornerRadius...`	int	Individual radius settings for each corner.
`UseGradient`	bool	Enables gradient background rendering.
`GradientColorStart`	Color	Starting color for the gradient.
`GradientColorEnd`	Color	Ending color for the gradient.
`FillColor`	Color	Solid background color (used if gradients are disabled).

Interaction & Behavior

Fine-tune how the user interacts with the control.

Property	Type	Description
`EnableDirectInput`	bool	Allows users to double-click the control to type a number directly via a temporary TextBox overlay.
`IsReadOnly`	bool	Locks the value, preventing changes via buttons or mouse wheel.
`AllowMouseWheel`	bool	Enables changing the value by scrolling the mouse wheel.
`AnimateValueChanges`	bool	If true, the displayed number smoothly transitions (interpolates) from the old value to the new value.
`InitialRepeatDelay`	int	Milliseconds to wait before auto-repeating starts when holding a button (Default: 500ms).
`RepeatSpeed`	int	Milliseconds between increments while holding a button (Default: 50ms).

Events

React to changes in the control's value.

ValueChanged Event

// Fired whenever the numeric Value property changes.
numQty.ValueChanged += (s, e) => 
{
                decimal total = numQty.Value * unitPrice;
    lblTotal.Text = total.ToString("C");
};

Designer Support

The control includes a comprehensive Smart Tag menu in Visual Studio for rapid configuration.

Category	Features
`Themes`	Apply one-click presets like Modern, Flat, Material Design, Dark, Gradient, Metro, etc.
`Numeric Properties`	Quick access to Value, Min/Max, Increment, and Decimals.
`Appearance`	Toggles for Borders, Colors, and Corner Radius.
`Settings`	Copy/Paste style settings between controls.

Usage Examples

Example 1: Quantity Selector

Configure for selecting item quantities (whole numbers only).

C# - Whole Numbers

private void SetupQuantityControl()
{
    numQuantity.InputType = InputType.WholeNumbers;
    numQuantity.Minimum = 1;
    numQuantity.Maximum = 99;
    numQuantity.Value = 1;
    
                // Visuals
    numQuantity.TextAlignment = TextAlignment.Center;
    numQuantity.ShowBorder = true;
    numQuantity.CornerRadiusTopLeft = 4;
    numQuantity.CornerRadiusTopRight = 4;
    numQuantity.CornerRadiusBottomLeft = 4;
    numQuantity.CornerRadiusBottomRight = 4;
}

Example 2: Price Input

Setup for monetary values with 2 decimal places and direct input support.

C# - Currency Setup

private void SetupPriceControl()
{
    numPrice.InputType = InputType.Decimals;
    numPrice.DecimalPlaces = 2;
    numPrice.Increment = 0.50M; // Step by 50 cents
    numPrice.EnableDirectInput = true; // Allow typing
    
                // Modern Style
    numPrice.BorderColor = Color.Silver;
    numPrice.HoverBorderColor = Color.DodgerBlue;
    numPrice.ActiveBorderColor = Color.DodgerBlue;
}

Example 3: Stepped Values (Snap Points)

Using the StepPoints property to restrict input to specific values (e.g., common zoom levels).

C# - Snap Points

private void SetupZoomControl()
{
                // Define allowed zoom percentages
    numZoom.StepPoints = new List<decimal> { 10, 25, 50, 75, 100, 125, 150, 200, 400 };
    
    numZoom.Minimum = 10;
    numZoom.Maximum = 400;
    numZoom.Value = 100;
    
                // When clicking up/down, it will jump to the nearest value in the list
                // instead of adding +1.
}

Example 4: Animated Gradient Theme

Creating a stylish control with gradient background and value animation.

C# - Gradient Style

private void ApplyGradientTheme()
{
    numScore.UseGradient = true;
    numScore.GradientColorStart = Color.White;
    numScore.GradientColorEnd = Color.AliceBlue;
    numScore.GradientMode = GradientModes.Vertical;
    
    numScore.AnimateValueChanges = true; // Numbers will scroll/fade
    numScore.BorderColor = Color.LightSteelBlue;
}