How to create a signaturepad in Xamarin Forms

Are you looking for ways to get the signature of your users from your Xamarin project? Wondering how to implement it on your iOS and Android app?

In this post, you will learn how to create a signaturepad on your Xamarin Forms in easy steps.

SignaturePad.Forms Nuget makes capturing, saving, exporting, and displaying signatures extremely simple in Xamarin native and Xamarin Forms.

Step 1

The first step is to right-click on your Solution. Then go to Manage NuGet Packages for Solution.

 

Step 2

Type SignaturePad Xamarin Forms then look for Xamarin.Controls.SignaturePad.Forms by Xamarin, Inc.

SignaturePad Xamarin Forms

 

Step 3

Install it in all of your projects (PCL, Android, iOS, UWP)

 

Step 4

Add the xmlns namespace of SignaturePad library.

 

Step 5

Start adding the SignaturePad View on your XAML file.

There’s a ton of properties and methods that you can see in SignaturePad. Try to look each one of them to get familiarized with the library.

 

If you want to see the source code of this demo, please go to the link below.

Online repository of this demo: https://github.com/webmasterdevlin/SignaturePad-Xamarin-Forms-Sample

 

Step 6

And lastly for the demo, here’s what you can see if you deploy it on your emulator or real device. This is a service-agreement use case demo.

There’s a default click event, named clear, that you will see in the upper-right corner of your SignaturePadView. It clears out your signature if tapped. This is helpful if your user is not satisfied on his first attempt of signing his name on the pad.

 

To sum up, implementing SignaturePad in your Xamarin Forms projects is not that complicated. You can get it done in just 10 to 15 minutes.

Here’s also a good article related to SignaturePad, titled Prevent Xamarin Forms SignaturePad Memory Leak on Android.

See you on my next blog post. Happy coding!

3 Comments

  • Liem Nguyen

    Thank you for your blog!
    How to show it on Image control?

    • Devlin

      Overlay it on your Image through a GridLayout. Then set the SignaturePadView’s BackgroundColor to Transparent. Hope this helps.

  • Bry Flores

    Thank you sir. This article would definitely help me in my journey 🙂

Post A Comment