.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"
                                   BorderColor="DarkGray" 
                                   CornerRadius="10"
                                   AutoGenerateItems="False"
                                   BorderThickness="1"
                                   ImageEditor="{x:Reference imageEditor}">
        <telerik:ButtonToolbarItem Text="Save" Clicked="OnSaveClicked" Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorHueToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorBrightnessToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
    </telerik:RadImageEditorToolbar>
    <telerik:RadImageEditor x:Name="imageEditor" 
                            Source="balloon.jpg" 
                            Grid.Row="1" />
</Grid>

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"/>
</Style>

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

See Also

• Saving Images
• Loading Images
• Zooming Images