ContextQMD
Back to Devexpress

Create a Custom Toolbar

maui-404639-html-edit-toolbar.md

latest5.6 KB
Original Source

Create a Custom Toolbar

  • Jul 30, 2024
  • 3 minutes to read

The HTML Edit control includes the built-in adaptive DXToolbar that you can use to change content at runtime. You can also create a custom DXToolbar with a set of items that meet your requirements. This topic describes how to display a custom toolbar and bind it to HTML Edit commands.

Review our demo app on GitHub to get more information on how to replicate the built-in DXToolbar:

View Example: DevExpress .NET MAUI HTML Edit - Replicate a Built-In Toolbar

Define a Custom Toolbar in XAML

Follow the steps below to create a custom HTML Edit toolbar:

  1. Set the HtmlEdit.ShowToolbar property to false to hide the built-in DXToolbar.

  2. Wrap the HTML Edit and a custom DXToolbar within a container (Grid, StackLayout, or another) and place it inside a SafeKeyboardAreaView:

  3. Bind a toolbar item to a required HtmlEdit command:

Available Toolbar Commands

The HTML Edit control includes the HtmlEditCommands class that stores commands. You can bind these commands to a custom toolbar item or perform operations with HTML Edit from code-behind.

Undo/Redo

CommandDescription
UndoGets the command that cancels changes resulting from the last operation.
RedoGets the command that reapplies the last action that was undone in the HtmlEdit control.

Text Colors

CommandDescription
SetBackgroundColorGets the command that sets the background color of the selected/typed text text.
SetForegroundColorGets the command that sets the foreground color of the selected/typed text text.

Headings

CommandDescription
SetHeadingLevelGets the command that sets the selected/under caret text’s heading level to the specified value.

Text Decorations and Font Settings

CommandDescription
ToggleBoldGets the command that toggles the selected/typed text text’s bold emphasis.
ToggleItalicGets the command that toggles the selected/typed text text’s italic emphasis.
ToggleStrikethroughGets the command that toggles the selected/typed text text’s strikethrough emphasis.
ToggleUnderlineGets the command that toggles the selected/typed text text’s underline emphasis.

Line Height and Alignment

CommandDescription
ToggleCenterAlignmentGets the command that toggles the selected/under caret text’s alignment to center.
ToggleLeftAlignmentGets the command that toggles the selected/under caret text’s alignment to left.
ToggleRightAlignmentGets the command that toggles the selected/under caret text’s alignment to right.
ToggleJustifyAlignmentGets the command that toggles the selected/under caret text’s alignment to fit it along the left and right margins.
SetLineHeightGets the command that sets the selected/under caret text line height value.

Indents and Lists

CommandDescription
DecreaseIndentGets the command that toggles the selected/under caret text’s between ordered list and regular text.
IncreaseIndentGets the command that toggles the selected/under caret text’s between bullet list and regular text.
ToggleBulletListGets the command that increases indent of the selected/under caret text.
ToggleOrderedListGets the command that decreases indent of the selected/under caret text.

Next Steps

Load and Retrieve ContentThis topic describes how to load content to a HTML Edit from different sources (file, stream, and uri) and retrieve the displayed content.Select ContentThis topic describes how to select the displayed content.Modify ContentThis topic describes how to customize the displayed content.