Set Toolbar distances

[Ganesh Gebhard]

Hey!

I have the top toolbar in my app set as follow:

I want the Reset all the way to the left, Save in the middle and Retake all the way to the right (with some padding from the sides). How can I do thi

[Eswaran Thirugnanasambandam]

Hi Ganesh,

The SfImageEditor control does not have direct support for arranging the toolbar label position. However, you can achieve your requirement by hiding the built-in toolbar and integrating a custom toolbar into the SfImageEditor. We have achieved your requirement by adding three labels (Reset, Save, and Retake) with tap gestures in a grid. Please find the attached sample for reference.

If your requirement is different from this, please revert with more details about your requirement. It will assist us in providing an appropriate solution as soon as possible.

Regards,

Eswaran.

Attachment: Image_Editor_45e20f6b.zip

[Ganesh Gebhard]

Hey Eswaran,

You suggestion does work, but it also poses some new issues.

- The crop function does not work, though I used editor.Crop()

When I press it, nothing happens.

- Image saving is not working completely in my case, since I don't save directly to a phone but the image is sent to a server. I'm using the args.stream and from that I work everything out.

I cannot do this with a button, since that is an EventArgs. 

How can I fix this?

Best,

[Vishal Omprasad]

Regarding The crop function does not work, though I used editor.Crop():

You have to select the area/region for cropping first, by calling the ToggleCropping() method. After selecting the required area/region that you have to crop, then call the Crop() method. We have modified our previously shared sample to achieve this requirement. In our sample we have added a label (Select Cropping Region) additionally with a tap gesture and one button (Crop) which is invisible at first. When the Select Cropping Region label is tapped, the editor.ToggleCropping() is called and the Crop button is set to visible. After choosing the required area, click the Crop button which calls editor.Crop() method and the image will be cropped. We have also added the output video in the below sample for your reference.

Please refer the following user guidance link to know more about cropping in SfImageEditor - https://help.syncfusion.com/xamarin/image-editor/crop

Regarding Image saving is not working completely in my case, since I don't save directly to a phone but the image is sent to a server. I'm using the args.stream and from that I work everything out:

The image saving works perfectly fine. We have modified our previous sample to achieve your requirement which is attached below. The sample includes the use of the ImageSaving event and the setting of the Cancel property of the ImageSavingEventArgs to true. This will allow you to control the image save functionality and send the image stream to the server instead of saving it directly to the phone. So, after running the sample, when you tap the Save label, the editor.Save() method will be called and in the ImageSaving event, saving the image in the respective local device will be restricted and the image's stream will be get. We have also added the output video in the below sample for your reference.

Please refer to our user guidance link to know more about saving the image in SfImageEditor - https://help.syncfusion.com/xamarin/image-editor/save

Attachment: ImageEditor_Sample_c5f6d19b.zip