Skip to main content

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.Maui.Editors

Assembly: DevExpress.Maui.Editors.dll

NuGet Package: DevExpress.Maui.Editors

Declaration

public class NumericEdit :
    EditBase,
    INumericEditController,
    IEditController,
    IDXViewController,
    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    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.

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. This is a bindable property.

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

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 number of digits after the decimal separator, use the MaxDecimalDigitCount property.

<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 an editor to accept a null value and display an empty edit box, 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:

DevExpress MAUI - numeric-edit-help-and-error

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.

NumericEdit - Icons

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. This is a bindable property.

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). This is a bindable property.

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. This is a bindable property.

Clear Icon

ClearIcon

Gets or sets the clear icon image. This is a bindable property.

ClearIconClicked / ClearIconCommand

Allow you to assign a custom action to the clear icon.

ClearIconColor

Gets or sets the color of the clear icon. This is a bindable property.

ClearIconVisibility

Gets or sets whether the clear icon is displayed. This is a bindable property.

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. This is a bindable property.

IsErrorIconVisible

Gets or sets whether the error icon is visible. This is a bindable property.

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). This is a bindable property.

IconSpacing

Gets or sets the distance between icons. This is a bindable property.

IconVerticalAlignment

Gets or sets the vertical alignment of icons. This is a bindable property.

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.

DevExpress MAUI NumericEdit - Prefix Suffix

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. This is a bindable property.

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

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.

Examples

See Also