Icons in DevExpress Data Editors for .NET MAUI

• Oct 02, 2023
• 9 minutes to read

Editor icons can serve multiple purposes: provide a visual cue about editor content, execute predefined or custom actions, and notify about validation errors. You can display common icons that work in any editor type, as well as editor-specific icons.

Common Icons

You can specify and configure the following icons for any editor type:

Start

A leading icon on the left side of the editor. You can use this icon as a custom button.

End

A trailing icon on the right side of the editor. You can use this icon as a custom button.

Clear

An icon that appears on the right side of the editor when a user enters text. This icon removes the editor value.

Error

An icon that appears in the edit box when the editor is in the error state (HasError is true).

Use the following API to add and configure Start, End, Clear, and Error icons:

Start Icon

StartIcon

Gets or sets the Start icon image. If the StartIcon property is set, the custom Start icon appears on the left side of the editor.

IsStartIconVisible

Gets or sets whether the Start icon is visible.

StartIconColor

Gets or sets the Start icon color. The editor gets default colors for its icons from the applied theme.

StartIconClicked | StartIconCommand

Allow you to perform an action when a user clicks the Start icon. Handle the StartIconClicked event to set an action that occurs when a user taps the start icon. You can also use the StartIconCommand property.

End Icon

EndIcon

Gets or sets the End icon image. If the EndIcon property is set, the custom End icon appears on the right side of the editor.

IsEndIconVisible

Gets or sets whether the End icon is visible.

EndIconColor

Gets or sets the End icon color. The editor gets default colors for its icons from the applied theme.

EndIconClicked | EndIconCommand

Allow you to perform an action when a user clicks the End icon. Handle the EndIconClicked event to set an action that occurs when a user taps the End icon, or use the EndIconCommand property.

Clear Icon

ClearIcon

Gets or sets the custom Clear icon image. The Clear icon appears on the right side of the edit box when a user enters text.

ClearIconVisibility

Gets or sets whether the Clear icon is displayed. You can assign the following values to the ClearIconVisibility property to change the visibility of the Clear icon:

Auto

Displays an icon only if the edit box is not empty.

Always

Always displays an icon (disabled when the editor is empty).

Never

Never displays an icon.

ClearIconColor

Gets or sets the Clear icon color. The editor gets default colors for its icons from the applied theme.

ClearIconClicked

Allows you to assign a custom action to the Clear icon. Handle the ClearIconClicked event to set an action that occurs when a user taps the Clear icon.

ClearIconCommand | ClearIconCommandParameter

Allow you to assign an action to the Clear icon. Use the ClearIconCommand property to set the action that occurs when a user taps the Clear icon, and the ClearIconCommandParameter property to pass data to ClearIconCommand.

Error Icon

ErrorIcon

Allows you to replace the default Error icon image with a custom one. The Error icon appears in the edit box when the editor is in an error state (if HasError is set to true).

IsErrorIconVisible

Gets or sets whether the Error icon is visible.

ErrorIconColor

Gets or sets the Error icon color. The editor gets colors for its icons from the applied theme. Use the ErrorIconColor property to apply a custom color to the Error icon. If this property is not specified, the Error icon is colored according to the ErrorColor property.

ErrorIconClicked | ErrorIconCommand

Allow you to perform an action when a user clicks the Error icon. Handle the ErrorIconClicked event to set an action that occurs when a user taps the Error icon, or use the ErrorIconCommand property.

Common Settings

You can use the following properties, to configure all icons of an editor:

IconColor | DisabledIconColor

Specify the custom color for editor icons. The editor gets default colors for its icons from the applied theme. Use the IconColor property to apply a color to editor icons. If you want to apply a custom color to icons of the editor in the disabled state, use the DisabledIconColor property.

IconIndent

Gets or sets a distance between an icon and input text (or prefix/suffix, if any).

IconSpacing

Gets or sets a distance between editor icons.

IconVerticalAlignment

Gets or sets vertical alignment of icons.

Editor-Specific Icons

Many editor types allow you to configure type-specific icons.

Text and Multiline Editor Icons

The text and multiline editors can display all common icons within its box.

Clear Icon

Removes text entered in the editor.

Start | End icons

Custom icons that can be shown on the left or right within the box.

Error Icon

Appears in the error state.

Password Editor Icons

