The NumericBox control is a numeric editor that accepts numeric type values only and allows you to display and edit those values in many formats. It comes with increase/spin up and descrease/spin down buttons to increment or decrement the numeric values. The NumericBox control contains a single numeric value that can be incremented or decremented by clicking the up or down buttons of the control. Moreover, it supports various numeric formats including Currency, DateTime, Scientific etc.

NumericBox Elements

The NumericBox control consists of two parts, namely numeric editor and the increase/decrease spin buttons, as shown in the following image.

The elements of the NumericBox control are described as follows:

• Numeric Editor: Displays the value. In NumericBox control, the textbox can accept only numeric type values.
• Increase and Decrease  Spin Buttons: Changes the value displayed in the control by clicking.

Set NumericBox Value

You can choose to allow the user to directly enter a numeric value in the NumericBox control at runtime or you can display a value in the NumericBox control through code using the Value property of the C1NumericBox class. You can also set any standard or custom numeric format for the value using the Format property. In addition, you can control the visibility of the increase and decrease spin buttons of the control using the ShowButton property, which is of Boolean type.

The following code demonstrates how to set the Value and ShowButton properties in code. In this example, the Value property is bound to a datasource to fetch the value to be displayed in the control at runtime.

<c1:C1NumericBox Name="c1NumericBox" ShowButtons="True" Value="{Binding NumericValue,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                 Placeholder="HELLO" HorizontalAlignment="Left"  Width="100"/>