New to Telerik UI for .NET MAUI? Start a free 30-day trial

RichTextEditor Toolbar Styling

The .NET MAUI RichTextEditor provides a flexible styling API for its toolbar items.

Style the Toolbar Items

The RichTextEditorToolbar is based on the RadToolbar control, so the toolbar items in the RichTextEditor use a ToolbarItem.

Each toolbar item has a Style property and the target type of the property is the corresponding ToolbarItemView:

Toolbar Item Style Target Type
RichTextEditorFontFamilyToolbarItem RichTextEditorListPickerToolbarItemView
RichTextEditorFontSizeToolbarItem RichTextEditorListPickerToolbarItemView
SeparatorToolbarItem ToolbarItem
RichTextEditorBoldToolbarItem ToggleButtonToolbarItemView
RichTextEditorItalicToolbarItem ToggleButtonToolbarItemView
RichTextEditorUnderlineToolbarItem ToggleButtonToolbarItemView
RichTextEditorAlignLeftToolbarItem RadioButtonToolbarItemView
RichTextEditorAlignCenterToolbarItem RadioButtonToolbarItemView
RichTextEditorAlignRightToolbarItem RadioButtonToolbarItemView
RichTextEditorAlignJustifyToolbarItem RadioButtonToolbarItemView
RichTextEditorTextColorToolbarItem RichTextEditorColorPickerToolbarItemView
RichTextEditorHighlightTextColorToolbarItem RichTextEditorColorPickerToolbarItemView
RichTextEditorBulletingToolbarItem ToggleButtonToolbarItemView
RichTextEditorNumberingToolbarItem ToggleButtonToolbarItemView
RichTextEditorOutdentToolbarItem ButtonToolbarItemView
RichTextEditorIndentToolbarItem ButtonToolbarItemView
RichTextEditorTextFormattingToolbarItem RichTextEditorListPickerToolbarItemView
RichTextEditorClearFormattingToolbarItem ButtonToolbarItemView
RichTextEditorStrikethroughToolbarItem ToggleButtonToolbarItemView
RichTextEditorSuperscriptToolbarItem ToggleButtonToolbarItemView
RichTextEditorSubscriptToolbarItem ToggleButtonToolbarItemView
RichTextEditorUndoToolbarItem ButtonToolbarItemView
RichTextEditorRedoToolbarItem ButtonToolbarItemView
RichTextEditorColorPickerToolbarItem RichTextEditorColorPickerToolbarItemView
RichTextEditorCopyToolbarItem ButtonToolbarItemView
RichTextEditorCutToolbarItem ButtonToolbarItemView
RichTextEditorPasteHtmlToolbarItem ButtonToolbarItemView
RichTextEditorAddOrEditHyperlinkToolbarItem ButtonToolbarItemView
RichTextEditorAddHyperlinkToolbarItem ButtonToolbarItemView
RichTextEditorRemoveHyperlinkToolbarItem ButtonToolbarItemView
RichTextEditorAddOrEditImageToolbarItem ButtonToolbarItemView
RichTextEditorHyperlinkNavigationToolbarItem ButtonToolbarItemView
RichTextEditorImageNavigationToolbarItem ButtonToolbarItemView

All styling properties available for the target type ButtonToolbarItemView, ToggleButtonToolbarItemView, RadioButtonToolbarItemView are also applicable for the RichTextEditor toolbar items that use this target type.

Example for Styling the Toolbar

1. RichTextEditor and Toolbar definitions in XAML:

<Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
    <telerik:RadRichTextEditorToolbar x:Name="richTextToolbar"
                                      Grid.Row="{OnIdiom Desktop=0, Phone=1}"
                                      ZIndex="10"
                                      RichTextEditor="{x:Reference richTextEditor}"
                                      AutoGenerateItems="False"
                                      Style="{StaticResource RichTextEditorToolbarStyle}">
        <telerik:RichTextEditorFontFamilyToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}" />
        <telerik:RichTextEditorFontSizeToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}" />
        <telerik:RichTextEditorTextColorToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}" />
        <telerik:RichTextEditorHighlightTextColorToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}" />
        <telerik:GroupToolbarItem Style="{StaticResource GroupToolbarItemViewStyle}">
            <telerik:RichTextEditorIndentToolbarItem/>
            <telerik:RichTextEditorOutdentToolbarItem/>
        </telerik:GroupToolbarItem>
        <telerik:GroupToolbarItem Style="{StaticResource GroupToolbarItemViewStyle}">
            <telerik:RichTextEditorBoldToolbarItem/>
            <telerik:RichTextEditorItalicToolbarItem/>
            <telerik:RichTextEditorUnderlineToolbarItem/>
            <telerik:RichTextEditorSubscriptToolbarItem/>
            <telerik:RichTextEditorSuperscriptToolbarItem/>
            <telerik:RichTextEditorStrikethroughToolbarItem/>
        </telerik:GroupToolbarItem>
    </telerik:RadRichTextEditorToolbar>
    <telerik:RadRichTextEditor x:Name="richTextEditor" Grid.Row="{OnIdiom Desktop=1, Phone=0}" />

</Grid>

2. Add the telerik namespaces:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. And the Styles in the Resources of the page :

<Color x:Key="ToolbarItemTextColor">White</Color>
<Color x:Key="ToolbarItemInvertedTextColor">Black</Color>
<Color x:Key="ToolbarItemPointerOverColor">#FABB5C</Color>
<Color x:Key="ToolbarAccentColor">#F9AA34</Color>
<Color x:Key="ToolbarDisabledColor">#61000000</Color>

<Style TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{StaticResource ToolbarDisabledColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style TargetType="telerik:ToggleButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarAccentColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{StaticResource ToolbarDisabledColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style x:Key="CommonToolbarItemViewStyle" TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Opened">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarAccentColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{StaticResource ToolbarDisabledColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style x:Key="GroupToolbarItemViewStyle" TargetType="telerik:GroupToolbarItemView">
    <Setter Property="BorderBrush" Value="{StaticResource ToolbarAccentColor}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="4" />
    <Setter Property="Margin" Value="0, 0, 4, 0" />
</Style>

<Style x:Key="RichTextEditorToolbarStyle" TargetType="telerik:RadRichTextEditorToolbar">
    <Setter Property="BackgroundColor" Value="#344955" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="CornerRadius" Value="4" />
</Style>

4. This is the result:

.NET MAUI RichTextEditor Toolbar Styling

For the RichTextEditor Toolbar Styling example, see the SDKBrowser Demo Application and go to RichTextEditor -> Styling.

In this article