The password editor can display all common icons within its box. You can also configure default Show and Hide icons that allow a user to toggle visibility of characters entered in the editor.

Use the following API to configure Show and Hide icons of the password editor:

ShowPasswordIcon | HidePasswordIcon

Allow you to replace default password icons with custom icons.

PasswordIconVisibility

Gets or sets when Show and Hide icons are visible. You can assign the following values to the PasswordIconVisibility property to change visibility of password icons:

Always

Always displays an icon (default value).

Auto

Displays an icon only if the edit box is not empty.

Never

Never displays an icon.

PasswordIconColor

Gets or sets the color of Show Password and Hide Password icons. The editor gets default colors for its icons from the applied theme.

Numeric Editor Icons

The numeric editor can display all common icons within its box. You can also configure default Up and Down icons that allow a user to increase/decrease a value by StepValue.

Use the following API to configure Up and Down icons of the numeric editor:

IsUpDownIconVisible

Gets or sets whether to display Up and Down icons.

UpIcon | DownIcon

Allow you to replace default increment and decrement icons with custom icons.

DownIconColor | UpIconColor

Allow you to specify custom colors for increment and decrement icons. The editor gets default colors for its icons from the applied theme.

UpDownIconAlignment

Gets or sets the alignment of Up and Down icons.

AllowLooping

Gets or sets whether the current value is set to the minimum value when a user has exceeded the maximum value (and vice versa).

UpIconClicked | UpIconCommand | DownIconClicked | DownIconCommand

Allow you to assign custom actions to Up and Down icons.

Date Editor Icons

The date editor can display all common icons within its box. You can also configure the default Date icon that indicates the editor type.

Use the following API to configure the Date icon of the date editor:

DateIcon

Allows you to replace the default Date icon image with a custom icon.

IsDateIconVisible

Gets or sets whether the Date icon is visible.

DateIconColor

Gets or sets the Date icon color. The editor gets default colors for its icons from the applied theme.

DateIconClicked | DateIconCommand

Allow you to perform an action when a user taps the Date icon. Handle the DateIconClicked event to set an action that occurs when a user taps the Date icon, or use the DateIconCommand property.

Time Editor Icons

The time editor can display all common icons within its box. You can also configure the default Time icon that indicates the editor type.

Use the following API to configure the Time icon of the time editor:

TimeIcon

Allows you to replace the default Time icon image with a custom icon.

IsTimeIconVisible

Gets or sets whether the Time icon is visible.

TimeIconColor

Gets or sets the Time icon color. The editor gets colors for its icons from the applied theme.

TimeIconClicked | TimeIconCommand

Allow you to perform an action when a user taps the Time icon. Handle the DateIconClicked event to set an action that occurs when a user taps the Time icon, or use the DateIconCommand property.

Combo Box Editor Icons

The combo box editor can display all common icons within its box. You can also configure the default Drop-Down icon that allows a user to toggle the visibility of the drop-down list.

Use the following API to configure the Drop-Down icon of the combo box editor:

DropDownIcon

Gets or sets the custom Drop-Down icon image.

IsDropDownIconVisible

Gets or sets whether the Drop-Down icon is visible.

DropDownIconColor

Gets or sets the color of the Drop-Down icon. The editor gets colors for its icons from the applied theme.

Auto Complete Editor Icons

The auto complete editor can display all common icons within its box. You can also configure the default Submit icon that allows a user to submit a query.

Use the following API to configure the Submit icon of the auto complete editor:

SubmitIcon

Gets or sets the custom Submit icon image.

SubmitIconVisibility

Gets or sets whether the Submit icon is visible.

SubmitIconColor

Gets or sets the color of the Submit icon. The editor gets colors for its icons from the applied theme.

Submitted | SubmitCommand

Allow you to perform an action when a user taps the Submit icon. Handle the Submitted event to set an action that occurs when a user taps the Submit icon, or use the SubmitCommand property.

Token and Autocomplete Token Editors Icons

The token editor can display all combo box editor icons within its box. The autocomplete token editor can display only common icons. You can also configure Token icons for both editors.

Use the following API to configure Token icons of the token editor:

IconMember

Gets or sets the data source member that contains Token icons.

IsTokenIconVisible

Gets or sets whether to show Token icons.

TokenIconSize

Gets or sets Token icons size.

TokenAppearance

Gets or sets appearance settings that are applied to current tokens.

View Example