Xamarin Forms Using SignaturePad – Get Image and Base64 value

  • by
xamarin-forms-signature-pad-form-design

Xamarin forms SignaturePad example:
In this post we will integrate SignaturePad control with Xamarin forms application. Once the signature is captured, we will convert it into an image and display it on Image control and also we will convert signature’s value into base64 string. This can be useful when we have to upload an image on the server or give base64 image value to a Web API. So let’s begin.

DOWNLOAD SOURCE CODE.

In your Xamarin forms project install the following nuget package: Xamarin.Controls.SignaturePad.Forms

Xamarin-Forms-Controls-SignaturePad-Forms

This package will help us in capturing the user signature.

Create a xaml layout page in your app with name SignatureSample.xaml and edit it as given below. The page contains a Signature pad control for taking signature from users, a button to submit the signature, an ImageView for displaying the given signature and a Label control for display the base64 value of the signature.

xamarin-forms-signature-pad-form-design

SignatureSample.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.SignatureSample"
xmlns:signature="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms">
<ContentPage.Content>
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Padding="10">

<signature:SignaturePadView x:Name="signature" HorizontalOptions="FillAndExpand" StrokeColor="Blue"
VerticalOptions="StartAndExpand" HeightRequest="300" MinimumHeightRequest="300" />

<Button x:Name="btnSubmit" Text="Submit Signature" HorizontalOptions="FillAndExpand"
VerticalOptions="Start" Visual="Material" Clicked="BtnSubmit_Clicked"/>

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="210"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>

</Grid.RowDefinitions>
<Image x:Name="imgSignature" Grid.Row="0" Grid.Column="0" HeightRequest="200" WidthRequest="200"
Margin="2" VerticalOptions="Start" HorizontalOptions="Start"/>

<Label Text="Base64 string of Signature" Margin="2" VerticalOptions="Start" HorizontalOptions="Start"
Grid.Row="1" Grid.Column="0"/>
<Label x:Name="lblBase64Value" Grid.Row="2" Grid.Column="0" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Margin="2"/>
</Grid>

</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

SignatureSample.xaml.cs:

using System;
using System.IO;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamSample
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SignatureSample : ContentPage
{
public SignatureSample ()
{
InitializeComponent ();
}

private async void BtnSubmit_Clicked(object sender, EventArgs e)
{
try
{
var image = await signature.GetImageStreamAsync(SignaturePad.Forms.SignatureImageFormat.Png);
var mStream = (MemoryStream)image;
byte[] data = mStream.ToArray();
string base64Val = Convert.ToBase64String(data);
lblBase64Value.Text = base64Val;
imgSignature.Source = ImageSource.FromStream(()=> mStream);

}
catch(Exception ex)
{
await DisplayAlert("Error", ex.Message.ToString(), "Ok");
}
}
}
}

Once you signed and press on the submit button, the click function will be called and it will obtain an image stream from the signature pad control. I’m using SignaturePad.GetImageStreamAsync function of the package to get ImageStream. This stream is converted into MemoryStream and in byte[] array.

xamarin-forms-signature-pad-output-with-base64

You can download the source code for free for your reference.

DOWNLOAD SOURCE CODE.
Thank you.

Also see:

Xamarin forms Creating Action Sheets

Xamarin forms MVVM Binding CommandParameter to Command

Xamarin forms SQLite database – Performing CRUD operations

Xamarin forms creating and using SQLite database

Xamarin forms using Google Maps

Xamarin forms using Camera – saving Images to Gallery

Xamarin Forms Creating a Simple ListView

Xamarin Forms MVVM ListView ItemSource Binding

Xamarin forms Create HTML formatted Label