NumericEdit Class

An editor that displays a numeric value and allows a user to edit the value (enter a number in the edit box or use spin buttons to decrease/increase the value).

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.Editors

Declaration

public class NumericEdit :
    EditBase,
    INumericEditController,
    IEditController,
    IElementController

Remarks

NumericEdit initially displays an input box where a user can type a number:

You can also add the following optional elements:

1. Custom Icon    2. Label    3. Up/Down Icons (Spin Buttons)    4. Help Text    5. Error Message    6. Suffix

Input Value

Use the Value property to set or get the number in the editor. The MinValue and MaxValue properties specify the minimum and maximum allowed values and limit user input to the specified range.

Handle the ValueChanged event to get a notification when the editor’s value changes.

The SelectValueOnFocus property gets or sets whether the editor value is selected when the editor is focused.

Use the following properties to change input text appearance and alignment:

Property	Description
TextColor / DisabledTextColor	Specify the text color for each state of the editor.
TextFontSize TextFontFamily TextFontAttributes	Configure the font settings.
TextHorizontalAlignment	Gets or sets the horizontal alignment of text entered in the editor.

You can also use the CursorColor property to customize the color of the input cursor.

Number Format

The DisplayFormat property defines the input value’s format. This format is applied when the editor loses focus.

You can use standard or custom format specifiers (see the MSDN topics Standard Numeric Format Strings and Custom Numeric Format Strings) to create format patterns, for example:

• Currency

  XAML

  <dxe:NumericEdit Value="5000" DisplayFormat="c"/>
  

  

• Numeric

  XAML

  <dxe:NumericEdit Value="1234.567" DisplayFormat="n1"/>
  

  

• Percent

  XAML

  <dxe:NumericEdit Value="0.5678" DisplayFormat="p"/>
  

  

Maximum Number of Decimal Digits

To specify the maximum number of digits after the decimal separator, use the MaxDecimalDigitCount property.

XAML

<dxe:NumericEdit Value="12.3456" MaxDecimalDigitCount="2"/>

Null Value and Placeholder

If no value is entered, the numeric editor displays 0. To allow an editor to accept a null value and display an empty edit box, set the AllowNullValue property to true.

You can use the PlaceholderText property to show an input prompt string within the edit box when the editor is empty.

To specify the placeholder’s text color, use the PlaceholderColor property.

Label

A label is an input prompt string (LabelText) displayed at the top of the editor.

If the AllowNullValue property is set to true, the label’s position depends on the editor’s state:

• the label is displayed inside the edit box when the editor is empty and not focused.
• the label moves to the top when the editor is focused and stays there when a value is entered.

To pin the label to the top of the edit box, set the IsLabelFloating property to false.

To customize the label’s appearance, use the following properties:

Property	Description
LabelColor / FocusedLabelColor DisabledLabelColor / ErrorColor	Specify the label’s color for each state of the editor.
LabelFontSize TextFontFamily TextFontAttributes	Configure the label’s font settings.

Help Text and Error Message

You can display the following labels below an editor:

• HelpText - A brief editor description.
• ErrorText - A message shown when an error occurs (HasError is true).

The BottomTextTopIndent property specifies the indent between the editor’s bottom border and the help or error text.

To specify the color and font attributes for the help/error text, use the following properties:

Property	Description
HelpTextColor DisabledHelpTextColor	Specify the help text color for different states of an editor.
ErrorColor	Specifies the error message text color.
BottomTextFontSize BottomTextFontFamily BottomTextFontAttributes	Specify font settings.

If HelpText is not set, ErrorText appears as an additional line below the edit box and page content shifts down. To prevent this behavior, set the ReserveBottomTextLine property to true.

Icons (Increment/Decrement, Clear, Error, Custom)

The numeric editor can display icons within its box.

• Up/Down icons - a pair of icons that a user can tap to increase/decrease a value by the StepValue.
• Clear icon - removes the value in the editor.
• Error icon - appears in the error state (HasError is true).
• Custom icons - can be shown on the left or right within the box.

Use the following members to manage the editor’s icons:

Icon	Property	Description
Up/Down Icons	UpIcon / DownIcon	Specify the increment and decrement icon images.
	UpDownIconAlignment	Gets or sets the alignment of the up and down icons that increase and decrease the editor’s value.
	AllowLooping	Gets or sets whether the current value is set to the minimum value when the user has exceeded the maximum value (and vice versa).
	UpIconClicked / UpIconCommand DownIconClicked / DownIconCommand	Allow you to assign custom actions to the increment and decrement icons.
	IsUpDownIconVisible	Gets or sets whether to display the up and down icons that allow users to increase and decrease the current editor value.
Clear Icon	ClearIcon	Specifies the clear icon image.
	ClearIconClicked / ClearIconCommand	Allow you to assign a custom action to the clear icon.
	ClearIconColor	Gets or sets the color of the clear icon.
	ClearIconVisibility	Specifies when the clear icon is displayed.
Error Icon	ErrorIcon	Allows you to replace the default error icon image with a custom image.
	ErrorIconClicked / ErrorIconCommand	Allow you to perform an action when a user taps the error icon.
	ErrorIconColor	Gets or sets the color of an icon displayed when HasError is set to true.
	IsErrorIconVisible	Gets or sets whether the error icon is visible.
Custom Icons	StartIcon / EndIcon	Specify custom icons displayed on the left and right within the editor.
	StartIconClicked / StartIconCommand EndIconClicked / EndIconCommand	Allow you to set actions that occur when a user taps custom icons.
	StartIconColor / EndIconColor	Specify icon colors.
	IsStartIconVisible / IsEndIconVisible	Specify whether custom icons are visible.
Common	IconColor / DisabledIconColor	Specify icon color for each state of the editor.
	IconIndent	Gets or sets the distance between an icon and input text (affix).
	IconSpacing	Gets or sets the distance between icons.
	IconVerticalAlignment	Gets or sets the vertical alignment of icons.

Prefix and Suffix

The Prefix and Suffix properties allow you to specify the text prefix and suffix that are shown before and after the number in the editor.

Use the following properties to adjust the prefix and suffix settings:

Property	Description
AffixColor / DisabledAffixColor	Specify the prefix and suffix color for different states of the editor.
AffixFontSize AffixFontFamily AffixFontAttributes	Configure the font settings.
AffixIndent	Gets or sets the distance between the affix and input value.

User Interaction

Editors raise the following events on user interaction:

• Tap - Fires when the user taps the editor.
• DoubleTap - Fires when the user double taps the editor.
• LongPress - Fires when the user presses and holds the editor.

Editor Appearance

The editor appears as follows depending on the current state and specified BoxMode:

Editor State	BoxMode = Outlined (default)	BoxMode = Filled
Inactive
Focused
Activated
Error
Disabled

Use the following properties to change the appearance of the edit box and its borders:

Property	Description
BorderColor DisabledBorderColor FocusedBorderColor	Specify the border color for each state of the editor.
ErrorColor	Specifies the color of the edit box borders, label, and error icon and error message if there is an input error.
BorderThickness DisabledBorderThickness FocusedBorderThickness	Specify the border thickness for each state of the editor.
CornerMode	Specifies whether edit box corners are rounded or cut.
CornerRadius	Specifies the radius of the edit box corners.
BackgroundColor DisabledBackgroundColor	Specifies the edit box fill color.
BoxPadding	Specifies the amount of space between edit box borders and content.

The CursorColor property specifies the color of the input cursor. To specify the text color, use the TextColor property.

Implements

Xamarin.Forms.IElementController

Inheritance

Object

EditBase

NumericEdit