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 create signature pad using imageeditor?

Platform: Xamarin.Forms |
Control: SfImageEditor

This section explains how to  create signature pad using imageeditor.

 Create SfImageEditor sample with all necessary assemblies.

 Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.

 

https://help.syncfusion.com/xamarin/sfimageeditor/getting-started

 

Please refer the below steps to create signature pad with toolbar and without using toolbar

 

 

Without using toolbar:

 

Step 1: To create signature pad, you need to set toolbar visibility to false in image editor as like below code snippet

 

 
signatureEditor.ToolbarSettings.IsVisible = false;
 

 

 

Step 2: To add signature in image editor, you need to set Add Shape as path when loading image editor   in sample as like below

 

  
  Device.StartTimer(TimeSpan.FromMilliseconds(1000), () =>
                {
                    signatureEditor.AddShape(ShapeType.Path, new PenSettings());
                    return false;
                });
    

 

Step 3: To save the signature, you need to call save method in button click.

 

 
     void Save_Clicked(object sender, System.EventArgs e)
        {
            signatureEditor.Save(".png");        
         
        }
 
 

 

 

Step 4: To get the stream of saved signature, need to call image saving event as like below

 

  
SignatureEditor.ImageSaving += (sender, args) =>
            {
                args.Cancel = true;
               var stream = args.Stream;
            }
 

 

Step 5: To clear the signature, you need to call reset method in button click as like below

 

private void Reset_Clicked(object sender, EventArgs e)
        {
            signatureEditor.Reset();
          
        }

 

 

Screen Shot:

 

CCreated a signature pad without using toolbar in SfImageEditor.

Sample Link:

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample1244809765.zip

 

Using Toolbar:

 

Step 1: Select path or draw icon to add signature in image editor

 

Step 2: Select Save toolbar item to save the signature.

 

Step 3: To get the stream of saved signature, need to call image saving event as mentioned in above step 4.

 

Step 4: To clear the signature, you need to select reset toolbar item.

 

 

Screen Shot:

 

Created a signature pad using toolbar in SfImageEditor.

 

 

Sample Link:

 

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample-1627803997.zip

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Seshasrinivas Velichety
19 hours ago

Hi there,

I'm trying to use this example. However, my SfImageEditor is in Data template of popupview as shows below. I need to add this one- signatureEditor.AddShape(ShapeType.Path, new PenSettings()).

None of the events on SfImageEditor seem to fire. Any suggestions on how to make it work?

        <sfPopup:SfPopupLayout.PopupView>
            <sfPopup:PopupView x:Name="popupView" AnimationMode="Zoom" AcceptCommand="{Binding PopupAcceptCommand}"
                               AcceptButtonText="SAVE" DeclineButtonText="CANCEL" ShowHeader="False" ShowCloseButton="False"
                               >
                <sfPopup:PopupView.ContentTemplate>
                    <DataTemplate>
                             <image:SfImageEditor x:Name="imageEditor" ImageSaving="SfImageEditor_ImageSaving" Focused="imageEditor_Focused"  
                                             ImageSaved="SfImageEditor_ImageSaved" BeginReset="imageEditor_BeginReset" ImageLoaded="imageEditor_ImageLoaded"/>   

                    </DataTemplate>
                </sfPopup:PopupView.ContentTemplate>
Reply
Seshasrinivas Velichety
19 hours ago

Also I tried setting the Image as follows

<image:SfImageEditor Source="{Binding Image}" x:Name="imageEditor" ImageSaving="SfImageEditor_ImageSaving" Focused="imageEditor_Focused"
ImageSaved="SfImageEditor_ImageSaved" BeginReset="imageEditor_BeginReset" ImageLoaded="imageEditor_ImageLoaded"/>

and image is set to null as follows private ImageSource image; public ImageSource Image { get => image; set => SetValue(ref image, value); }

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