.NET MAUI ImageEditor Custom Toolbar

The ImageEditor Toolbar can be fully customized. You can populate the toolbar with the ToolbarItems needed for editing the image.

Each toolbar item executes the appropriate cmmand related to it.

Toolbar items

When you customize the toolbar you could include the following editing capabilities:

Applying image transformations

The toolbar items for applying image transformations to the image are:

• ImageEditorCropToolbarItem
• ImageEditorResizeToolbarItem
• ImageEditorRotateLeftToolbarItem
• ImageEditorRotateRightToolbarItem
• ImageEditorFlipHorizontalToolbarItem
• ImageEditorFlipVerticalToolbarItem

To group the transformations you could use the ImageEditorTransformationsToolbarItem.

Applying filters

The toolbar items for applying filters to the image are:

• ImageEditorHueToolbarItem
• ImageEditorSaturationToolbarItem
• ImageEditorBrightnessToolbarItem
• ImageEditorContrastToolbarItem
• ImageEditorBlurToolbarItem
• ImageEditorSharpenToolbarItem

To group the filters you could use the ImageEditorFiltersToolbarItem on mobile and ImageEditorFilterOptionsToolbarItem on desktop.

Reversing and re-applying actions

The toolbar items for reversing and re-applying actions are:

• ImageEditorUndoToolbarItem
• ImageEditorRedoToolbarItem
• ImageEditorResetToolbarItem

Navigation toolbar item

For navigating in the toolbar use the NavigationButtonToolbarItem.

Zooming toolbar item

To fit the image in the available screen space use the ImageEditorZoomToFitToolbarItem.

Custom toolbar item

• LabelToolbarItem—Represents a label in the toolbar.

  • Text(string)—Specifies the text in the toolbar.
  • ImageSource(Microsoft.Maui.Controls.ImageSource)—Specifies the image in the toolbar.

• ButtonToolbarItem. The toolbar item allows you to execute an arbitrary user-defined command from the toolbar. It exposes the following properties:

  • Command(ICommand)—Specifies the command to execute.
  • CommandParameter(object)—Specifies a parameter to be passed to the command upon execution.
  • Clicked event—Raised when the button is clicked.

Separate the toolbar items

You can easily separate the toolbar items using the SeparatorToolbarItem.

Apply and Cancle items

• ImageEditorApplyToolbarItem—Specifies a parameter to be passed to the command upon execution.
• ImageEditorCancelToolbarItem—Raised when the button is clicked.

Example with custom toolbar

XAML definition of the RadImageEditor and RadImageEditortoolbar:

<Grid ColumnDefinitions="Auto, *, Auto" 
      RowSpacing="10"
      RowDefinitions="Auto, *, *">
    <telerik:RadImageEditorToolbar x:Name="imageEditorToolbar"
                                   Grid.Column="0" 
                                   Orientation="Vertical"
                                   Grid.RowSpan="2"
                                   AutoGenerateItems="False"
                                   ImageEditor="{x:Reference imageEditor}"
                                   OptionsPanel="{x:Reference optionsPanel}">
        <telerik:ImageEditorFlipHorizontalToolbarItem/>
        <telerik:ImageEditorFlipVerticalToolbarItem/>
        <telerik:SeparatorToolbarItem/>
        <telerik:ImageEditorResizeToolbarItem IsVisible="{OnIdiom Default='false', Phone='true'}"/>
        <telerik:ImageEditorResizeOptionsToolbarItem IsVisible="{OnIdiom Default='true', Phone='false'}"/>
        <telerik:ImageEditorBrightnessToolbarItem/>
        <telerik:SeparatorToolbarItem/>
        <telerik:ImageEditorUndoToolbarItem/>
        <telerik:ImageEditorRedoToolbarItem/>
    </telerik:RadImageEditorToolbar>
    <telerik:RadImageEditor x:Name="imageEditor"
                            Grid.Column="1"
                            Grid.ColumnSpan="{OnIdiom Phone='2', Default='1'}"
                            Grid.RowSpan="{OnIdiom Default='3', Phone='2'}" />
    <telerik:RadToolbarOptionsPanel x:Name="optionsPanel"
                                    IsVisible="{OnIdiom Default='true', Phone='false'}"
                                    Grid.Column="2"
                                    Grid.Row="1" />
</Grid>

and the image is loaded from Stream:

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(ImageEditorGettingStartedXaml).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("imageavatar.png"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});

this.imageEditor.Source = ImageSource.FromStream(streamFunc);

For the ImageEditor CustomToolbar example refer to the SDKBrowser Demo Application.

Example with custom crop toopbar

You can create a custom crop toolbar. Here is the XMAL definition of the toolbar:

<Grid RowDefinitions="Auto,*">
    <telerik:RadImageEditorToolbar x:Name="customCropToolbar" ImageEditor="{x:Reference imageEditor}" AutoGenerateItems="False">
        <telerik:ButtonToolbarItem Text="Add Image" Clicked="OnAddImageClicked" Style="{StaticResource buttonStyle}"/>
        <telerik:ImageEditorCropToolbarItem>
            <telerik:ImageEditorCropToolbarItem.CropOperations>
                <telerik:CropOperation AspectRatio="Free" Text="Free"/>
                <telerik:CropOperation AspectRatio="Original" Text="Original"/>
                <telerik:CropOperation AspectRatio="1:1" Text="Circle">
                    <telerik:CropOperation.Geometry>
                        <telerik:RadEllipseGeometry Center="0.5,0.5" Radius="0.5,0.5"/>
                    </telerik:CropOperation.Geometry>
                </telerik:CropOperation>
                <telerik:CropOperation Text="Rhombus">
                    <telerik:CropOperation.Geometry>
                        <telerik:RadPathGeometry>
                            <telerik:RadPathFigure StartPoint="0.5, 0.0">
                                <telerik:RadLineSegment Point="1.0, 0.5" />
                                <telerik:RadLineSegment Point="0.5, 1.0" />
                                <telerik:RadLineSegment Point="0.0, 0.5" />
                                <telerik:RadLineSegment Point="0.5, 0.0" />
                            </telerik:RadPathFigure>
                        </telerik:RadPathGeometry>
                    </telerik:CropOperation.Geometry>
                </telerik:CropOperation>
            </telerik:ImageEditorCropToolbarItem.CropOperations>
        </telerik:ImageEditorCropToolbarItem>
    </telerik:RadImageEditorToolbar>
    <telerik:RadImageEditor x:Name="imageEditor" Grid.Row="1"/>
</Grid>

and the style applied to the ButtonToolbarItem:

<Style TargetType="telerik:LabelToolbarItemView" x:Key="buttonStyle">
    <Setter Property="DisplayOptions" Value="Text"/>
</Style>

For the ImageEditor Custom Crop Toolbar example refer to the SDKBrowser Demo Application.

See Also

• Saving Images
• Loading Images
• Zooming Images