Customization of SignaturePad

21 Jul 20261 minute to read

This section explains how to customize the appearance of the .NET MAUI SignaturePad control. The following aspects of the SignaturePad can be customized:

  • Stroke color
  • Stroke thickness

Prerequisites

Before using the SfSignaturePad, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.SignaturePad

For a step-by-step setup, refer to the Getting Started documentation.

Stroke Color

Customize the stroke color of the SignaturePad control by setting the StrokeColor property. The default stroke color is Colors.Black.

<signaturePad:SfSignaturePad StrokeColor="Red" />
SfSignaturePad signaturePad = new SfSignaturePad()
{
    StrokeColor = Colors.Red,
};
this.Content = signaturePad;

SignaturePad stroke color

Stroke Thickness

The thickness of the stroke can be customized by setting the MinimumStrokeThickness and MaximumStrokeThickness properties. Both properties accept double values.

NOTE

Ensure that the value of MaximumStrokeThickness is greater than or equal to MinimumStrokeThickness; otherwise, the rendered stroke thickness is undefined.

The MinimumStrokeThickness defines the minimum thickness of the stroke, while the MaximumStrokeThickness defines the maximum thickness of the stroke.

The actual stroke thickness is dynamically computed based on the speed and pressure of the user’s gesture. Faster gestures render closer to MinimumStrokeThickness, and slower gestures render closer to MaximumStrokeThickness. This produces a more realistic signature.

<signaturePad:SfSignaturePad MinimumStrokeThickness="1"
                             MaximumStrokeThickness="6" />
SfSignaturePad signaturePad = new SfSignaturePad()
{
    MinimumStrokeThickness = 1,
    MaximumStrokeThickness = 6,
};
this.Content = signaturePad;

SignaturePad stroke thickness

See Also