Articles in this section
Category / Section

How to add custom view with bounds in the Xamarin.Forms SfImageEditor control

2 mins read

This article explains how to add a custom view with bounds and rotatable elements in the Xamarin.Forms Syncfusion SfImageEditor control.

 

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: Set the RotatableElements property to ImageEditorElements.CustomView to rotate, resize the CustomView, and to add custom FooterToolbarItem using the Text and Icon properties with SubItems.

 

C#

imageEditor.RotatableElements = ImageEditorElements.CustomView;
            var footerToolbarItem = new FooterToolbarItem() { Icon = ImageSource.FromResource("IE_Sample.Icons.ITypogy3.png"), Text = "CustomView" };
            footerToolbarItem.SubItems = new ObservableCollection<Syncfusion.SfImageEditor.XForms.ToolbarItem>()
            {
                new Syncfusion.SfImageEditor.XForms.ToolbarItem() { Name = "CustomView1", Icon = ImageSource.FromResource("IE_Sample.Icons.ITypogy1.png") ,Text="ITypogy1" },
                new Syncfusion.SfImageEditor.XForms.ToolbarItem() { Name = "CustomView2", Icon = ImageSource.FromResource("IE_Sample.Icons.ITypogy2.png") ,Text="ITypogy2" }
 
            };
            imageEditor.ToolbarSettings.ToolbarItems.Add(footerToolbarItem);

 

Step 3: Get the respective toolbar items as an argument using the ToolbarItemSelected event.

 

C#

imageEditor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected;

 

        private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
        {
            if (e.ToolbarItem.Name == "CustomView1")
            {
 
                AddCustomView(e.ToolbarItem.Text);
            }
            if (e.ToolbarItem.Name == "CustomView2")
            {
                AddCustomView(e.ToolbarItem.Text);
 
            }
 
        }

 

Step 4: Add a custom view to an image using the AddCustomView method in the ImageEditor control. Specify a custom view with bounds as demonstrated in the following code sample.

 

C#

        private void AddCustomView(string imageName)
        {
            var sampleName = "IE_Sample.Icons." + imageName + ".png";
            Image customImage = new Image();
            customImage.Source = ImageSource.FromResource(sampleName);
            imageEditor.AddCustomView(customImage, new CustomViewSettings() { Bounds = new Rectangle(0, 0, 25, 25), CanMaintainAspectRatio = true, Angle = 45 });
        }

 

View the sample from the GitHub

 

Screenshot

 

CustomView with bounds using xamarin SfImageEditor

 

See also

 

How to add custom view on image in SfImageEditor

 

How to rotate and resize the custom view added in image

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied