Class SfImageEditor

Represents the class for image editor control to load and edit the images.

Inheritance

System.Object

SfView

SfImageEditor

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.ArrangeOverride(Rect)

SfView.Children

SfView.ClipToBounds

SfView.GetSemanticsNodesCore(Double, Double)

SfView.IDrawableLayout.DrawingOrder

SfView.IDrawableLayout.InvalidateDrawable()

SfView.MeasureOverride(Double, Double)

SfView.Padding

Namespace: Syncfusion.Maui.ImageEditor

Assembly: Syncfusion.Maui.ImageEditor.dll

Syntax

public class SfImageEditor : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IImageEditor, IKeyboardListener, IParentThemeElement, IThemeElement

Examples

The following code demonstrates, how to initialize the SfImageEditor control.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"

SfImageEditor imageEditor = new SfImageEditor();
imageEditor.Source = "syncfusion.png";

Constructors

SfImageEditor()

Initializes a new instance of the SfImageEditor class.

Declaration

public SfImageEditor()

Fields

AllowZoomProperty

Identifies the AllowZoom dependency property.

Declaration

public static readonly BindableProperty AllowZoomProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AllowZoom dependency property.

AutoGenerateToolbarItemsProperty

Identifies the AutoGenerateToolbarItems dependency property.

Declaration

public static readonly BindableProperty AutoGenerateToolbarItemsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AutoGenerateToolbarItems dependency property.

MaximumZoomLevelProperty

Identifies the MaximumZoomLevel dependency property.

Declaration

public static readonly BindableProperty MaximumZoomLevelProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MaximumZoomLevel dependency property.

SelectionStrokeProperty

Identifies the SelectionStroke dependency property.

Declaration

public static readonly BindableProperty SelectionStrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionStroke dependency property.

ShowToolbarProperty

Identifies the ShowToolbar dependency property.

Declaration

public static readonly BindableProperty ShowToolbarProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ShowToolbar dependency property.

SourceProperty

Identifies the Source dependency property.

Declaration

public static readonly BindableProperty SourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Source dependency property.

ToolbarSettingsProperty

Identifies the ToolbarSettings dependency property.

Declaration

public static readonly BindableProperty ToolbarSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ToolbarSettings dependency property.

ToolbarsProperty

Identifies the Toolbars dependency property.

Declaration

public static readonly BindableProperty ToolbarsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Toolbars dependency property.

ZoomLevelProperty

Identifies the ZoomLevel dependency property.

Declaration

public static readonly BindableProperty ZoomLevelProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ZoomLevel dependency property.

Properties

AllowZoom

Gets or sets a value indicating whether to enable or disable zooming.

Declaration

public bool AllowZoom { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `true`

Examples

The below examples shows, how to enable and disable the zooming.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           AllowZoom="False">
</imageEditor:SfImageEditor>

this.imageEditor.AllowZoom = false;

AutoGenerateToolbarItems

Gets or sets a value indicating whether the toolbar items are generated automatically.

Declaration

public bool AutoGenerateToolbarItems { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `True`

Examples

The below examples shows, how to set the AutoGenerateToolbarItems property.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           AutoGenerateToolbarItems="false">
</imageEditor:SfImageEditor>

this.imageEditor.AutoGenerateToolbarItems = false;

HasUnsavedDrawnAnnotations

Gets a value indicating whether there are unsaved pen, polygon and polyline drawn in image editor.

Declaration

public bool HasUnsavedDrawnAnnotations { get; }

Property Value

Type
System.Boolean

Remarks

This property returns true if there are unsaved pen or polygon and polyline drawn in image editor, and false otherwise.

Examples

The below examples shows, how to use HasUnsavedDrawnAnnotations property.

XAML
C#

<Grid RowDefinitions = "0.9*, 0.1*" >
    < imageEditor:SfImageEditor x:Name="imageEditor" Source="image.jpeg" />
    <Button Grid.Row="1" Text="HasUnsavedDrawnAnnotations" Clicked="OnHasUnsavedDrawnAnnotationsClicked" HorizontalOptions="Center" />
</ Grid >

private void OnHasUnsavedDrawnAnnotationsClicked(object sender, EventArgs e)
{
    if (this.imageEditor.HasUnsavedEdits)
    {
        if (this.imageEditor.HasUnsavedDrawnAnnotations)
        {
            this.imageEditor.SaveEdits();
        }
    }
}

HasUnsavedEdits

Gets a value indicating whether there are unsaved edits such as Crop, Effects, Shapes, Text and Pen annotations.

Declaration

public bool HasUnsavedEdits { get; }

Property Value

Type
System.Boolean

Remarks

This property returns true if there are unsaved edits such as Crop, Effects, Shapes, Text and Pen on the image, and false otherwise.

Examples

The below examples shows, how to use HasUnsavedEdits property.

XAML
C#

<Grid RowDefinitions = "0.9*, 0.1*" >
    < imageEditor:SfImageEditor x:Name="imageEditor" Source="image.jpeg" />
    <Button Grid.Row="1" Text="HasUnsavedEdits" Clicked="OnHasUnsavedEditsClicked" HorizontalOptions="Center" />
</ Grid >

private void OnHasUnsavedEditsClicked(object sender, EventArgs e)
{
    if (this.imageEditor.HasUnsavedEdits)
    {
        this.imageEditor.SaveEdits();
    }
}

ImageRenderedSize

Gets the image rendered size.

Declaration

public Size ImageRenderedSize { get; }

Property Value

Type
Microsoft.Maui.Graphics.Size

IsImageEdited

Gets a value indicating whether the image is edited or not.

Declaration

public bool IsImageEdited { get; }

Property Value

Type
System.Boolean

Remarks

This property returns true if any edit action has been performed on the image, and false otherwise.

Examples

The below examples shows, how to use IsImageEdited property.

XAML
C#

<Grid RowDefinitions = "0.9*, 0.1*" >
    < imageEditor:SfImageEditor x:Name="imageEditor" Source="image.jpeg" />
    <Button Grid.Row="1" Text= "IsImageEdited" Clicked= "OnIsImageEditedClicked" />
</ Grid >

private void OnIsImageEditedClicked(object sender, EventArgs e)
{
    if (this.imageEditor.IsImageEdited)
    {
        this.imageEditor.SaveEdits();
    }
}

MaximumZoomLevel

Gets or sets the maximum zoom level.

Declaration

public double MaximumZoomLevel { get; set; }

Property Value

Type	Description
System.Double	The default value is `4d`

Examples

The below examples shows, how to set the maximum zoom level.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           MaximumZoomLevel="6">
</imageEditor:SfImageEditor>

this.imageEditor.MaximumZoomLevel = 6;

OriginalImageSize

Gets the original image size.

Declaration

public Size OriginalImageSize { get; }

Property Value

Type
Microsoft.Maui.Graphics.Size

SelectionStroke

Gets or sets the annotation and crop selection highlight color.

Declaration

public Brush SelectionStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value is `Brush.White`

Remarks

This color applied for selection view on cropping and view highlight for annotations.

Examples

The below examples shows, how to set the selection highlight color.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           SelectionStroke="Red">
</imageEditor:SfImageEditor>

this.imageEditor.SelectionStroke = Brush.Red;

ShowToolbar

Gets or sets a value indicating whether to enable or disable default toolbar.

Declaration

public bool ShowToolbar { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `true`

Examples

The below examples shows, how to enable and disable the default toolbar.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           ShowToolbar="False">
</imageEditor:SfImageEditor>

this.imageEditor.ShowToolbar = false;

Source

Gets or sets the source of image.

Declaration

public ImageSource Source { get; set; }

Property Value

Type
Microsoft.Maui.Controls.ImageSource

Examples

The below examples shows, how to set the Source to the SfImageEditor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png">
</imageEditor:SfImageEditor>

this.imageEditor.Source = ImageSource.FromFile("syncfusion.png");

Toolbars

Gets or sets the toolbars of image editor.

Declaration

public List<ImageEditorToolbar> Toolbars { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ImageEditorToolbar>	As default, inbuilt toolbars will be added in the toolbars collection.

Remarks

To remove the inbuilt toolbars, set AutoGenerateToolbarItems property to false.

Examples

The below examples shows, how to customize the existing toolbar.

List<IImageEditorToolbarItem> headerToolbarItems = new List<IImageEditorToolbarItem>
{
    new ImageEditorToolbarItem() { Name = "Browse" },
    new ImageEditorToolbarItem() { Name = "Reset" },
    new ImageEditorToolbarItem() { Name = "Save" }
};
this.imageEditor.Toolbars.FirstOrDefault().ToolbarItems = headerToolbarItems;

The below examples shows, how to add custom toolbar.

XAML

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png" AutoGenerateToolbarItems="False" >
<imageEditor:SfImageEditor.Toolbars>
    <imageEditor:ImageEditorToolbar Orientation="Vertical">
        <imageEditor:ImageEditorToolbar.ToolbarItems>
            <imageEditor:ImageEditorToolbarItem Name = "Browse" />
            <imageEditor:ImageEditorToolbarItem Name = "Save" />
        </imageEditor:ImageEditorToolbar.ToolbarItems>
    </imageEditor:ImageEditorToolbar>
    <imageEditor:ImageEditorToolbar Orientation="Vertical" Position="End">
        <imageEditor:ImageEditorToolbar.ToolbarItems>
            <imageEditor:ImageEditorToolbarItem Name = "Text" />
            <imageEditor:ImageEditorToolbarItem Name = "Shape" />
            <imageEditor:ImageEditorToolbarItem Name = "Pen" />
        </imageEditor:ImageEditorToolbar.ToolbarItems>
    </imageEditor:ImageEditorToolbar>
</imageEditor:SfImageEditor.Toolbars>
</imageEditor:SfImageEditor>

ToolbarSettings

Gets or sets the settings property to customize the appearance of the toolbar.

Declaration

public ImageEditorToolbarSettings ToolbarSettings { get; set; }

Property Value

Type
ImageEditorToolbarSettings

Examples

The below examples shows, how to customize the toolbar settings.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png">
   <imageEditor:SfImageEditor.ToolbarSettings>
        <imageEditor:ImageEditorToolbarSettings Background = "Green"
                                            IconColor="White"
                                            DisabledColor="Yellow"/>
    </imageEditor:SfImageEditor.ToolbarSettings>
</imageEditor:SfImageEditor>

this.imageEditor.ToolbarSettings.Background = Brush.Green;
this.imageEditor.ToolbarSettings.IconColor = Colors.White;
this.imageEditor.ToolbarSettings.DisabledColor = Colors.Yellow;

ZoomLevel

Gets or sets the zoom level.

Declaration

public double ZoomLevel { get; set; }

Property Value

Type	Description
System.Double	Zoom level should not less than 1.

Examples

The below examples shows, how to set the zoom level.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="syncfusion.png"
                           ZoomLevel="3">
</imageEditor:SfImageEditor>

this.imageEditor.ZoomLevel = 5;

Methods

AddCustomAnnotationView(View, ImageEditorAnnotationSettings)

Adds custom view as an annotation over the image.

Declaration

public void AddCustomAnnotationView(View view, ImageEditorAnnotationSettings annotationSettings = null)

Parameters

Type	Name	Description
Microsoft.Maui.Controls.View	view	The custom view that needs to be added as an annotation.
ImageEditorAnnotationSettings	annotationSettings	The custom annotation settings.

AddShape(AnnotationShape, ImageEditorShapeSettings)

Method to add the shape annotation.

Declaration

public void AddShape(AnnotationShape shapeType, ImageEditorShapeSettings shapeSettings = null)

Parameters

Type	Name	Description
AnnotationShape	shapeType	The shape type.
ImageEditorShapeSettings	shapeSettings	ImageEditorShapeSettings is optional. If null, default ImageEditorShapeSettings is applied.

Remarks

Use the ImageLoaded event to add a shape on initial loading.

Examples

The below examples shows, how to use the AddShape method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Rectangle);
}

AddText(String, ImageEditorTextSettings)

Method to add text editor.

Declaration

public void AddText(string text = "", ImageEditorTextSettings textSettings = null)

Parameters

Type	Name	Description
System.String	text	The text.
ImageEditorTextSettings	textSettings	The text settings.

Remarks

Use the ImageLoadedevent to add text on initial loading.

Examples

The below examples shows, how to use the AddText method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.AddText("Entering", new ImageEditorTextSettings() { TextStyle= new ImageEditorTextStyle() {FontSize=14, TextColor=Colors.Black, FontFamily="Arial", FontAttributes=FontAttributes.Italic } });
}

ArrangeContent(Rect)

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.ArrangeContent(Rect)

BringForward()

Method to move the annotation one step forward.

Declaration

public void BringForward()

BringToFront()

Method to bring the selected annotation to the front of all the annotation added.

Declaration

public void BringToFront()

CancelEdits()

Cancels the current editor action.

Declaration

public void CancelEdits()

Remarks

This can be used to cancel the current editing actions like Crop, Effects and annotations.

Examples

The below examples shows, how to use the CancelEdits method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Crop(ImageCropType.Circle);
    this.imageEditor.CancelEdit();
}

ClearAnnotations()

Method to clear all annotation.

Declaration

public void ClearAnnotations()

Examples

The below examples shows, how to use the ClearAnnotations method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.ClearAnnotations();

Crop(Rect, Boolean)

Enables the cropping preview on the image with the specified rectangle bounds.

Declaration

public void Crop(Rect cropBounds, bool isEllipse = false)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	cropBounds	Bounds of the cropping preview on the image.
System.Boolean	isEllipse	Crops in circular shape when true and in rectangular by default.

Remarks

Specify isEllipse as true to crop in elliptical shape. Use the ImageLoadedevent to apply a crop on initial loading. SaveEdits() is used to crop the selected region. CancelEdits()is used to reset the crop.

Examples

The below examples shows, how to use the Crop method with Rect type parameter to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Crop(new Rect(50,100,300,100));
}

Crop(ImageCropType)

Enables the cropping view which helps to choose the area to crop.

Declaration

public void Crop(ImageCropType cropType)

Parameters

Type	Name	Description
ImageCropType	cropType	The cropping type.

Remarks

Use the ImageLoadedevent to apply a crop on initial loading. SaveEdits() is used to crop the selected region. CancelEdits()is used to reset the crop.

Examples

The below examples shows, how to use the Crop method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Crop(ImageCropType.Circle);
}

