Implementing the RadNumericUpDown for WPF

I am sure that you are wondering why I would spend time blogging about implementing a control as simple as the RadNumericUpDown for WPF.  After all this is not a complex control and if you have done any client development you have probably used a NumericUpDown in the past.  Well, this is not the same control and it does have some nice features that you may not be aware are available.  I thought it might be nice to demonstrate some of these features.

So most likely you have used the WinForms version of NumericUpDown and were limited to only a few options.  I am going to show those counterparts and then talk about some additional features.

Setting DecimalPlaces
By default the RadNumericUpDown is set to display two (2) decimal places in contrast to the zero (0) decimal places the classic NumericUpDown default.  You can change the number of decimals using the NumberFormatInfo property.  The XAML below demonstrates.

    <!-- Set decimal places to 0-->

    <telerik:RadNumericUpDown Minimum="0" Maximum="100" Margin="12,39,36,0" Height="22" VerticalAlignment="Top">

        <telerik:RadNumericUpDown.NumberFormatInfo>

            <Globalization:NumberFormatInfo NumberDecimalDigits="0" />

        </telerik:RadNumericUpDown.NumberFormatInfo>

    </telerik:RadNumericUpDown>

Incrementing the value
With the classic NumericUpDown you were limited to only one way to increment the value of the control.  The RadNumericUpDown actually provides two different properties to allow for incrementing large and small values.  The properties are called LargeChange and SmallChange and allow you the capability to specify that the value increases differently based on the users action. 

When pressing the repeater buttons, pressing the up and down keys or using the mouse wheel, the SmallChange property will be used to increment the value of the control. 

When pressing PageUp and PageDown the LargeChange property will be used to increment.

Some other properties to be aware of regarding how values are incremented are Delay, RepeatInterval and ChangeAcceleration.   

The Delay property represents the number of milliseconds that will occur whenever the repeat buttons of RadNumericUpDown are first pressed. 

The ChangeAcceleration property is a boolean which comes into play when any of the PageUp, PageDown, Up, and Down buttons are held for more than 20 clicks.  If the value is true then the RepeatInterval property will be used to decrease the acceleration. 

The RepeatInterval property mentioned above represents the number of milliseconds to delay between any two clicks of the repeat buttons whenever one of them is held.

Minimum and Maximum
These properties force the value of the control to fall within the range between the two values, just as they did in the classic NumericUpDown

ThousandsSeparator

In the classic NumericUpDown it was common to use the ThousandsSepartor property for large numeric values.  Using the RadNumericUpDown you have much more power over how your data is formatted using the NumberFormatInfo settings.  Below is a simple example of how to display the comma between thousands.

    <telerik:RadNumericUpDown Minimum="0" Maximum="10000" Margin="12,39,36,0" Height="22" VerticalAlignment="Top" NumericUnit="">

        <telerik:RadNumericUpDown.NumberFormatInfo>

            <Globalization:NumberFormatInfo NumberGroupSeparator=","  />

        </telerik:RadNumericUpDown.NumberFormatInfo>

    </telerik:RadNumericUpDown>

AutoReverse
The AutoReverse property of the RadNumericUpDown allows you to indicate whether you want the control to stop at the Maximum value or continue by reseting to the Minimum value.  So as the user clicks the repeater button and reaches the Maximum the value simple rolls over to the Minimum and continues to increment.  This works in both directions.

ValueFormat

The ValueFormat property gives you the ability to change how your data is represented to the user.  There are currently three settings available which should cover most needs.

• Numeric is the default setting and is used for numeric values without specific formatting, the default value is taken from the current culture of Windows. The specific Numeric format is described by all members of NumberFormatInfo starting with Numeric prefix.
• Percentage is used for percentage values, the default percentage value is taken from the current culture of Windows. The specific Percentage format is described by all members of NumberFormatInfo starting with Percentage prefix.
• Currency is used for currency values, the default currency formatting is taken from the current culture of Windows. The specific Currency format is described by all members of NumberFormatInfo starting with Currency prefix.

CustomUnit

Finally, the CustomUnit property which will display a value to the right of the value in the RadNumericUpDown.   There are a number of potential uses, but it is simple a string value displayed within the control.  Below I have a screenshot where I used "each" as the Custom unit to demonstrate how it can be used.