All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
1.1
The page you are viewing does not exist in version 1.1. This link will take you to the root page.

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

Declaration

public class NumericEdit :
    EditBase,
    INumericEditController,
    IEditController,
    IElementController

Remarks

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

NumericEdit

You can also add the following optional elements:

NumericEdit - Elements

  1. Custom Icon
  2. Label
  1. Up/Down Icons (Spin Buttons)
  2. Help Text
  1. Error Message

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.

The SelectValueOnFocus property specifies if the value is selected when you focus the editor.

Use the following properties to change the input text's 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.

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

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

    NumericEdit.DisplayFormat - Currency

  • Numeric

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

    NumericEdit.DisplayFormat - Numeric

  • Percent

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

    NumericEdit.DisplayFormat - Percent

Maximum Number of Decimal Digits

To specify the maximum allowed number of digits after the decimal separator, use the MaxDecimalDigitCount property. This property has a lower priority than DisplayFormat.

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

NumericEdit.MaxDecimalDigitCount

Null Value and Placeholder

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

NumericEdit.AllowNullValue

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

NumericEdit.PlaceholderText

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.

NumericEdit Label

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.

NumericEdit Label - AllowNullValue

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:

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, 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.
  • Error icon - appears in the error state (HasError is true).
  • Custom icons - can be shown on the left or right within the box.

NumericEdit - Icons

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

Icon

Property

Description

Up/Down Icons

IsUpDownIconVisible

Gets or sets whether to display the up and down icons that allow users to increase and decrease the current editor value.

UpIcon / DownIcon

Specify the increment and decrement icon images.

UpDownIconAlignment

Gets or sets the alignment of the up and down buttons that increase and decrease the actual 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.

Error Icon

ErrorIcon

Allows you to replace the default error icon image with a custom one.

ErrorIconClicked / ErrorIconCommand

Allow you to perform an action when a user taps the error icon.

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.

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.

Editor Appearance

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

Editor State

BoxMode = Outlined (default)

BoxMode = Filled

Inactive

NumericEdit Outlined - Inactive

NumericEdit Filled - Inactive

Focused

NumericEdit Outlined - Focused

NumericEdit Filled - Focused

Activated

NumericEdit Outlined - Activated

NumericEdit Filled - Activated

Error

NumericEdit Outlined - Error

NumericEdit Filled - Error

Disabled

NumericEdit Outlined - Disabled

NumericEdit Filled - 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.

Implements

Xamarin.Forms.IAnimatable
Xamarin.Forms.ITabStopElement
Xamarin.Forms.IViewController
Xamarin.Forms.IVisualElementController
Xamarin.Forms.Internals.IGestureController
Xamarin.Forms.IGestureRecognizers
Xamarin.Forms.IElementController

Inheritance

Object
Xamarin.Forms.BindableObject
Xamarin.Forms.Element
Xamarin.Forms.NavigableElement
Xamarin.Forms.VisualElement
View
EditBase
NumericEdit
See Also