Crop(Double, Double)

To crop the image based on X and Y aspect ratio.

Declaration

public void Crop(double xRatio, double yRatio)

Parameters

Type	Name	Description
System.Double	xRatio	Cropping x ratio.
System.Double	yRatio	Cropping y ratio.

Remarks

Use the ImageLoadedevent to apply a crop on initial loading. SaveEdits() is used to crop the selected region. CancelEdits()is used to reset the crop.

Examples

The below examples shows, how to use the Crop method with xRatio and yRatio to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Crop(16,9);
}

DeleteAnnotation()

Method to delete the currently selected annotation.

Declaration

public void DeleteAnnotation()

Examples

The below examples shows, how to use the DeleteAnnotation method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.DeleteAnnotations();

Deserialize(Stream)

Deserializes the annotations based on the specified Stream.

Declaration

public void Deserialize(Stream stream)

Parameters

Type	Name	Description
System.IO.Stream	stream	Specifies the stream that contains the serialized annotations to deserialize.

Flip(ImageFlipDirection)

Method to flip the image.

Declaration

public void Flip(ImageFlipDirection flipDirection)

Parameters

Type	Name	Description
ImageFlipDirection	flipDirection	The flip direction.

Remarks

Use the ImageLoadedevent to apply an image filp on initial loading.

Examples

The below examples shows, how to use the Flip method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"    />

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Flip(ImageFlipDirection.Horizontal);
}

GetImageStream()

Method to get the processed image stream.

Declaration

public Task<Stream> GetImageStream()

Returns

Type	Description
System.Threading.Tasks.Task<System.IO.Stream>	The image stream.

ImageEffect(ImageEffect, Nullable<Double>)

Applies the image filter effect.

Declaration

public void ImageEffect(ImageEffect imageEffect, Nullable<double> effectValue = null)

Parameters

Type	Name	Description
ImageEffect	imageEffect	The image effect.
System.Nullable<System.Double>	effectValue	The effect value.

Remarks

Use the ImageLoadedevent to apply an effect on initial loading. SaveEdits() is used to save the applied effects. CancelEdits()is used to reset the applied effects..

Examples

The below examples shows, how to use the ImageEffect method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.ImageEffect(ImageEffect.Brightness, 0.5);
}

MeasureContent(Double, Double)

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint
System.Double	heightConstraint

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.MeasureContent(Double, Double)

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

Overrides

SfView.OnBindingContextChanged()

OnDraw(ICanvas, RectF)

Declaration

protected override void OnDraw(ICanvas canvas, RectF dirtyRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
Microsoft.Maui.Graphics.RectF	dirtyRect

Overrides

SfView.OnDraw(ICanvas, RectF)

OnHandlerChanged()

Declaration

protected override void OnHandlerChanged()

Overrides

SfView.OnHandlerChanged()

Redo()

Method to redo the last undone action.

Declaration

public void Redo()

Examples

The below examples shows, how to use the Redo method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.Redo();

Reset()

Method to reset the editing actions.

Declaration

public void Reset()

Examples

The below examples shows, how to use the Reset method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.Reset();

Rotate()

Method to rotate the image.

Declaration

public void Rotate()

Remarks

Rotates the image 90 degrees in clockwise direction. Use the ImageLoaded event to apply an image rotate on initial loading.

Examples

The below examples shows, how to use the Rotate method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Rotate();
}

Save(Nullable<ImageFileType>, String, String, Nullable<Size>)

Method to save image after editing.

Declaration

public void Save(Nullable<ImageFileType> fileType = null, string filePath = null, string fileName = null, Nullable<Size> imageSize = null)

Parameters

Type	Name	Description
System.Nullable<ImageFileType>	fileType	The image format.
System.String	filePath	The save file path.
System.String	fileName	The image file name.
System.Nullable<Microsoft.Maui.Graphics.Size>	imageSize	The required output image size.

Examples

The below examples shows, how to use the Save method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.Save();

SaveEdits()

Saves the current editing action.

Declaration

public void SaveEdits()

Remarks

For image crop and effects, SaveEdits() should be called to apply the changes, otherwise the changes will be reset.

Examples

The below examples shows, how to use the SaveEdits method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"
                                                ImageLoaded="OnImageLoaded"/>

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.Crop(ImageCropType.Circle);
    this.imageEditor.SaveEdit();
}

SelectAnnotation(Object)

Selects the annotation programmatically using its unique ID.

Declaration

public void SelectAnnotation(object annotationId = null)

Parameters

Type	Name	Description
System.Object	annotationId	The unique identifier of the intended annotation.

SendBackward()

Method to move the selected annotation to one step backward.

Declaration

public void SendBackward()

SendToBack()

Method to push the selected annotation to the back of the all the annotation added.

Declaration

public void SendToBack()

Serialize(Stream)

Serializes the annotations to the file, stored in the specified Stream.

Declaration

public void Serialize(Stream stream)

Parameters

Type	Name	Description
System.IO.Stream	stream	Specifies the stream used to write the file.

SetToolbarItemVisibility(String, Boolean)

To set the toolbar icon visibility based on the icon name.

Declaration

public void SetToolbarItemVisibility(string name, bool isVisible = true)

Parameters

Type	Name	Description
System.String	name	The icon name to set visibility.
System.Boolean	isVisible	The icon visibility.

Undo()

Method to undo the last action.

Declaration

public void Undo()

Examples

The below examples shows, how to use the Undo method to the image editor.

XAML
C#

<imageEditor:SfImageEditor x:Name="imageEditor" Source="syncfusion.png"/>

this.imageEditor.Undo();

Events

AnnotationSelected

Occurs when the annotation is selected.

Declaration

public event EventHandler<AnnotationSelectedEventArgs> AnnotationSelected

Event Type

Type
System.EventHandler<AnnotationSelectedEventArgs>

Examples

The following code demonstrates, how to use the SfImageEditor's ImageLoaded event.

XAML
C#

<imageEditor:SfImageEditor x:Name = "imageEditor"
                           Source = "syncfusion.png"
                           AnnotationSelected = "OnAnnotationSelected"
</imageEditor:SfImageEditor>

this.imageEditor.AnnotationSelected += this.OnAnnotationSelected;
private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
{
 if (e.AnnotationSettings is ImageEditorShapeSettings shapeSettings)
 {
   shapeSettings.Color = Colors.Black;
 }
}

AnnotationUnselected

Occurs when the annotation is unselected.

Declaration

public event EventHandler<AnnotationUnselectedEventArgs> AnnotationUnselected

Event Type

Type
System.EventHandler<AnnotationUnselectedEventArgs>

BeginReset

Occurs when the image is being reset to its initial state or default settings.

Declaration

public event EventHandler<CancelEventArgs> BeginReset

Event Type

Type
System.EventHandler<System.ComponentModel.CancelEventArgs>

Examples

The following code demonstrates, how to use the SfImageEditor's BeginReset event.

XAML
C#

<imageEditor:SfImageEditor x:Name = "imageEditor"
                           Source = "syncfusion.png"
                           BeginReset = "OnBeginReset"
</imageEditor:SfImageEditor>

this.imageEditor.BeginReset += this.OnBeginReset;
private void OnBeginReset(object sender, CancelEventArgs e)
{
   e.Cancel = true;
}

BrowseImage

Occurs while browsing image source.

Declaration

public event EventHandler<CancelEventArgs> BrowseImage

Event Type

Type
System.EventHandler<System.ComponentModel.CancelEventArgs>

ImageLoaded

Occurs when the image is loaded.

Declaration

public event EventHandler<EventArgs> ImageLoaded

Event Type

Type
System.EventHandler<System.EventArgs>

Remarks

ImageLoaded event can be used to add annotation or apply image transformations or effects on initial loading.

Examples

The following code demonstrates, how to use the SfImageEditor's ImageLoaded event.

XAML
C#

<imageEditor:SfImageEditor x:Name = "imageEditor"
                           Source = "syncfusion.png"
                           ImageLoaded = "OnImageLoaded"
</imageEditor:SfImageEditor>

this.imageEditor.ImageLoaded += this.OnImageLoaded;
private void OnImageLoaded(object sender, EventArgs e)
{
   this.imageEditor.Rotate();
}

ImageSaved

Occures when an image is successfully saved.

Declaration

public event EventHandler<ImageSavedEventArgs> ImageSaved

Event Type

Type
System.EventHandler<ImageSavedEventArgs>

Examples

The following code demonstrates, how to use the SfImageEditor's ImageSaved event.

XAML
C#

<imageEditor:SfImageEditor x:Name = "imageEditor"
                           Source = "syncfusion.png"
                           ImageSaved = "OnImageSaved"
</imageEditor:SfImageEditor>

this.imageEditor.ImageSaved += this.OnImageSaved;
private void OnImageSaved(object sender, ImageSavedEventArgs e)
{
   string location = e.Location;
}

ImageSaving

Occurs when the image is saving.

Declaration

public event EventHandler<ImageSavingEventArgs> ImageSaving

Event Type

Type
System.EventHandler<ImageSavingEventArgs>

Examples

The following code demonstrates, how to use the SfImageEditor's ImageSaving event.

XAML
C#

<imageEditor:SfImageEditor x:Name = "imageEditor"
                           Source = "syncfusion.png"
                           ImageSaving = "OnImageSaving"
</imageEditor:SfImageEditor>

this.imageEditor.ImageSaving += this.OnImageSaving;
private void OnImageSaving(object sender, ImageSavingEventArgs e)
{
   e.FilePath = "D:\\Syncfusion\\Pictures";
   e.FileName = "Syncfusion";
   e.FileType = ImageFileType.Png;
}

SavePickerOpening

Occurs while save picker opening.

Declaration

public event EventHandler<CancelEventArgs> SavePickerOpening

Event Type

Type
System.EventHandler<System.ComponentModel.CancelEventArgs>

ToolbarItemSelected

Occurs when the toolbar item is selected.

Declaration

public event EventHandler<ToolbarItemSelectedEventArgs> ToolbarItemSelected

Event Type

Type
System.EventHandler<ToolbarItemSelectedEventArgs>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Class SfImageEditor

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Maui.ImageEditor

Assembly: Syncfusion.Maui.ImageEditor.dll

Syntax

Examples

Constructors

SfImageEditor()

Declaration

Fields

AllowZoomProperty

Declaration

Field Value

AutoGenerateToolbarItemsProperty

Declaration

Field Value

MaximumZoomLevelProperty

Declaration

Field Value

SelectionStrokeProperty

Declaration

Field Value

ShowToolbarProperty

Declaration

Field Value

SourceProperty

Declaration

Field Value

ToolbarSettingsProperty

Declaration

Field Value

ToolbarsProperty

Declaration

Field Value

ZoomLevelProperty

Declaration

Field Value

Properties

AllowZoom

Declaration

Property Value

Examples

See Also

AutoGenerateToolbarItems

Declaration

Property Value

Examples

See Also

HasUnsavedDrawnAnnotations

Declaration

Property Value

Remarks

Examples

HasUnsavedEdits

Declaration

Property Value

Remarks

Examples

ImageRenderedSize

Declaration

Property Value

IsImageEdited

Declaration

Property Value

Remarks

Examples

MaximumZoomLevel

Declaration

Property Value

Examples

See Also

OriginalImageSize

Declaration

Property Value

SelectionStroke

Declaration

Property Value

Remarks