.NET MAUI RichTextEditor Documentation - RichTextEditor Toolbar Styling

The .NET MAUI RichTextEditor provides a flexible styling API for its 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.

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.

Sample Applications

Support Resources

Community

RichTextEditor Toolbar Styling

Style the Toolbar Items

Example for Styling the Toolbar

Sample Applications

Support Resources

Community