The All New Xamarin.Forms Signature Pad Control Is Here! | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (27).NET MAUI  (233)Angular  (117)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (244)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (74)Flutter  (140)JavaScript  (227)Microsoft  (121)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (991)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)Word  (9)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (154)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (694)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (530)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (426)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (648)What's new  (354)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
The All New Xamarin.Forms Signature Pad Control Is Here!

The All New Xamarin.Forms Signature Pad Control Is Here!

Nowadays, many mobile apps need a user interface that allows users to capture, save, and export signatures. We at Syncfusion understand the requirement for this simple, but essential control and now we are happy to deliver the unique Xamarin.Forms Signature Pad control. This control is available with our Essential Studio for Xamarin.Forms 2020 Volume 2 release.

In this blog post, we will summarize the key features of this Xamarin.Forms Signature Pad control. This control is also available for Xamarin.Android and Xamarin.iOS platforms.
Xamarin.Forms Signature Pad Control

Let’s have a look at them!

Feels like a real pen

The Xamarin.Forms Signature Pad control displays a signature path that varies based on the writing speed, which provides users the feel of a real pen.

In the following image, the left one was captured using a normal signature editor, but the right one was captured using our Syncfusion Signature Pad control. Here, you can see that the stroke path varies based on the user’s writing acceleration.

Difference between Normal Signature Editor and Xamarin Signature Pad control
Difference between Normal Signature Editor and Syncfusion Signature Pad control

Stroke customization

The Signature Pad control allows you to customize the stroke width and color of your signature like in the following image.

Xamarin.Forms Signature Pad control with custom stroke color
Xamarin.Forms Signature Pad control with custom stroke color

Capture and save signature in a PDF file using PDF Viewer

The following steps will help you add the Signature Pad control to your application, record the signature, and add it to a PDF document using the PDF Viewer control.

Step 1: The Syncfusion Xamarin component libraries are available in To add SfSignaturePad to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Xamarin.SfSignaturePad, and then install it.

Step 2: Now, let’s add the SfPdfViewer reference from To add the PDF Viewer to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Xamarin.SfPdfViewer, and then install it.

Step 3: The Signature Pad control and PDF Viewer can be configured entirely in C# or in XAML. Here, we are going to add these controls in XAML. Then, add the namespaces in the XAML file as shown in the following code example.



Step 4: Create instances for SfSignaturePad and SfPdfViewer.

<sfsignaturepad:SfSignaturePad />

Step 5: I am going to place the PDF Viewer control on top to display the PDF document and the signature UI with a button placed at the bottom. To achieve this, I am going to use the DataGrid control.

Refer to the following code example.

<RowDefinition Height="*"/>
<RowDefinition Height="200"/>

<RowDefinition Height="50"/>
<sfpdfviewer:SfPdfViewer x:Name="sfPdfViewer"/>
<sfsignaturepad:SfSignaturePad x:Name="sfSignaturePad" Grid.Row="1" />
<button Grid.Row="2" Text="Save" Clicked="Save_Clicked"/>

Step 6: The Save method of the Signature Pad control captures the strokes in the control and saves them to the ImageSource property.

So, in a button click event, call the Save method and get the image from the ImageSource property of the SfSignaturePad. Use the AddStamp method of the PDF Viewer instance to place the signature on the PDF document.

Refer to the following code example.

private void Save_Clicked(object sender, EventArgs e)
sfPdfViewer.AddStamp(sfSignaturePad.ImageSource, 1, new Point(250, 850));

PDF document with signature captured using Xamarin.Forms Signature Pad
PDF document with signature captured using Xamarin.Forms Signature Pad


In this blog post, we have walked you through the  Syncfusion Xamarin.Forms Signature Pad control available in the 2020 Volume 2 release. With this control, you can easily add a signature pad UI to your application.

You can always download our free evaluation to see all our controls in action. Explore our samples available on Google Play and the Microsoft Store. Learn about the controls’ advanced features in our documentation.

If you have any questions about these controls, please let us know in the comments below. You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

If you enjoyed this blog, we think you will also like:

[Blog] 4 New Features You Must Try in Xamarin.Forms 4.5

[Blog] Sneak Peek at 2020 Volume 2: Xamarin.Forms

[Blog] Here are the World’s First and Only UI Controls for Xamarin.Forms WPF

[Blog] 5 Different Ways To Visualize A Color Picker Control in Xamarin.Forms

[Ebook] Xamarin.Forms Succinctly


Share this post:

Comments (4)

I am trying to evaluate your signature control. I am using the non registered version. I am using the latest Visual Studio 2019, with the latest Xamarin Forms and Xamarin Essentials. On both UWP and iOS 14 the signature pad doesn’t capture any points and the Save button is not visible. I didn’t see any other options to turn on drawing.

My background color is grey and the stroke color is yellow.

Should SfSignaturePad show points with a mouse down in UWP or a mouse down in the iOS simulator?
Do I need to use a certain version of Xamarin Forms with SfSignaturePad?

Selva Ganapathy Kathiresan
Selva Ganapathy Kathiresan


Thank you for evaluating our SignaturePad Control.

Currently Xamarin.Forms SignaturePad supports only in Android and iOS platform, we didn’t extend our support in UWP. you can find our controls cross-platform support here

regarding iOS, Can you please confirm did you initialize the renderer as below?

Selva Ganapathy K

Could You please tell me that, is there a way to set already existing image(signature) to sfsignaturepad….

Selva Ganapathy Kathiresan
Selva Ganapathy Kathiresan

Hi Heshani,

Currently, we don’t have the option to load the existing image to SfSignaturePad. Can you try our SfImageEditor? Hope this component may help to achieve your requirement.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed