maui-404570-editors-icons.md
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.
You can specify and configure the following icons for any editor type:
StartA leading icon on the left side of the editor. You can use this icon as a custom button.EndA 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.
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:
StartIconGets or sets the Start icon image. If the StartIcon property is set, the custom Start icon appears on the left side of the editor.IsStartIconVisibleGets or sets whether the Start icon is visible.StartIconColorGets or sets the Start icon color. The editor gets default colors for its icons from the applied theme.StartIconClicked | StartIconCommandAllow 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.
EndIconGets or sets the End icon image. If the EndIcon property is set, the custom End icon appears on the right side of the editor.IsEndIconVisibleGets or sets whether the End icon is visible.EndIconColorGets or sets the End icon color. The editor gets default colors for its icons from the applied theme.EndIconClicked | EndIconCommandAllow 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.
ClearIconGets 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:
AutoDisplays an icon only if the edit box is not empty.AlwaysAlways displays an icon (disabled when the editor is empty).NeverNever displays an icon.ClearIconColorGets or sets the Clear icon color. The editor gets default colors for its icons from the applied theme.ClearIconClickedAllows 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 | ClearIconCommandParameterAllow 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.
ErrorIconAllows 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).IsErrorIconVisibleGets or sets whether the Error icon is visible.ErrorIconColorGets 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 | ErrorIconCommandAllow 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.
You can use the following properties, to configure all icons of an editor:
IconColor | DisabledIconColorSpecify 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.IconIndentGets or sets a distance between an icon and input text (or prefix/suffix, if any).IconSpacingGets or sets a distance between editor icons.IconVerticalAlignmentGets or sets vertical alignment of icons.
Many editor types allow you to configure type-specific icons.
The text and multiline editors can display all common icons within its box.
Clear IconRemoves text entered in the editor.Start | End icons
Custom icons that can be shown on the left or right within the box.
Appears in the error state.
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 | HidePasswordIconAllow 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:
AlwaysAlways displays an icon (default value).AutoDisplays an icon only if the edit box is not empty.NeverNever displays an icon.PasswordIconColorGets or sets the color of Show Password and Hide Password icons. The editor gets default colors for its icons from the applied theme.
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:
IsUpDownIconVisibleGets or sets whether to display Up and Down icons.UpIcon | DownIconAllow you to replace default increment and decrement icons with custom icons.DownIconColor | UpIconColorAllow you to specify custom colors for increment and decrement icons. The editor gets default colors for its icons from the applied theme.UpDownIconAlignmentGets or sets the alignment of Up and Down icons.AllowLoopingGets 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 | DownIconCommandAllow you to assign custom actions to Up and Down 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:
DateIconAllows you to replace the default Date icon image with a custom icon.IsDateIconVisibleGets or sets whether the Date icon is visible.DateIconColorGets or sets the Date icon color. The editor gets default colors for its icons from the applied theme.DateIconClicked | DateIconCommandAllow 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.
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:
TimeIconAllows you to replace the default Time icon image with a custom icon.IsTimeIconVisibleGets or sets whether the Time icon is visible.TimeIconColorGets or sets the Time icon color. The editor gets colors for its icons from the applied theme.TimeIconClicked | TimeIconCommandAllow 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.
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:
DropDownIconGets or sets the custom Drop-Down icon image.IsDropDownIconVisibleGets or sets whether the Drop-Down icon is visible.DropDownIconColorGets or sets the color of the Drop-Down icon. The editor gets colors for its icons from the applied theme.
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:
SubmitIconGets or sets the custom Submit icon image.SubmitIconVisibilityGets or sets whether the Submit icon is visible.SubmitIconColorGets or sets the color of the Submit icon. The editor gets colors for its icons from the applied theme.Submitted | SubmitCommandAllow 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.
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:
IconMemberGets or sets the data source member that contains Token icons.IsTokenIconVisibleGets or sets whether to show Token icons.TokenIconSizeGets or sets Token icons size.TokenAppearanceGets or sets appearance settings that are applied to current tokens.