Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows Phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites
  • Visual Studio 2017
The steps given below are required to be followed in order to create a Signature Pad in Xamarin.Forms, using Visual Studio.

Step 1

Click File--> New--> Project. The project needs to be clicked after opening all the types of the projects in Visual Studio or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Cross-Platform-->choose Cross-Platform App. Now, give your Xamarin.Forms app a name (Ex: sample) and give the path of your project. Afterwards, click OK.



Step 3

Choose Blank App and select Xamarin.forms and PCL (sharing) as shown in below screenshot. Afterwards, click OK.



Step 4

Now, select the target version and minimum version.for UWP.



Step 5

In this step, add the following Signature Pad NuGet Package for your project.
  • Xamarin.Controls.SignaturePad.Forms
Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for Solution".



Step 6

Now, select the following NuGet package and install it.
  • Xamarin.Controls.SignaturePad.Forms.

Step 7

In this step, read and agree to the license and agreement. Select "I Accept".



Step 8

In this step, add a Signature Pad control to your app. Go to Solution Explorer and double click on MainPage.xaml.

After opening this, you can add signature pad control to your app.



Step 9

In this step, add a signature pad assembly to your project.

MainPage.xaml
  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" x:Class="XamarinSignaturePad.MainPage">
  2. </ContentPage>


Step 10

Go to the MainPage.xaml page and write the code given below.

MainPage.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" x:Class="XamarinSignaturePad.MainPage">
  3. <forms:SignaturePadView BackgroundColor="White" WidthRequest="250" HeightRequest="350" StrokeColor="Black" StrokeWidth="3" />
  4. </ContentPage>


Step 11

If you have Android Emulator, you can run it. If you don't have it, simply run UWP on Local Machine.



Output

After a few seconds, the app will start running on your Android Emulator or Local machine. You can put a signature in your app. It will work successfully.



For Android Emulator.



Summary

This was the process of creating a Signature Pad in Xamarin.Forms, using Visual Studio. Please share your comments and feedback.