.NET MAUI ImageEditor Toolbar Styling

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

You can style the Toolbar using the Flexible Styling API.

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.

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.

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

Toolbar Item	Style Target type
`ImageEditorTransformationsToolbarItem`	`NavigationButtonToolbarItemView`
`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 | ImageEditorCropOptionsToolbarItemViewContent | | Style the content of the Filter Options Toolbar Item | ImageEditorFilterOptionsToolbarItemView | | Style the content of the Resize Options Toolbar Item | ImageEditorResizeOptionsToolbarItemView | | Style the content of the Options Toolbar Item | ImageEditorOptionsToolbarItemViewContent |

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:

xaml

<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:

xaml

<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.

Style the Toolbar

Style the Toolbar Elements

Style the Toolbar Items

Display text and or image in the toolbar item

See Also