Issues with SFImageEditor Control

[Riz Mawani]

Hi,

I'm just wondering about the following:

1. Is it possible for me to add a TapGestureRecognizer to the control such that, when double-tapped, it would zoom into a particular point on the image? I tried adding a GestureRecognizer but the event associated with it will not fire.

2. Can I make the SfImageEditor control take up the entire Height and/or Width of its parent container? I have tried a combination of different things but cannot get the desired result.

3. Is there any way at all that I can add rounded corners to the SfImageEditor control?

Thanks in advance for any assistance you can provide for this great set of controls!

Looking forward to hearing from you soon.

Sincerely,

Riz

[Rachel A]

Hi Riz, 

 

Greetings from Syncfusion. 

 

Query 1: when double-tapped, it would zoom into a particular point on the image? 

  

As per current implementation of SfImageEditor, you can pinch zoom in and zoom out the loaded image rather than pointing to particular position on the image using double tap. Also, we would like to inform you that we have handled the gestures internally for zooming purpose. 

  

Query 2: Can I make the SfImageEditor control take up the entire Height and/or Width of its parent container?  

  

Yes, by default SfImageEditor control will take its parent height and width value accordingly. Please find the below code snippet which depicts how to set parent bounds to image editor, 

 

[XAML] 

 <Grid HeightRequest="500" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center">
          
        <imageeditor:SfImageEditor  x:Name="editor">
        
    </imageeditor:SfImageEditor>
          </Grid> 

 

Screenshot: 

   

If you face any problems in adapting to the layout, provide the detailed information on scenario. This will be helpful to provide you a solution. 

Query 3: Is there any way at all that I can add rounded corners to the SfImageEditor control? 

  

Yes, this can be achieved with the help of SfBorder control "CornerRadius" property and please find the below code snippet, 

[XAML] 

  

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                          xmlns:imageeditor="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms"
                          xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"

             x:Class="ImageEditor.MyPage1">
    <ContentPage.Content>
        <border:SfBorder CornerRadius="20">
        <imageeditor:SfImageEditor  x:Name="editor">
        
    </imageeditor:SfImageEditor>
            </border:SfBorder>
    </ContentPage.Content>
</ContentPage> 

 

Screenshot: 

 

 

 

Please let us know if you have any concerns. 

 

Thanks, 

Rachel. 

[Riz Mawani]

Hi Rachel,

Thanks for your quick reply and sample code.

What I'm really trying to achieve on my end is to use the SfImageEditor Control without the built-in Toolbar and somehow remove the margin that seems to surround the image component itself. Is this possible?

Thanks again!

R

[Rachel A]

Hi Riz, 

Please find the response for the queries below. 

 

Query 1: “SfImageEditor Control without the built-in Toolbar and somehow remove the margin that seems to surround the image” 

 

Yes, we can disable the image editor toolbar visibility using ToolbarSettings “IsVisible” property as in the below code snippet. 

[XAML]  

<border:SfBorder CornerRadius="20">
       <imageeditor:SfImageEditor x:Name="editor">
        <imageeditor:SfImageEditor.ToolbarSettings>
            <imageeditor:ToolbarSettings IsVisible="false" />
        </imageeditor:SfImageEditor.ToolbarSettings>
       </imageeditor:SfImageEditor>
      </border:SfBorder> 

  

Query 2: “Remove the margin that seems to surround the image “
  

By default, image will be displayed based on its aspect fit along with some padding value which we are added internally. 

 

Thanks, 

Rachel. 

[Riz Mawani]

Thanks once again for your quick reply, Rachel.

I am easily able to display the image without the ToolBar but need to be able to remove the default padding around the image. Is there any type of workaround for this or a new feature being built that will allow the default Padding to be changed in future? I've tried to modify the Control's Margin but that does not fully solve my problem and is not always consistent.

Thanks again!

[Bharathiraja K]

Hi Riz, 

 

We are using the default padding space to display the resizing cursor that appears when shape selection and cropping image. For your requirement, we will expose a property to customize control padding and consider as a feature report. Please find the feedback link below here. 

 

Feedback link: https://www.syncfusion.com/feedback/8702  

 

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have immediate plan to implement this feature since we committed with already planned work. So, this feature will be available any of our upcoming release. 

 

Regards, 

Bharathi.  

[Hendrik Jan Schuurkamp]

This solution to hide the toolbars is not working for me on XamarinForms - Android.

I am trying to hide all toolbars (top and bottom) for the imageEditor and default start with cropping the image within a circle.
Any suggestions?

Thanks,

Hendrik Jan Schuurkamp

            x:Name="editor"

            Grid.Row="0"

            Margin="20"

            Source="{Binding ProfilePictureImageData, Converter={StaticResource byteArrayToImageSourceConverter}}"

            BackgroundColor="Transparent"

            HorizontalOptions="FillAndExpand"

            VerticalOptions="FillAndExpand"

            PanningMode="TwoFinger"

            EnableZooming="True"

            ImageLoaded="SfImageEditor_ImageLoaded"

            ImageSaving="SfImageEditor_ImageSaving">

           

               

           

       

[Eswaran Thirugnanasambandam]

Hi Hendrik Jan Schuurkamp,

We have checked reported query and you can start with cropping section by calling ToggleCropping method in image editor loaded event as per the below code snippet.

And you can remove the all toolbar items by setting false for items in SetToolbarItemVisibility method as per the below code snippet.

Code snippet[C#]: 

  

       public GettingStarted() 

        { 

            InitializeComponent(); 

            imageEditor.SetToolbarItemVisibility("Text, Shape, Brightness, Effects, Bradley Hand, Path, 3:1, 3:2, 4:3, 5:4, 16:9,Original, Free, Ellipse, Square,Circular, Reset,Save, Undo, Redo, Transform", false); 

            imageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() { Text = "" }); 

            imageEditor.ImageLoaded += ImageEditor_ImageLoaded; 

       } 

  

         private void ImageEditor_ImageLoaded(object sender, ImageLoadedEventArgs args) 

        { 

            imageEditor.ToggleCropping(new Rectangle(), true); 

        }
.... 

In above code snippet, we have added one empty toolbar item, for circle cropping section OK and Cancel toolbar layer.

Please have a sample from below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample-265755475

For more information about cropping please refer below link
https://help.syncfusion.com/xamarin/image-editor/crop

Screenshot:
 

Please let us know if you need any further assistance.

Regards,
Eswaran.