How to add custom toolbar to add shapes or text dynamically in Xamarin.Forms SfImageEditor
This article explains how to add custom toolbar and how to add a shape or text over an image, crop, flip, and rotate an image.
Refer to the following steps to add custom toolbar.
Step 1: Create an SfImageEditor sample with all the necessary assemblies.
Refer to this Getting started documentation to create a simple SfImageEditor sample and configure it.
Step 2: Use the SetToolbarItemVisibility method in SfImageEditor to hide the default toolbar items by specifying their name and setting the Boolean values to false. Add custom FooterToolbarItem using the Text and Icon properties and set header or footer ToolbarHeight to 60.
C#
imageEditor.SetToolbarItemVisibility("text,transform,shape,path", false);
imageEditor.ToolbarSettings.FooterToolbarHeight = 60;
imageEditor.ToolbarSettings.HeaderToolbarHeight = 60;
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "AddText", Text = "AddText", Icon = ImageSource.FromResource("IE_Sample.textpic.png") });
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "AddPath", Icon = ImageSource.FromResource("IE_Sample.pathpic.png") });
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "AddShape", Text = "AddShape" });
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "RotateImage", Icon = ImageSource.FromResource("IE_Sample.rotatepic.png") });
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "FlipImage", Text = "Flip" });
imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Name = "CropImage", Text = "Crop" });
Step 3: Use the ToolbarItemSelected event to get the respective toolbar items as an argument.
C#
imageEditor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected;
private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
{
var toolbarItem = e.ToolbarItem;
if (toolbarItem.Name == "AddText")
{
imageEditor.AddText("ImageEditor", new TextSettings() { Color=Color.Green, FontSize=20, TextEffects=TextEffects.Italic });
}
else if(toolbarItem.Name == "AddPath")
{
imageEditor.AddShape(ShapeType.Path,new PenSettings() {Color=Color.Blue });
}
else if (toolbarItem.Name == "AddShape")
{
imageEditor.AddShape(ShapeType.Circle, new PenSettings() { Color = Color.Black, Mode=Mode.Fill });
}
else if (toolbarItem.Name == "FlipImage")
{
imageEditor.Flip(FlipDirection.Horizontal);
}
else if (toolbarItem.Name == "RotateImage")
{
imageEditor.Rotate();
}
else if (toolbarItem.Name == "CropImage")
{
imageEditor.Crop(new Rectangle(0,0,100,100));
}
}
You can find the sample in the following link: Sample
Screenshot
