syncfusion-maui-image-editor

Implementing .NET MAUI Image Editor

A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI ImageEditor (SfImageEditor) control. The ImageEditor provides powerful image editing capabilities including cropping, transformations, annotations, filters, and effects with a built-in customizable toolbar.

When to Use This Skill

Use this skill when you need to:

• Edit and manipulate images in a .NET MAUI application
• Crop images with various aspect ratios or custom selections
• Rotate or flip images (transformations)
• Add annotations: shapes, text, or freehand drawing
• Apply filters and effects (brightness, contrast, blur, saturation, etc.)
• Customize the built-in toolbar or create custom toolbars
• Zoom and pan images for detailed editing
• Save edited images to file or stream
• Serialize and deserialize editor state (annotations, transformations)
• Implement undo/redo functionality
• Handle image editing events
• Customize image editor appearance

Component Overview

SfImageEditor is a comprehensive image editing control for .NET MAUI that provides:

Core Features:

• Image loading from file, stream, or resources
• Cropping with presets (Square, Circle, 16:9, 4:3, 3:2, etc.) or freehand
• Transformations: Rotation (90°, 180°, 270°, custom angles), Flip (horizontal/vertical)
• Annotations: Shapes (Circle, Rectangle, Arrow, Line, Path), Text, Freehand drawing
• Image filters: Brightness, Contrast, Blur, Sharpen, Exposure, Saturation, Hue, Opacity
• Built-in toolbar with full customization support
• Zoom and pan with pinch gestures
• Z-ordering for annotations (bring to front, send to back)
• Undo/Redo operations
• Save to file or stream (JPEG, JPG, PNG, BMP)
• Serialization/Deserialization of editor state
• Comprehensive event handling

NuGet Package: Syncfusion.Maui.ImageEditor

Documentation and Navigation Guide

Getting Started & Setup

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Handler registration in MauiProgram.cs
• Basic ImageEditor implementation (XAML & C#)
• Loading images from different sources
• Source property and image loading

Cropping & Transformations

📄 Read: references/crop-transform.md

• Image cropping with Crop method
• ImageCropType options (Free, Square, Circle, aspect ratios)
• Interactive vs programmatic cropping
• Rotation operations (Rotate method)
• Flip operations (horizontal/vertical)
• Custom angle rotations
• Transformation events

Annotations

📄 Read: references/annotations.md

• Adding shape annotations (Circle, Rectangle, Arrow, Line, Path)
• AddShape method and AnnotationShape enum
• Text annotations (AddText method)
• Freehand drawing capabilities
• Custom view overlays
• Annotation settings (bounds, opacity, rotation, colors)
• Annotation selection and manipulation
• AllowDrag, AllowResize, IsEditable properties

Filters & Effects

📄 Read: references/filters-effects.md

• Applying image filters programmatically
• Brightness and contrast adjustments
• Exposure, saturation, and hue controls
• Blur and sharpen effects
• Opacity modifications
• Combining multiple effects
• Effect preview and reset

Toolbar Customization

📄 Read: references/toolbar.md

• ShowToolbar property for visibility control
• Built-in toolbar items
• Adding custom toolbar items
• Removing or reordering toolbar items
• Toolbar positioning and orientation
• Toolbar item appearance customization
• ToolbarItemSelected event
• Creating completely custom toolbars

Zooming & Navigation

📄 Read: references/zooming-navigation.md

• Zoom functionality (pinch-to-zoom, programmatic)
• Zoom level management
• Pan and navigation controls
• FitToScreen functionality
• Z-ordering for annotations
• BringToFront and SendToBack methods
• Layer management for complex compositions

Save & Serialization

📄 Read: references/save-serialization.md

• Saving edited images (Save method)
• Save to file path vs stream
• Image format options (JPEG, JPG, PNG, BMP)
• Quality and compression settings
• Serialization to JSON (annotations and state)
• Deserialization (loading saved editor state)
• Reset functionality
• Export scenarios and best practices

Undo & Redo Operations

📄 Read: references/undo-redo.md

• Undo and Redo methods
• CanUndo and CanRedo properties
• History stack management
• Custom UI for undo/redo
• History limits and configuration
• Undo/Redo events

Events & Event Handling

📄 Read: references/events.md

• ImageLoaded event
• ImageSaving and ImageSaved events
• ItemsSelected event (annotation selection)
• ToolbarItemSelected event
• Cropping events
• Event arguments and accessing event data
• Building event-driven workflows

Styling & Customization

📄 Read: references/styling-customization.md

• Visual customization options
• Theme support and styling
• Liquid glass effect
• Control appearance customization
• Annotation style customization
• Border and background properties

Accessibility & Localization

📄 Read: references/accessibility-localization.md

• Accessibility features and support
• Screen reader compatibility
• Keyboard navigation (desktop platforms)
• Semantic properties
• Localization and multi-language support
• Culture-specific formatting
• Right-to-left (RTL) layout support