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

.NET MAUI ImageEditor Toolbar Styling

You can style the Toolbar using the Flexible Styling API.

Style the Toolbar

Style the Toolbar using the following properties:

  • BackgroundColor(Microsoft.Maui.Graphics.Color)—Specifies the background color of the toolbar.
  • BorderColor(Microsoft.Maui.Graphics.Color)—Specifies the color of the border around the toolbar.
  • BorderThickness(Microsoft.Maui.Thickness)—Specifies the thickness of the border around the toolbar.
  • CornerRadius(Microsoft.Maui.Thickness)—Specifies the corner radius of the border around the toolbar.
  • Style(of type Microsoft.Maui.Controls.Style, with target type Telerik.Maui.Controls.ToolbarContentView)—Specifies the style of the toolbar.

Style the Toolbar Elements

  • OverflowMenuButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.OverflowMenuButtonToolbarItemView)—Specifies the Style applied to the overflow menu button in the toolbar.
  • BackNavigationButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.BackNavigationButtonToolbarItemView)—Specifies the Style applied to the back navigation button in the toolbar.
  • ScrollForwardButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.ScrollForwardButtonToolbarItemView)—Specifies the Style applied to the forward scroll button in the toolbar.
  • ScrollBackwardButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.ScrollBackwardButtonToolbarItemView)—Specifies the Style applied to the backward scroll button in the toolbar.

Style the Toolbar Items

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

Toolbar Item Style Target type
ImageEditorTransformationsToolbarItem NavigationButtonToolbarItem
ImageEditorFiltersToolbarItem ImageEditorFilterOptionsToolbarItemView
ImageEditorCropOptionsToolbarItem ImageEditorCropOptionsToolbarItemView
ImageEditorResizeOptionsToolbarItem ImageEditorResizeOptionsToolbarItemView
ImageEditorRotateLeftToolbarItem ButtonToolbarItemView
ImageEditorRotateRightToolbarItem ButtonToolbarItemView
ImageEditorFlipHorizontalToolbarItem ButtonToolbarItemView
ImageEditorFlipVerticalToolbarItem ButtonToolbarItemView
ImageEditorFilterOptionsToolbarItem ImageEditorFilterOptionsToolbarItemView
ImageEditorUndoToolbarItem ButtonToolbarItemView
ImageEditorRedoToolbarItem ButtonToolbarItemView
ImageEditorBrightnessToolbarItem NavigationButtonToolbarItemView
ImageEditorHueToolbarItem NavigationButtonToolbarItemView
ImageEditorSaturationToolbarItem NavigationButtonToolbarItemView
ImageEditorBlurToolbarItem NavigationButtonToolbarItemView
ImageEditorSharpenToolbarItem NavigationButtonToolbarItemView
ImageEditorContrastToolbarItem NavigationButtonToolbarItemView
SeparatorToolbarItem SeparatorToolbarItemView
LabelToolbarItem LabelToolbarItemView
ImageEditorCancelToolbarItem ButtonToolbarItemView
ImageEditorApplyToolbarItem ButtonToolbarItemView
ImageEditorOptionsToolbarItem ImageEditorOptionsToolbarItemView

Style the content of the toolbar items

Toolbar options content styling
Style the content of the Crop Options Toolbar Item
Style the content of the Filter Options Toolbar Item
Style the content of the Resize Options Toolbar Item
Style the content of the Options Toolbar Item

Display text and or image in the toolbar item

  • DisplayOptions(enum of type Telerik.Maui.Controls.ToolbarItemDisplayOptions) property allows you to display text, image in the toolbar or in a combination of both. The options are Text and Image. This enum type supports a bitwise combination of its members to enable more than one option.

    Position the image relative to the text in the toolbar item by setting the ImagePosition(enum of type Telerik.Maui.Controls.ToolbarItemImagePosition). The available options are:

    • Left—The image is displayed to the left of the text.
    • Top—The image is displayed at the top of the text.
    • Right—The image is displayed to the right of the text.
    • Bottom—The image is displayed at the bottom of the text.

The default value is Left.

Example for styling the Hue, Brightness and Button toolbar Items

The XAML definition:

<Grid RowDefinitions="Auto,*">
    <telerik:RadImageEditorToolbar BackgroundColor="Transparent"
                                   ImageEditor="{x:Reference imageEditor}">
        <telerik:ButtonToolbarItem Text="Save" Clicked="OnSaveClicked" Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorHueToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorBrightnessToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
    <telerik:RadImageEditor x:Name="imageEditor" 
                            Grid.Row="1" />

And the style in the page's resources:

<Style x:Key="buttonToolbarStyle" TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="DisplayOptions" Value="Text"/>
    <Setter Property="TextColor" Value="Black"/>
    <Setter Property="CornerRadius" Value="5"/>
    <Setter Property="BackgroundColor" Value="LightGray"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderColor" Value="Black"/>

For the ImageEditor Toolbar Styling example refer to the SDKBrowser Demo Application.

See Also

In this article