How to Use the .NET MAUI Image Editor (SfImageEditor) as a Signature Pad?

The Syncfusion® .NET MAUI Image Editor (SfImageEditor) allows you to utilize the Image Editor as a signature pad, enabling users to create digital signatures. Here’s how to implement this functionality.

XAML:

Initialize the Image Editor control and set up buttons for saving and canceling the signature. Use the ImageLoaded event to manage these actions.

<Grid RowDefinitions="0.9*,0.1*" ColumnDefinitions="0.5*,0.5*">
   <imageEditor:SfImageEditor x:Name="imageEditor" Grid.ColumnSpan="2" Source="image.png">
   </imageEditor:SfImageEditor>
   <Button Text="Cancel" 
           CornerRadius="2" Clicked="Cancel_Clicked"
           BorderWidth="3" BackgroundColor="CadetBlue"
           Grid.Row="1"
           HorizontalOptions="Center" 
           VerticalOptions="Center"/>
   <Button Text="Save" 
           CornerRadius="2" Clicked="Save_Clicked"
           BorderWidth="3" BackgroundColor="CadetBlue"
           Grid.Row="1" Grid.Column="1"
           HorizontalOptions="Center" 
           VerticalOptions="Center"/>
</Grid>

C#:

Use the ImageLoaded event to set the AnnotationShape as Pen using AddShape method, you can use the Image Editor as a signature pad.

private void imageEditor_ImageLoaded(object sender, EventArgs e)
{
   imageEditor.AddShape(AnnotationShape.Pen);
}

private void Cancel_Clicked(object sender, EventArgs e)
{
   imageEditor.CancelEdits(); // Cancels the edits made on the signature pad
}

private void Save_Clicked(object sender, EventArgs e)
{
   imageEditor.SaveEdits(); // Saves the edits made on the signature pad
}

Output:

Conclusion:

I hope you enjoyed learning how to use Image Editor as a signature pad with the .NET MAUI Image Editor (SfImageEditor).

Refer to our .NET MAUI Image Editor feature tour page for other groundbreaking feature representations. You can also explore our .NET MAUI Image Editor documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Image Editor and other .NET MAUI components.

Please let us know in the following comment section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!