# Syncfusion Maui Image Editor

> Implements and customize Syncfusion .NET MAUI ImageEditor (SfImageEditor) for editing, annotating, and transforming images. Use when working with MAUI image editing, photo editing, image cropping, or image transformations. Covers shape/text overlays, freehand drawing, image filters, toolbar customization, and saving edited images.

- Skill: `gabrielmoreira/syncfusion-maui-image-editor` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/syncfusion-maui-image-editor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/syncfusion-maui-image-editor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/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](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](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](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](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](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](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](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](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](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](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](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