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
1---
2name: syncfusion-maui-image-editor
3description: 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.
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7---
8
9# Implementing .NET MAUI Image Editor
10
11A 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.
12
13## When to Use This Skill
14
15Use this skill when you need to:
16- Edit and manipulate images in a .NET MAUI application
17- Crop images with various aspect ratios or custom selections
18- Rotate or flip images (transformations)
19- Add annotations: shapes, text, or freehand drawing
20- Apply filters and effects (brightness, contrast, blur, saturation, etc.)
21- Customize the built-in toolbar or create custom toolbars
22- Zoom and pan images for detailed editing
23- Save edited images to file or stream
24- Serialize and deserialize editor state (annotations, transformations)
25- Implement undo/redo functionality
26- Handle image editing events
27- Customize image editor appearance
28
29## Component Overview
30
31**SfImageEditor** is a comprehensive image editing control for .NET MAUI that provides:
32
33**Core Features:**
34- Image loading from file, stream, or resources
35- Cropping with presets (Square, Circle, 16:9, 4:3, 3:2, etc.) or freehand
36- Transformations: Rotation (90°, 180°, 270°, custom angles), Flip (horizontal/vertical)
37- Annotations: Shapes (Circle, Rectangle, Arrow, Line, Path), Text, Freehand drawing
38- Image filters: Brightness, Contrast, Blur, Sharpen, Exposure, Saturation, Hue, Opacity
39- Built-in toolbar with full customization support
40- Zoom and pan with pinch gestures
41- Z-ordering for annotations (bring to front, send to back)
42- Undo/Redo operations
43- Save to file or stream (JPEG, JPG, PNG, BMP)
44- Serialization/Deserialization of editor state
45- Comprehensive event handling
46
47**NuGet Package:** `Syncfusion.Maui.ImageEditor`
48
49## Documentation and Navigation Guide
50
51### Getting Started & Setup
52📄 **Read:** [references/getting-started.md](references/getting-started.md)
53- Installation and NuGet package setup
54- Handler registration in MauiProgram.cs
55- Basic ImageEditor implementation (XAML & C#)
56- Loading images from different sources
57- Source property and image loading
58
59### Cropping & Transformations
60📄 **Read:** [references/crop-transform.md](references/crop-transform.md)
61- Image cropping with Crop method
62- ImageCropType options (Free, Square, Circle, aspect ratios)
63- Interactive vs programmatic cropping
64- Rotation operations (Rotate method)
65- Flip operations (horizontal/vertical)
66- Custom angle rotations
67- Transformation events
68
69### Annotations
70📄 **Read:** [references/annotations.md](references/annotations.md)
71- Adding shape annotations (Circle, Rectangle, Arrow, Line, Path)
72- AddShape method and AnnotationShape enum
73- Text annotations (AddText method)
74- Freehand drawing capabilities
75- Custom view overlays
76- Annotation settings (bounds, opacity, rotation, colors)
77- Annotation selection and manipulation
78- AllowDrag, AllowResize, IsEditable properties
79
80### Filters & Effects
81📄 **Read:** [references/filters-effects.md](references/filters-effects.md)
82- Applying image filters programmatically
83- Brightness and contrast adjustments
84- Exposure, saturation, and hue controls
85- Blur and sharpen effects
86- Opacity modifications
87- Combining multiple effects
88- Effect preview and reset
89
90### Toolbar Customization
91📄 **Read:** [references/toolbar.md](references/toolbar.md)
92- ShowToolbar property for visibility control
93- Built-in toolbar items
94- Adding custom toolbar items
95- Removing or reordering toolbar items
96- Toolbar positioning and orientation
97- Toolbar item appearance customization
98- ToolbarItemSelected event
99- Creating completely custom toolbars
100
101### Zooming & Navigation
102📄 **Read:** [references/zooming-navigation.md](references/zooming-navigation.md)
103- Zoom functionality (pinch-to-zoom, programmatic)
104- Zoom level management
105- Pan and navigation controls
106- FitToScreen functionality
107- Z-ordering for annotations
108- BringToFront and SendToBack methods
109- Layer management for complex compositions
110
111### Save & Serialization
112📄 **Read:** [references/save-serialization.md](references/save-serialization.md)
113- Saving edited images (Save method)
114- Save to file path vs stream
115- Image format options (JPEG, JPG, PNG, BMP)
116- Quality and compression settings
117- Serialization to JSON (annotations and state)
118- Deserialization (loading saved editor state)
119- Reset functionality
120- Export scenarios and best practices
121
122### Undo & Redo Operations
123📄 **Read:** [references/undo-redo.md](references/undo-redo.md)
124- Undo and Redo methods
125- CanUndo and CanRedo properties
126- History stack management
127- Custom UI for undo/redo
128- History limits and configuration
129- Undo/Redo events
130
131### Events & Event Handling
132📄 **Read:** [references/events.md](references/events.md)
133- ImageLoaded event
134- ImageSaving and ImageSaved events
135- ItemsSelected event (annotation selection)
136- ToolbarItemSelected event
137- Cropping events
138- Event arguments and accessing event data
139- Building event-driven workflows
140
141### Styling & Customization
142📄 **Read:** [references/styling-customization.md](references/styling-customization.md)
143- Visual customization options
144- Theme support and styling
145- Liquid glass effect
146- Control appearance customization
147- Annotation style customization
148- Border and background properties
149
150### Accessibility & Localization
151📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md)
152- Accessibility features and support
153- Screen reader compatibility
154- Keyboard navigation (desktop platforms)
155- Semantic properties
156- Localization and multi-language support
157- Culture-specific formatting
158- Right-to-left (RTL) layout support
159
gabrielmoreira