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