{"id":"2e0f8da2-695f-4071-8d8e-52b71bdf1b8b","shortId":"w5ndZ9","kind":"skill","title":"syncfusion-maui-image-editor","tagline":"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 filte","description":"# Implementing .NET MAUI Image Editor\n\nA 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.\n\n## When to Use This Skill\n\nUse this skill when you need to:\n- Edit and manipulate images in a .NET MAUI application\n- Crop images with various aspect ratios or custom selections\n- Rotate or flip images (transformations)\n- Add annotations: shapes, text, or freehand drawing\n- Apply filters and effects (brightness, contrast, blur, saturation, etc.)\n- Customize the built-in toolbar or create custom toolbars\n- Zoom and pan images for detailed editing\n- Save edited images to file or stream\n- Serialize and deserialize editor state (annotations, transformations)\n- Implement undo/redo functionality\n- Handle image editing events\n- Customize image editor appearance\n\n## Component Overview\n\n**SfImageEditor** is a comprehensive image editing control for .NET MAUI that provides:\n\n**Core Features:**\n- Image loading from file, stream, or resources\n- Cropping with presets (Square, Circle, 16:9, 4:3, 3:2, etc.) or freehand\n- Transformations: Rotation (90°, 180°, 270°, custom angles), Flip (horizontal/vertical)\n- Annotations: Shapes (Circle, Rectangle, Arrow, Line, Path), Text, Freehand drawing\n- Image filters: Brightness, Contrast, Blur, Sharpen, Exposure, Saturation, Hue, Opacity\n- Built-in toolbar with full customization support\n- Zoom and pan with pinch gestures\n- Z-ordering for annotations (bring to front, send to back)\n- Undo/Redo operations\n- Save to file or stream (JPEG, JPG, PNG, BMP)\n- Serialization/Deserialization of editor state\n- Comprehensive event handling\n\n**NuGet Package:** `Syncfusion.Maui.ImageEditor`\n\n## Documentation and Navigation Guide\n\n### Getting Started & Setup\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n- Installation and NuGet package setup\n- Handler registration in MauiProgram.cs\n- Basic ImageEditor implementation (XAML & C#)\n- Loading images from different sources\n- Source property and image loading\n\n### Cropping & Transformations\n📄 **Read:** [references/crop-transform.md](references/crop-transform.md)\n- Image cropping with Crop method\n- ImageCropType options (Free, Square, Circle, aspect ratios)\n- Interactive vs programmatic cropping\n- Rotation operations (Rotate method)\n- Flip operations (horizontal/vertical)\n- Custom angle rotations\n- Transformation events\n\n### Annotations\n📄 **Read:** [references/annotations.md](references/annotations.md)\n- Adding shape annotations (Circle, Rectangle, Arrow, Line, Path)\n- AddShape method and AnnotationShape enum\n- Text annotations (AddText method)\n- Freehand drawing capabilities\n- Custom view overlays\n- Annotation settings (bounds, opacity, rotation, colors)\n- Annotation selection and manipulation\n- AllowDrag, AllowResize, IsEditable properties\n\n### Filters & Effects\n📄 **Read:** [references/filters-effects.md](references/filters-effects.md)\n- Applying image filters programmatically\n- Brightness and contrast adjustments\n- Exposure, saturation, and hue controls\n- Blur and sharpen effects\n- Opacity modifications\n- Combining multiple effects\n- Effect preview and reset\n\n### Toolbar Customization\n📄 **Read:** [references/toolbar.md](references/toolbar.md)\n- ShowToolbar property for visibility control\n- Built-in toolbar items\n- Adding custom toolbar items\n- Removing or reordering toolbar items\n- Toolbar positioning and orientation\n- Toolbar item appearance customization\n- ToolbarItemSelected event\n- Creating completely custom toolbars\n\n### Zooming & Navigation\n📄 **Read:** [references/zooming-navigation.md](references/zooming-navigation.md)\n- Zoom functionality (pinch-to-zoom, programmatic)\n- Zoom level management\n- Pan and navigation controls\n- FitToScreen functionality\n- Z-ordering for annotations\n- BringToFront and SendToBack methods\n- Layer management for complex compositions\n\n### Save & Serialization\n📄 **Read:** [references/save-serialization.md](references/save-serialization.md)\n- Saving edited images (Save method)\n- Save to file path vs stream\n- Image format options (JPEG, JPG, PNG, BMP)\n- Quality and compression settings\n- Serialization to JSON (annotations and state)\n- Deserialization (loading saved editor state)\n- Reset functionality\n- Export scenarios and best practices\n\n### Undo & Redo Operations\n📄 **Read:** [references/undo-redo.md](references/undo-redo.md)\n- Undo and Redo methods\n- CanUndo and CanRedo properties\n- History stack management\n- Custom UI for undo/redo\n- History limits and configuration\n- Undo/Redo events\n\n### Events & Event Handling\n📄 **Read:** [references/events.md](references/events.md)\n- ImageLoaded event\n- ImageSaving and ImageSaved events\n- ItemsSelected event (annotation selection)\n- ToolbarItemSelected event\n- Cropping events\n- Event arguments and accessing event data\n- Building event-driven workflows\n\n### Styling & Customization\n📄 **Read:** [references/styling-customization.md](references/styling-customization.md)\n- Visual customization options\n- Theme support and styling\n- Liquid glass effect\n- Control appearance customization\n- Annotation style customization\n- Border and background properties\n\n### Accessibility & Localization\n📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md)\n- Accessibility features and support\n- Screen reader compatibility\n- Keyboard navigation (desktop platforms)\n- Semantic properties\n- Localization and multi-language support\n- Culture-specific formatting\n- Right-to-left (RTL) layout support","tags":["syncfusion","maui","image","editor","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-image-editor","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-image-editor","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (5,698 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:07.685Z","embedding":null,"createdAt":"2026-04-18T22:15:23.317Z","updatedAt":"2026-04-22T00:56:07.685Z","lastSeenAt":"2026-04-22T00:56:07.685Z","tsv":"'16':202 '180':214 '2':207 '270':215 '3':205,206 '4':204 '9':203 '90':213 'access':593,626,631 'ad':357,440 'add':116 'addshap':365 'addtext':372 'adjust':406 'allowdrag':390 'allowres':391 'angl':217,349 'annot':16,70,117,161,220,258,353,359,371,380,386,488,528,584,619 'annotationshap':368 'appear':173,455,617 'appli':123,399 'applic':101 'argument':591 'arrow':224,362 'aspect':106,335 'back':264 'background':624 'basic':305 'best':541 'blur':129,234,412 'bmp':275,520 'border':622 'bound':382 'bright':127,232,403 'bring':259 'bringtofront':489 'build':596 'built':77,135,241,436 'built-in':76,134,240,435 'c':309 'canredo':555 'canundo':553 'capabl':66,376 'circl':201,222,334,360 'color':385 'combin':418 'compat':637 'complet':460 'complex':496 'compon':174 'composit':497 'comprehens':47,179,280 'compress':523 'configur':567 'contrast':128,233,405 'control':59,182,411,434,481,616 'core':188 'cover':34 'creat':139,459 'crop':30,68,102,197,320,326,328,340,588 'cultur':651 'culture-specif':650 'custom':8,52,109,132,140,170,216,246,348,377,426,441,456,461,560,602,607,618,621 'customiz':79 'data':595 'deseri':158,531 'desktop':640 'detail':147 'differ':313 'document':286 'draw':38,122,229,375 'driven':599 'edit':15,26,28,65,93,148,150,168,181,504 'editor':5,45,159,172,278,534 'effect':73,126,395,415,420,421,615 'enum':369 'etc':131,208 'event':169,281,352,458,569,570,571,577,581,583,587,589,590,594,598 'event-driven':597 'export':538 'exposur':236,407 'featur':189,632 'file':153,193,269,510 'filt':40 'filter':71,124,231,394,401 'fittoscreen':482 'flip':113,218,345 'format':515,653 'free':332 'freehand':37,121,210,228,374 'front':261 'full':245 'function':165,469,483,537 'gestur':253 'get':290 'glass':614 'guid':289 'handl':166,282,572 'handler':301 'histori':557,564 'horizontal/vertical':219,347 'hue':238,410 'imag':4,19,25,29,32,39,44,64,96,103,114,145,151,167,171,180,190,230,311,318,325,400,505,514 'imagecroptyp':330 'imageeditor':12,57,61,306 'imageload':576 'imagesav':578,580 'implement':6,41,50,163,307 'includ':67 'instal':296 'interact':337 'isedit':392 'item':439,443,448,454 'itemsselect':582 'jpeg':272,517 'jpg':273,518 'json':527 'keyboard':638 'languag':648 'layer':493 'layout':659 'left':657 'level':476 'limit':565 'line':225,363 'liquid':613 'load':191,310,319,532 'local':627,644 'manag':477,494,559 'manipul':95,389 'maui':3,11,24,43,56,100,185 'mauiprogram.cs':304 'method':329,344,366,373,492,507,552 'modif':417 'multi':647 'multi-languag':646 'multipl':419 'navig':288,464,480,639 'need':91 'net':10,42,55,99,184 'nuget':283,298 'opac':239,383,416 'oper':266,342,346,545 'option':331,516,608 'order':256,486 'orient':452 'overlay':36,379 'overview':175 'packag':284,299 'pan':144,250,478 'path':226,364,511 'photo':27 'pinch':252,471 'pinch-to-zoom':470 'platform':641 'png':274,519 'posit':450 'power':63 'practic':542 'preset':199 'preview':422 'programmat':339,402,474 'properti':316,393,431,556,625,643 'provid':62,187 'qualiti':521 'ratio':107,336 'read':293,322,354,396,427,465,500,546,573,603,628 'reader':636 'rectangl':223,361 'redo':544,551 'references/accessibility-localization.md':629,630 'references/annotations.md':355,356 'references/crop-transform.md':323,324 'references/events.md':574,575 'references/filters-effects.md':397,398 'references/getting-started.md':294,295 'references/save-serialization.md':501,502 'references/styling-customization.md':604,605 'references/toolbar.md':428,429 'references/undo-redo.md':547,548 'references/zooming-navigation.md':466,467 'registr':302 'remov':444 'reorder':446 'reset':424,536 'resourc':196 'right':655 'right-to-left':654 'rotat':111,212,341,343,350,384 'rtl':658 'satur':130,237,408 'save':149,267,498,503,506,508,533 'scenario':539 'screen':635 'select':110,387,585 'semant':642 'send':262 'sendtoback':491 'serial':156,499,525 'serialization/deserialization':276 'set':381,524 'setup':292,300 'sfimageeditor':13,58,176 'shape':118,221,358 'shape/text':35 'sharpen':235,414 'showtoolbar':430 'skill':48,85,88 'skill-syncfusion-maui-image-editor' 'sourc':314,315 'source-syncfusion' 'specif':652 'squar':200,333 'stack':558 'start':291 'state':160,279,530,535 'stream':155,194,271,513 'style':601,612,620 'support':247,610,634,649,660 'syncfus':2,9,54 'syncfusion-maui-image-editor':1 'syncfusion.maui.imageeditor':285 'text':119,227,370 'theme':609 'toolbar':80,137,141,243,425,438,442,447,449,453,462 'toolbaritemselect':457,586 'topic-agent-skills' 'transform':18,33,69,115,162,211,321,351 'ui':561 'undo':543,549 'undo/redo':164,265,563,568 'use':20,83,86 'various':105 'view':378 'visibl':433 'visual':606 'vs':338,512 'work':22 'workflow':600 'xaml':308 'z':255,485 'z-order':254,484 'zoom':142,248,463,468,473,475","prices":[{"id":"74124a33-148d-4155-bb0c-ebb7fb20dc37","listingId":"2e0f8da2-695f-4071-8d8e-52b71bdf1b8b","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:23.317Z"}],"sources":[{"listingId":"2e0f8da2-695f-4071-8d8e-52b71bdf1b8b","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-image-editor","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-image-editor","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:23.317Z","lastSeenAt":"2026-04-22T00:56:07.685Z"}],"details":{"listingId":"2e0f8da2-695f-4071-8d8e-52b71bdf1b8b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-image-editor","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"63b451fd2a765e5216d47ea9cfe94a705cdb15c0","skill_md_path":"skills/syncfusion-maui-image-editor/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-image-editor"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-image-editor","description":"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."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-image-editor"},"updatedAt":"2026-04-22T00:56:07.685Z"}}