mobilecontrols-devexpress-dot-xamarinforms-dot-editors-9bcddc93.md
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
public class NumericEdit :
EditBase,
INumericEditController,
IEditController,
IElementController
NumericEdit initially displays an input box where a user can type a number:
You can also add the following optional elements:
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
| | --- | --- | |
|
Specify the text color for each state of the editor.
| |
TextFontSize
TextFontFamily
TextFontAttributes
|
Configure the font settings.
| |
|
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.
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
Numeric
Percent
To specify the maximum number of digits after the decimal separator, use the MaxDecimalDigitCount property.
<dxe:NumericEdit Value="12.3456" MaxDecimalDigitCount="2"/>
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.
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:
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.
|
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.
| |
|
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.
The numeric editor can display icons within its 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.
| |
|
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.
| |
|
Gets or sets whether to display the up and down icons that allow users to increase and decrease the current editor value.
| |
Clear Icon
|
|
Specifies the clear icon image.
| |
ClearIconClicked / ClearIconCommand
|
Allow you to assign a custom action to the clear icon.
| |
|
Gets or sets the color of the clear icon.
| |
|
Specifies when the clear icon is displayed.
| |
Error Icon
|
|
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.
| |
|
Gets or sets the color of an icon displayed when HasError is set to true.
| |
|
Gets or sets whether the error icon is visible.
| |
Custom Icons
|
|
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.
| |
|
Specify icon colors.
| |
IsStartIconVisible / IsEndIconVisible
|
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).
| |
|
Gets or sets the distance between icons.
| |
|
Gets or sets the vertical alignment of icons.
|
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.
| |
|
Gets or sets the distance between the affix and input value.
|
Editors raise the following events on user interaction:
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.
| |
|
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.
| |
|
Specifies whether edit box corners are rounded or cut.
| |
|
Specifies the radius of the edit box corners.
| |
BackgroundColor
DisabledBackgroundColor
|
Specifies the edit box fill color.
| |
|
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.
Xamarin.Forms.IElementController
See Also