Delpin Susai Raj Thursday, 26 October 2017

Create an SignaturePad in Xamariin.Forms

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 Signature Pad in Xamarin.Forms, using Visual Studio.

Step 1

Click File--> select New--> select 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 from the app; a name (Ex: sample) and give the path of your project. Afterwards, click OK.


Step 3

Now, choose Blank App and select forms PCL(sharing). Afterwards, click OK.

Step 4

Now, Select Target version And Minimum version.for UWP.


Step 5

In this step, Add Signature Pad Nuget Package for your project.
  • Xamarin.Controls.SignaturePad.Forms
Go to Solution Explorer-->Select Your Solution-->Right click--Select Manage NuGet Packages for Solution.

Step 6

Now Select following Nuget Package. and Install it.
  • Xamarin.Controls.SignaturePad.Forms.

Step 7

In this step Read the Licence and agreement. select I Accept.

Step 8

In this step add signature pad control to your app.

Go to Solution Explorer-->Double click MainPage.xaml
After open this you can add signature pad control for your app.

Step 9

In this step add signature pad assembly to your project.

MainPage.xaml

<contentpage x:class="XamarinSignaturePad.MainPage" xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns="http://xamarin.com/schemas/2014/forms">
</contentpage>
view raw MainPage.xaml hosted with ❤ by GitHub



Step 10

In this step, go to the MainPage.xaml page and write the code given below.

MainPage.xaml

<contentpage x:class="XamarinSignaturePad.MainPage" xmlns:forms="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns="http://xamarin.com/schemas/2014/forms">
<forms:signaturepadview backgroundcolor="White" heightrequest="350" strokecolor="Black" strokewidth="3" widthrequest="250">
</forms:signaturepadview></contentpage>
view raw MainPage.xaml hosted with ❤ by GitHub



Step 11

If you have Android Emulator, you can run it. If you don't have it, simply run UWP 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.



Summary

This was the process of how to Create a signature pad in Xamarin.Forms, using Visual Studio.

Please share comments and feedback.

No comments:

Post a Comment