TextEdit Class

A text editor.

Assembly: DevExpress.WinUI.Editors.v23.2.dll

Declaration

C#
VB.NET

[ToolboxTabName("DX.23.2: Common Controls")]
public class TextEdit :
    BaseEdit,
    ITextEdit

<ToolboxTabName("DX.23.2: Common Controls")>
Public Class TextEdit
    Inherits BaseEdit
    Implements ITextEdit

Remarks

The DevExpress WinUI TextEdit is a field that allows you to enter and edit text.

TextEdit Control

Add a TextEdit to a Project

Follow the steps below to add a TextEdit control to an application:

Reference the DevExpress.WinUI NuGet package. Refer to the Get Started topic for more information.
Add the following markup to a XAML page: <dxe:TextEdit>…</dxe:TextEdit>.
Configure the component (see the sections below).

Edit Value

Use the EditValue property to set or data-bind the edit value.

If a user changes the edit value, the EditValue property accepts the change only if Input Validation is successful. If validation fails, the control keeps its previous value and prompts the user to enter a different value.

XAML

<Window ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <StackPanel Orientation="Horizontal">
        <dxe:TextEdit Name="textEdit" EditValue="Some text"/>
        <dxe:TextEdit Name="boundtextEdit" EditValue="{x:Bind TextValue}"/>
    </StackPanel>
</Window>

public sealed partial class MainWindow : Page {
    public string TextValue { get; set; } = "Some bound text"; 

    public MainWindow() {
        this.InitializeComponent(); }
}

You can handle the BaseEdit.EditValueChanged event to respond to changes made in the editor.

Mouse Wheel Spin

If the TextEdit displays Numeric or DateTime data, users can scroll the mouse wheel to increment/decrement values. To enable this behavior, set the AllowSpinOnMouseWheel property to true.

Display Value

The text displayed in the editor depends on the EditValue and EditValueType properties. You can also use the DisplayFormatString property to apply a custom format (for example, currency display).

XAML

<Window ...
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <dxe:TextEdit DisplayFormatString="c">
            <dxe:TextEdit.EditValue>
                <x:Double>1232</x:Double>
            </dxe:TextEdit.EditValue>
        </dxe:TextEdit>
    </Grid>
</Window>

DevExpress Editors | TextEdie - Display Value

You can handle the CustomDisplayText event to convert values to text based on custom logic.

The DisplayText property returns the string displayed in the editor.

Masked Input

A TextEdit supports masked input. Refer to the following help topic for more information: Masked Input.

Input Validation

Refer to the following documentation topic for more information: Input Validation

The following code sample hadles the Validate event to check whether the TextEdit EditValue ends with @hotmail.com:

XAML

<dxe:TextEdit Name="textEdit" Text="sample_email@gmail.com" Validate="textEdit_Validate"/>

void TextEdit_Validate(object sender, DevExpress.WinUI.Editors.ValidationEventArgs e) {
    string value = (string)e.Value;
    if (string.IsNullOrEmpty(value) {
        e.IsValid = false;
        e.Handled = true;
        e.ErrorContent = "The value is empty!";
        e.ErrorType = DevExpress.WinUI.Editors.ErrorType.Critical;
    }
    else if (!value.EndsWith("@hotmail.com")) {
        e.IsValid = false;
        e.Handled = true;
        e.ErrorContent = "The value is not valid!";
        e.ErrorType = DevExpress.WinUI.Editors.ErrorType.Warning;
    }
}

Read-Only Mode

Set the BaseEdit.IsReadOnly property to true to make the TextEdit read-only.

Multi-Line Input

You can use any of the following properties to specify whether a TextEdit displays text on multiple lines:

Set the AcceptsReturn property to true to let a TextEdit display the newline or return characters.
Set the TextWrapping property to Wrap to enable text wrapping.

TextEdit Header

You can use the Header property to add a Header to a TextEdit. Use the HeaderTemplate property to customize the header appearance.

Touch Keyboard

Users can utilize the on-screen touch keyboard to interact with the editor. You can set the following properties to enhance user experience:

Property	Description
InputScope	Matches the kind of data the user is expected to enter.
IsTextPredictionEnabled	Gets or sets whether the text prediction feature (“autocomplete”) is enabled.
IsSpellCheckEnabled	Gets or sets whether the TextEdit input interacts with a spell check engine.

Null Text

The following properties specify NullText behavior and appearance:

Property	Description
NullText	Gets or sets the text displayed within the edit box when the editor’s value is null. This is a dependency property.
NullValue	Gets or sets a null value for the editor. This is a dependency property.
AllowNullInput	Gets or sets whether end-users can set the editor’s value to a null reference. This is a dependency property.
ShowNullText	Gets or sets whether to display the null text. This is a dependency property.
ShowNullTextForEmptyValue	Gets or sets whether to display the null text for the Empty value. This is a dependency property.

XAML

<dxe:TextEdit NullText="Last Name" NullTextForeground="#ACACAC" ShowNullText="True" AllowNullInput="False"/>

Customize Appearance

You can use the following properties to customize a TextEdit appearance:

DevExpress Editors | TextEdit - Unfocused State

XAML

<dxe:TextEdit NullText="Input a Name" Text="William" Foreground="#FF505050" Background="#FFE9EBEC"
              CornerRadius="14" BorderBrush="#FF0D3A50" BorderThickness="2" Width="150" SelectionHighlightBrush="#FF0D3A50" />