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 capture and save signature using the image editor

Platform: WPF |
Control: SfImageEditor

This section explains how to capture and save your signature using the WPF image editor.

Follow the below steps to capture signature without using default image editor toolbar.

Step 1: Initialize the image editor control as in the below code snippet.

XAML

  <editor:SfImageEditor x:Name="editor" >
 </editor:SfImageEditor>

 

Step 2: Disable the default toolbar visibility using the below code snippet.

XAML

            <editor:SfImageEditor.ToolbarSettings>
                <editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings>
            </editor:SfImageEditor.ToolbarSettings>
 

 

Step 3: To add signature, you need to add path on loading the image editor, hence invoke the Loaded event as in the below snippet.

XAML

<editor:SfImageEditor x:Name="editor" Loaded="SfImageEditor_Loaded">
            <editor:SfImageEditor.ToolbarSettings>
                <editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings>
            </editor:SfImageEditor.ToolbarSettings>
        </editor:SfImageEditor>

 

Add ShapeType as path in the loaded event as in the below snippet to enable the signature pad  in the image editor.

Signature pad accepts both handwritten (in case of touch) and mouse pointer input.

You can customize the signature stroke and width using the properties in PenSettings as in the below snippet.

C#

  /// <summary>
        /// Invoked when <see cref="SfImageEditor"/> is loaded.
        /// </summary>
        /// <param name="sender">Image editor</param>
        /// <param name="e">event arguments</param>
        private void SfImageEditor_Loaded(object sender, RoutedEventArgs e)
        {
            var imageEditor = sender as SfImageEditor;
            imageEditor.AddShape(ShapeType.Path, new PenSettings() { Stroke = new SolidColorBrush(Colors.Red), PathStrokeWidth = 3 });
        }

 

Step 4 : Draw your signature on the image editor either using your finger or with the mouse.

Step 5: To save the signature, use Save() method dynamically in a button click.

C#

/// <summary>
        /// Invoked when save button is clicked.
        /// </summary>
        /// <param name="sender">Save button</param>
        /// <param name="e">event arguments.</param>
        private void Save_Click(object sender, RoutedEventArgs e)
        {
            editor.Save();
        }

 

Step 6: To clear the existing and create a new signature, using Reset() method and add a new path as in the below code snippet.

C#

/// <summary>
        /// Invoked when clear button is clicked.
        /// </summary>
        /// <param name="sender">Clear button</param>
        /// <param name="e">event arguments</param>
        private void Clear_Click(object sender, RoutedEventArgs e)
        {            
            editor.Reset();
            editor.AddShape(ShapeType.Path, new PenSettings());
        }

 

Screenshot:

Hand written signature.

Sample for creating and saving signature using image editor can be referred here.

2X faster development

The ultimate WPF 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