Customize the Electronic Signatures UI in UWP

The Electronic Signatures UI can be customized to fit your needs.

You can customize aspects such as which signature creation modes are available and in which order, and what signing fonts to offer when creating signatures by typing.

These options are set via the PSPDFKit.Pdf.ElectronicSignatures.SignatureOptions class, which — during creation — can have its CreationModes, Fonts, and ColorPresets set.

Setting Available Signature Creation Modes

SignatureOptions.CreationModes accepts an IEnumerable of ElectronicSignatureCreationMode members. Based on these entries, the UI will display the tabs specified in the IEnumerable, respecting the order in which they were added. It defaults to SignatureOptions.DefaultCreationModes, which includes all three methods: drawing, typing, and using an image..

Here’s an example offering Type, followed by Image, as signature creation modes:

await PDFView.Controller.ShowDocumentWithViewStateAsync(documentSource, new ViewState
{
	ElectronicSignatureOptions = new SignatureOptions() 
   { 
       CreationModes = new []
       {
           ElectronicSignatureCreationMode.Type,
           ElectronicSignatureCreationMode.Image
       }
   }
});

Setting Available Fonts to Sign With

The Fonts property of SignatureOptions accepts an IEnumerable of PSPDFKit.UI.Fonts, defining the fonts presented to the user on the typing tab of the signing UI.

Fonts are loaded through CSS files. When instantiating a Font, you must pass its name and the Uri to the CSS file you’re loading the font in. This CSS file needs to be added to your application’s assets.

PSPDFKit for Windows ships with four signing fonts available out of the box, which are specified in SignatureOptions.DefaultFonts. You can add custom fonts to these, remove them, or mix and match between custom and default fonts.

As an example, if you wanted to use the Cookie font from Google Fonts, you could use the following style sheet:

@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');

A CSS file containing this import must be placed within your project (in this example, cookie.css). Then, you can create the Font when initializing SignatureOptions:

await PDFView.Controller.ShowDocumentWithViewStateAsync(documentSource, new ViewState
{
	ElectronicSignatureOptions = new SignatureOptions() 
   { 
       Fonts = new []
       {
           new Font("Cookie", new Uri("ms-appx-web:///Assets/css/cookie.css"))
       }
   }
});

Setting Available Colors to Sign With

SignatureOptions.ColorPresets accepts an IEnumerable of ColorPresets. Based on these presets, the UI will display the colors available to draw the signature. If a single color is set, the UI won’t display any color options. This defaults to SignatureOptions.DefaultColorPresets, which includes three colors: blue, black, and dark blue.

Here’s an example offering red, green, and blue color presets:

await PDFView.Controller.ShowDocumentWithViewStateAsync(documentSource, new ViewState
{
	ElectronicSignatureOptions = new SignatureOptions() 
    { 
        ColorPresets = new[]
        {
            new ColorPreset(Color.FromArgb(255, 255, 0, 0), "Red"),
            new ColorPreset(Color.FromArgb(255, 0, 255, 0), "Green"),
            new ColorPreset(Color.FromArgb(255, 0, 0, 255), "Blue")
        }
    }
});

CSS Customizations

The Electronic Signatures modal view is highly customizable and flexible. There are multiple public CSS classes prefixed with PSPDFKit-Electronic-Signatures for the UI elements that are part of this feature.

Please refer to the CSS API documentation for a list of the available public CSS classes.

Moreover, you can see our CSS customization guide for more information about how to change CSS in the UWP SDK.