How to Show Save Edit Action Inside Annotation Toolbars in the .NET MAUI Image Editor (SfImageEditor)?

The Syncfusion® .NET MAUI Image Editor (SfImageEditor) allows you to display a save edit action inside text, pen, and shape toolbars. The following demonstration helps you to understand how to show the save edit action annotation toolbars.

XAML:

Initialize the Image Editor control and set the source image.

<imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png"/>

C#:

The default bottom toolbar contains ToolbarItems, and each item has SubToolbars. Retrieve the required ToolbarItem using the Name property for items like Pen, Text and Shape, and customize the default settings. This dynamic modification is useful for customizing and extending the functionality of the image editor’s toolbar at runtime. Follow the demonstration below to show the save edit action inside the text, pen, and shape toolbars.

public MainPage()
{
   InitializeComponent();
   var bottomToolbar = this.imageEditor.Toolbars[1];
   
   ImageEditorToolbarItem? penToolbarItem = (ImageEditorToolbarItem?)bottomToolbar.ToolbarItems.FirstOrDefault(x => x.Name == "Pen");
   if (penToolbarItem != null)
   {
       penToolbarItem.SubToolbars[0].ToolbarItems.Add(new ImageEditorToolbarItem { Name = "SaveEdit" });
   }

   ImageEditorToolbarItem? textToolbarItem = (ImageEditorToolbarItem?)bottomToolbar.ToolbarItems.FirstOrDefault(x => x.Name == "Text");
   if (textToolbarItem != null)
   {
       textToolbarItem.SubToolbars[0].ToolbarItems.Add(new ImageEditorToolbarItem { Name = "SaveEdit" });
   }

   ImageEditorToolbarItem? shapeToolbarItem = (ImageEditorToolbarItem?)bottomToolbar.ToolbarItems.FirstOrDefault(x => x.Name == "Shape");
   if (shapeToolbarItem != null)
   {
       ImageEditorToolbarItem? shapeItem = (ImageEditorToolbarItem?)shapeToolbarItem.SubToolbars[0].ToolbarItems.FirstOrDefault();
       if (shapeItem != null)
       {
           shapeItem.SubToolbars[0].ToolbarItems.Add(new ImageEditorToolbarItem { Name = "SaveEdit" });
       }
   }
}

Output:

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to show the save edit action inside annotation toolbars in the .NET MAUI Image Editor (SfImageEditor).

Refer to our .NET MAUI Image Editor feature tour page for other groundbreaking feature representations. You can also explore our .NET MAUI Image Editor documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Image Editor and other .NET MAUI components.

Please let us know in the following comment section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!