How to Add a Custom Toolbar to Dynamically Add Shapes or Text in the .NET MAUI Image Editor (SfImageEditor)?

The Syncfusion® .NET MAUI Image Editor (SfImageEditor) allows you to create a custom toolbar for dynamically adding shapes or text. This guide explains how to implement a custom toolbar in the Image Editor.

XAML:

Start by initializing the Image Editor control and providing a source image. Set the ShowToolBar property to False to hide the default toolbar items.

<imageEditor:SfImageEditor x:Name="imageEditor" ShowToolbar="False" Source="custom_toolbar.png"/>

C#:

Use the AddShape and AddText methods within the ButtonClicked event handlers to dynamically add shapes and text.

private void SaveButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.Save();
}

private void CropButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.Crop(ImageCropType.Circle);
}

private void ShapeButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.AddShape(AnnotationShape.Circle);
}

private void TextButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.AddText("Toolbar");
}

private void SaveEditButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.SaveEdits();
}

private void ResetButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.Reset();
}

private void CancelEditButton_Clicked(object sender, EventArgs e)
{
   this.imageEditor.CancelEdits();
}

Output:

To add a shape, click the AddShape button.

To add text, click the AddText button.

Conclusion:

I hope you enjoyed learning how to add a custom toolbar to add shapes or text dynamically 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!