TextEdit Class

A single-line text editor.

Namespace : DevExpress.XamarinForms.Editors

Assembly : DevExpress.XamarinForms.Editors.dll

NuGet Package : DevExpress.XamarinForms.Editors

Declaration

csharp

public class TextEdit :
    TextEditBase

Remarks

TextEdit is an editor that displays one line of text.

The text editor initially displays the input box and the default clear icon.

You can also add the following optional elements:

Prefix 2. Label 3. Placeholder 4. Custom Icon 5. Character Counter 6. Help Text 7. Error Message

Input Text

Use the Text property to obtain or set the text entered in the editor.

To manage the cursor position and text selection, use the CursorPosition and SelectionStart/SelectionLength properties.

The Keyboard property specifies the type of the keyboard used to edit text in the editor. The ReturnType property allows you to change the appearance of the return button on the keyboard. When a user taps this button, the Completed event occurs.

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

Property

Description

| | --- | --- | |

TextColor / DisabledTextColor

Specify the text color for different states 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.

Masked Input

TextEdit supports input masks. A mask defines a pattern for the entered string. It can be useful when a text editor should accept a fixed-length string in a pre-defined format (for example, a phone number, zip code, etc).

Use the Mask property to specify the mask expression. It can include meta and literal characters.

A metacharacter is a user input placeholder (identified by the underscore character - _). Use the MaskPlaceholderChar and PlaceholderColor properties to change the character and its color. The following table lists the available metacharacters:
A literal character is a fixed part of the mask that cannot be edited by users. To display a metacharacter as a literal, precede it with a backslash (\).
XAML

xaml

<dxe:TextEdit Mask="+1 (000) 000-0000" 
              MaskPlaceholderChar="#">
</dxe:TextEdit>

Prefix and Suffix

The Prefix and Suffix properties allow you to specify the text prefix and suffix that are shown before and after the text 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 text editor.

| |

AffixFontSize
AffixFontFamily
AffixFontAttributes

Configure the font settings.

| |

AffixIndent

Gets or sets the distance between the affix and input text.

Label

A label is the editor’s input prompt string (LabelText). Editors display this string inside the edit box (when the editor is empty and not focused) or at the top of the editor.

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

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

Property

Description

| | --- | --- | |

LabelColor / FocusedLabelColor
DisabledLabelColor / ErrorColor

Specify the label color for each state of the text editor.

| |

LabelFontSize
TextFontFamily
TextFontAttributes

Configure the label font settings.

Placeholder

A placeholder (PlaceholderText) is the input prompt string displayed within the text box when the editor is empty.

To specify the placeholder text color, use the PlaceholderColor property. This color is also used to paint mask placeholders.

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.

Autofill

Use the editor’s AutofillContentType property to specify how an autofill service can populate this editor with user data. Note that the device should have an enabled autofill service that contains the required values (names, dates, passwords, and so on).

See the AutofillContentType enumeration for a list of available hints and their equivalents on the Android and iOS platforms. Note that some hints are only available on Android or iOS.

Icons

The text editor can display icons within its box.

Clear icon - removes text entered 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

| | --- | --- | --- | |

Clear Icon

ClearIconVisibility

Specifies when the clear icon is displayed.

| |

ClearIcon

Specifies the clear icon image.

| |

ClearIconClicked / ClearIconCommand

Allow you to assign an additional action to the clear icon.

| |

Error Icon

ErrorIcon

Specifies the error icon image.

| |

ErrorIconClicked / ErrorIconCommand

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

| |

ErrorIconColor

Gets or sets the color of an icon displayed when HasError is set to true.

| |

Custom Icons

StartIcon / EndIcon

Specify a custom icon.

| |

StartIconClicked / StartIconCommand
EndIconClicked / EndIconCommand

Allow you to perform an action when a user clicks a custom icon.

| |

StartIconColor / EndIconColor

Specify icon colors.

| |

IsStartIconVisible / IsEndIconVisible

Specify whether an icon is visible.

| |

Common

IconColor / DisabledIconColor

Specify icon colors for different states of the text 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.

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.

Example

The following XAML assigns handlers to the Tap, DoubleTap, and LongPress events:

XAML
C#

xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxe="http://schemas.devexpress.com/xamarin/2014/forms/editors"
             x:Class="App1.MainPage">
    <StackLayout>
        <dxe:TextEdit Tap="TextEdit_Tap"
                      DoubleTap="TextEdit_DoubleTap"
                      LongPress="TextEdit_LongPress"/>
    </StackLayout>
</ContentPage>

private void TextEdit_Tap(object sender, HandledEventArgs e) {
    (sender as TextEdit).Text = "You tapped me!";
}

private void TextEdit_DoubleTap(object sender, HandledEventArgs e) {
    (sender as TextEdit).Text = "You double tapped me!";
}

private void TextEdit_LongPress(object sender, HandledEventArgs e) {
    (sender as TextEdit).Text = "You pressed me!";
}