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,
IElementControllerRemarks
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.
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 |
|---|---|
Specify the text color for each state of the editor. | |
Configure the font settings. | |
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"/>
Numeric
<dxe:NumericEdit Value="1234.567" DisplayFormat="n1"/>
Percent
<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.
<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 | Specify the label’s color for each state of the editor. |
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 |
|---|---|
Specify the help text color for different states of an editor. | |
Specifies the error message text color. | |
BottomTextFontSize | 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 | Specify the increment and decrement icon images. | |
Gets or sets the alignment of the up and down icons that increase and decrease the editor’s value. This is a bindable property. | ||
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 | Allow you to assign custom actions to the increment and decrement icons. | |
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 | Gets or sets the clear icon image. This is a bindable property. | |
Allow you to assign a custom action to the clear icon. | ||
Gets or sets the color of the clear icon. This is a bindable property. | ||
Gets or sets whether the clear icon is displayed. This is a bindable property. | ||
Error Icon | Allows you to replace the default error icon image with a custom image. | |
Allow you to perform an action when a user taps the error icon. | ||
Gets or sets the color of an icon displayed when HasError is set to | ||
Gets or sets whether the error icon is visible. This is a bindable property. | ||
Custom Icons | Specify custom icons displayed on the left and right within the editor. | |
StartIconClicked / StartIconCommand | Allow you to set actions that occur when a user taps custom icons. | |
Specify icon colors. | ||
Specify whether custom icons are visible. | ||
Common | Specify icon color for each state of the editor. | |
Gets or sets the distance between an icon and input text (affix). This is a bindable property. | ||
Gets or sets the distance between icons. This is a bindable property. | ||
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.
Use the following properties to adjust the prefix and suffix settings:
Property | Description |
|---|---|
Specify the prefix and suffix color for different states of the editor. | |
Configure the font settings. | |
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 |
|
|
Focused |
|
|
Activated |
|
|
Error |
|
|
Disabled |
|
|
Use the following properties to change the appearance of the edit box and its borders:
Property | Description |
|---|---|
Specify the border color for each state of the editor. | |
Specifies the color of the edit box borders, label, and error icon and error message if there is an input error. | |
BorderThickness | Specify the border thickness for each state of the editor. |
Specifies whether edit box corners are rounded or cut. | |
Specifies the radius of the edit box corners. | |
BackgroundColor | Specifies the edit box fill color. |
Specifies the amount of space between edit box borders and content. |
Examples
- Set Up a Numeric Editor – Configures a
numeric editorand demonstrates its main settings.