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