How To Create A SignaturePad Application Using Xamarin.Forms

Introduction

In this article, we will discuss how to create a SignaturePad Application using Xamarin.Forms. So, let us dive into the article. SignaturePad is used for taking signatures in a digital way, i.e., through electronic devices like mobiles. This is a digital signature used on the docs like PDF, and Word. Now, we will see how to develop a SignaturePad.

Prerequisites

• Windows10
• Visual Studio 2017 any edition can be installed
• Xamarin Package
• SignaturePad nuget package

Step 1

• Open your Visual Studio 2017 Community Edition.
• Go to File -> New -> Project. Then, a new window will appear.
• Then, under Installed, select Visual C# -> Cross-Platform.
• On the right side of the window, select Mobile App (Xamarin.Forms). Then, give the name of the project and save it in your required location.
• Click OK.

Step 2

Now, a new window will open on your screen. Select, Blank App under template, select the platforms .i.e., on which platforms you want to deploy your application. Then, select .NET Standard and click OK.

Step 3

Now, in Solution Explorer, select Portable Class File as a Startup Project.

Step 4

Now, in select explorer, under Portable Class, click on "Manage NuGet Packages".

 
Step 5

Now, in NuGet Package Manager, browse for Xamarin.Controls.SignaturePad.Forms and install the package.

Step 6

Now, open the MainPage.xaml file and the following namespace in it.

XAML Namespace

xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms"

Now, write the following XAML code in it.

XAML Code

<StackLayout>
   <forms:SignaturePadView x:Name="MainSignaturePad"
      BackgroundColor="White"
      StrokeColor="Black"
      StrokeWidth="2"
      WidthRequest="280"
      HeightRequest="360"/>
   <Button x:Name="SaveBtn"
      Text="Save"
      BackgroundColor="Green"
      Clicked="SaveBtn_Clicked"/>
   <Button x:Name="ClearBtn"
      Text="Clear"
      BackgroundColor="Red"
   Clicked="ClearBtn_Clicked"/>
</StackLayout>

In the above code, we have declared StackLayout because we want our UI Design in the form of Stack. Then, we are using SignaturePad View in our application. StrokeWidth indicates the width of the stroke, i.e., when you use the SignaturePad. The width of your signature is set to 2. StrokeColor indicates the color of your stroke, i.e., black, green, yellow,... WidthRequest is used to set the width of your SignaturePad and similarly, we use HeightRequest to set the height of your SignaturePad. Then, we create two buttons one for saving your signature and another one for erasing/undo your signature.

Step 7

Now, open your MainPage.xaml.cs File and write the following code in it. For using the functions of SignaturePad use System.IO.

C# Code

private async void SaveBtn_Clicked(object sender, EventArgs e)
   {
      Stream image = await MainSignaturePad.GetImageStreamAsync(SignaturePad.Forms.SignatureImageFormat.Jpeg);
   }
   private void ClearBtn_Clicked(object sender, EventArgs e)
   {
      MainSignaturePad.Clear();
   }

In SaveBtn you can format the type of the image in it like .jpeg,.png,.jpg.

Step 8

Now, build your application and then deploy it.

 

 

 

 

Step 9

Now, we have successfully developed a SignaturePad application in Xamarin.Forms.