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:

   XAML

   <dx:SafeKeyboardAreaView>
        <Grid RowDefinitions="*, Auto">
            <dxhtml:HtmlEdit x:Name="htmledit" ShowToolbar="false"/>
            <dxc:DXToolbar Grid.Row="1">
                <!-- ... -->
            </dxc:DXToolbar>
        </Grid>
    </dx:SafeKeyboardAreaView>
   

   The SafeKeyboardAreaView container shrinks the HTML Edit control when you open the device keyboard. This adjustment avoids content overlap (keeps the toolbar visible). After the keyboard is hidden (for example, when the HTML Edit control is no longer focused), the HTML Edit control once again occupies all available height.

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

   XAML

    <dx:SafeKeyboardAreaView>
        <Grid RowDefinitions="*, Auto">
            <dxhtml:HtmlEdit x:Name="htmledit" ShowToolbar="false"/>
            <dxc:DXToolbar Grid.Row="1">
                <dxc:ToolbarToggleButton Command="{Binding Commands.ToggleBold, Source={x:Reference htmledit}}" 
                                         Content="Bold" IsChecked="{Binding SelectedTextFontAttributes, Source={x:Reference htmledit}, 
                                         Converter={local:EnumToBoolConverter}, ConverterParameter=Bold}}"/>
            </dxc:DXToolbar>
        </Grid>
    </dxhtml:SafeKeyboardAreaView>
   

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

Command	Description
Undo	Gets the command that cancels changes resulting from the last operation.
Redo	Gets the command that reapplies the last action that was undone in the HtmlEdit control.

Text Colors

Command	Description
SetBackgroundColor	Gets the command that sets the background color of the selected/typed text text.
SetForegroundColor	Gets the command that sets the foreground color of the selected/typed text text.

Headings

Command	Description
SetHeadingLevel	Gets the command that sets the selected/under caret text’s heading level to the specified value.

Text Decorations and Font Settings

Command	Description
ToggleBold	Gets the command that toggles the selected/typed text text’s bold emphasis.
ToggleItalic	Gets the command that toggles the selected/typed text text’s italic emphasis.
ToggleStrikethrough	Gets the command that toggles the selected/typed text text’s strikethrough emphasis.
ToggleUnderline	Gets the command that toggles the selected/typed text text’s underline emphasis.

Line Height and Alignment

Command	Description
ToggleCenterAlignment	Gets the command that toggles the selected/under caret text’s alignment to center.
ToggleLeftAlignment	Gets the command that toggles the selected/under caret text’s alignment to left.
ToggleRightAlignment	Gets the command that toggles the selected/under caret text’s alignment to right.
ToggleJustifyAlignment	Gets the command that toggles the selected/under caret text’s alignment to fit it along the left and right margins.
SetLineHeight	Gets the command that sets the selected/under caret text line height value.

Indents and Lists

Command	Description
DecreaseIndent	Gets the command that toggles the selected/under caret text’s between ordered list and regular text.
IncreaseIndent	Gets the command that toggles the selected/under caret text’s between bullet list and regular text.
ToggleBulletList	Gets the command that increases indent of the selected/under caret text.
ToggleOrderedList	Gets the command that decreases indent of the selected/under caret text.

Next Steps

Load and Retrieve Content

This topic describes how to load content to a HTML Edit from different sources (file, stream, and uri) and retrieve the displayed content.

Select Content

This topic describes how to select the displayed content.

Modify Content

This topic describes how to customize the displayed content.