Signature Pad for Xamarin and Windows

Signature Pad makes capturing, saving, exporting, and displaying signatures extremely simple.

There are controls for both native apps and Xamarin.Forms apps for most .NET platforms:

  • Xamarin.Android
  • Xamarin.iOS
  • Windows 10 UWP
  • Windows Store 8+
  • Windows Phone 8+

Using Signature Pad

Signature Pad has many features that are easy to use.

Signature Pad can be used with Xamarin.Forms, however this component does not contain those libraries. In order to use Signature Pad with Xamarin.Forms, you can install the "Xamarin.Controls.SignaturePad.Forms" NuGet.

Capturing & Displaying Signatures

The Signature Pad control can be added to your app's view hierarchy using drag-and-drop with the designers or by writing simple code.

On iOS:

var signature = new SignaturePadView () {
    StrokeWidth = 3f,
    StrokeColor = UIColor.Black
};

On Android:

var signature = new SignaturePadView (this) {
    StrokeWidth = 3f,
    StrokeColor = Color.Black
};

On Windows:

var signature = new SignaturePad () {
    StrokeWidth = 3f,
    StrokeColor = Colors.Black
};

Exporting Signature Images

Once the user has written his/her signature, you can export that signature as a native bitmap.

// iOS
UIImage image = signature.GetImage ();

// Android
Bitmap image = signature.GetImage ();

// Windows
WriteableBitmap image = signature.GetImage ();

Exporting Signature Points

If you have to save and restore a user's signature, you can also capture the raw stoke points.

// iOS
CGPoint[] points = signature.Points;
CGPoint[][] strokes = signature.Strokes;

// Android
PointF[] points = signature.Points;
PointF[][] strokes = signature.Strokes;

// Windows
Point[] points = signature.Points;
Point[][] strokes = signature.Strokes;

Importing Signature Points

signature.LoadPoints (points);
signature.LoadStrokes (strokes);

Using Signature Pad with Xamarin.Forms

Signature Pad can be used with Xamarin.Forms, however this component does not contain those libraries. In order to use Signature Pad with Xamarin.Forms, you can install the "Xamarin.Controls.SignaturePad.Forms" NuGet.

Like with the native controls, you can create the views in code, but you can also use XAML:

<ContentPage xmlns:sig="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms">
    <sig:SignaturePadView
        x:Name="signature"
        StrokeWidth="3"
        StrokeColor="Black" />
</ContentPage>

Once you have the control in your app, you can access the signature just like you could with the native controls:

// export the signature bitmap
Stream image = await signature.GetImageStreamAsync (SignatureImageFormat.Png);

// export the raw signature points
Point[] points = signature.Points.ToArray ();

// import the signature points
signature.Points = points;