Get Realistic Digital Signatures with the .NET MAUI SignaturePad
Tags: netmaui, mobile, ui, desktop
Published: 2023-03-10 03:17:34

---
title: Get Realistic Digital Signatures with the .NET MAUI SignaturePad
published: true
date: 2023-03-09 11:30:00 UTC
tags: netmaui, mobile, ui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-signaturepad.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exer7i7rn3a49m8hr1vw.png
---
Digital signatures have become increasingly important in today’s world, where electronic documents are widely used.

Syncfusion’s [.NET MAUI SignaturePad](https://www.syncfusion.com/maui-controls/maui-signaturepad "Syncfusion .NET MAUI SignaturePad") control is a user interface tool for capturing and storing signatures on mobile applications. Its simple yet essential functions allow users to save and export signatures.

In this blog, we will highlight the key features of the .NET MAUI SignaturePad control and how to get started with it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Syncfusion-.NET-MAUI-Signature-Pad-Control-2.png" alt="Syncfusion .NET MAUI Signature Pad Control" style="width:100%">

  <figcaption>Syncfusion .NET MAUI Signature Pad Control</figcaption>

</figure>

## .NET MAUI Signature Pad

The .NET MAUI Signature Pad control is user-friendly and customizable, enabling developers to tailor it to their specific needs.

It has the following key features:

- Supports customizing the stroke thickness and color and performing clear and undo operations.
- Easily captures signatures using touchscreens with touch gestures.
- Saves drawn signatures as an images and embeds them into PDFs and other documents with formats that support image signatures.
- Its unique stroke-rendering algorithm considers the speed of drawn gestures to produce a more authentic, handwritten look and feel to the signature.

![Digital signature created using .NET MAUI SignaturePad](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Digital-signature-created-using-.NET-MAUI-SignaturePad.gif)Overall, these features make the .NET MAUI SignaturePad control an essential tool for developers looking to integrate signature-capturing functionality into their apps.

## Getting Started with the .NET MAUI SignaturePad

Let’s see how to incorporate the .NET MAUI SignaturePad control into your project and customize its basic features.

**Step 1:** First, [create a new .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Creating a New .NET MAUI application") in [Visual Studio](https://visualstudio.microsoft.com/vs/ "Visual Studio").

![Create a new .NET MAUI application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Create-a-new-.NET-MAUI-application.png)

**Step 2:** Syncfusion .NET MAUI components are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the **SfSignaturePad** to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.SignaturePad](https://www-0.nuget.org/packages/Syncfusion.Maui.SignaturePad "Syncfusion.Maui.SignaturePad NuGet Package"), and install it.

![Install the Syncfusion.Maui.SignaturePad NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Install-the-Syncfusion.Maui_.SignaturePad-NuGet-package.png)

**Step 3** : In the **MauiProgram.cs** file, register the handler for Syncfusion Core.

```csharp
using Syncfusion.Maui.Core.Hosting; 
namespace SignaturePadGettingStarted 
{ 
  public static class MauiProgram 
  { 
    public static MauiApp CreateMauiApp() 
    { 
      var builder = MauiApp.CreateBuilder(); 
      builder 
        .UseMauiApp<App>() 
        .ConfigureSyncfusionCore() 
         .ConfigureFonts(fonts => 
         { 
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
         }); 
         return builder.Build(); 
    } 
  } 
}
```

**Step 4** : Then, import the **Syncfusion.Maui.SignaturePad** namespace and initialize the SignaturePad as shown in the following code.

```xml
<ContentPage . . . xmlns:signaturePad="clr-namespace:Syncfusion.Maui.SignaturePad;assembly=Syncfusion.Maui.SignaturePad"> 
 <Grid> 
  <signaturePad:SfSignaturePad /> 
 </Grid> 
</ContentPage>
```

**Step 5** : Here, we’ll customize the stroke color of the SignaturePad control using the **StrokeColor** property. The default stroke color is **Colors.Black**.

```xml
<signaturePad:SfSignaturePad StrokeColor="Blue" />
```

**Step 6** : We customize the thickness of the stroke by setting the **MinimumStrokeThickness** and **MaximumStrokeThickness** properties. The strokes will be drawn based on the speed and impression we provide through gestures within the minimum and maximum stroke thickness range. This way, the signature will be more realistic.

Refer to the following code example.

```xml
<signaturePad:SfSignaturePad MinimumStrokeThickness="1" MaximumStrokeThickness="6" />
```

**Step 7** : Finally, let’s save the signature drawn in the SignaturePad as an image using the **ToImageSource()** method. The stored signature image can further be synchronized with our devices and documents that need the signature.

Refer to the following code example.

```xml
<signaturePad:SfSignaturePad x:Name="signaturePad" /> 
<Button Text="Save" Clicked="OnSaveButtonClicked" />
```

```csharp
private void OnClearButtonClicked(object? sender, EventArgs e) 
{ 
   ImageSource? source = signaturePad.Clear(); 
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Signature-Saved-Using-.NET-MAUI-Signature-Pad.png" alt="Signature Saved Using .NET MAUI Signature Pad" style="width:100%">

  <figcaption>Signature Saved Using .NET MAUI Signature Pad</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we have seen the significant features of the Syncfusion [.NET MAUI Signature Pad](https://www.syncfusion.com/maui-controls/maui-signaturepad "Syncfusion .NET MAUI Signature Pad") control. Try out this user-friendly control and share your feedback in the comments section below.

Also, check out our .NET MAUI control [demos on GitHub](https://github.com/syncfusion/maui-demos "Syncfusion .NET MAUI controls GitHub demo").

Customers can download the latest Essential Studio version from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Syncfusion Essential Studio") page. If you are not a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Sycfusion Essential Studio") to see how our controls can enhance your projects.

For questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/home "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Design a Group Box View in .NET MAUI](https://www.syncfusion.com/blogs/post/group-box-view-in-dotnet-maui.aspx "Blog: Easily Design a Group Box View in .NET MAUI")
- [Exploring the Features of the .NET MAUI Calendar Control](https://www.syncfusion.com/blogs/post/dotnet-maui-calendar.aspx "Blog: Exploring the Features of the .NET MAUI Calendar Control")
- [OCR in .NET MAUI: Building an Image Processing Application](https://www.syncfusion.com/blogs/post/ocr-in-net-maui-building-an-image-processing-application.aspx "Blog: OCR in .NET MAUI: Building an Image Processing Application")
- [Designing Effective Data Entry Forms in .NET MAUI: A Step-by-Step Guide](https://www.syncfusion.com/blogs/post/designing-effective-data-entry-forms-in-net-maui-a-step-by-step-guide.aspx "Blog: Designing Effective Data Entry Forms in .NET MAUI: A Step-by-Step Guide")