RichTextEditor Toolbar Styling
RichTextEditor for .NET MAUI provides a flexible styling API for its toolbar items.
The RichTextEditorToolbar is based on the RadToolbar control. All toolbar items in the RichTextEditor inherit from ButtonToolbarItem.
All styling properties available for the ButtonToolbarItem are applicable for the rich text editor toolbar items.
Here is an example:
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:
For the RichTextEditor Toolbar Styling example, see the SDKBrowser Demo Application and go to RichTextEditor -> Styling.