How to capture and save signature using the image editor
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:
Sample for creating and saving signature using image editor can be referred here.
