We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom toolbar to add shapes or text dynamically in Xamarin.Forms SfImageEditor

Platform: Xamarin.Forms |
Control: SfImageEditor |
Published Date: July 6, 2019 |
Last Revised Date: July 6, 2019

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

 Custom toolbar using xamarin SfImageEditor

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile