Customize form fields in .NET MAUI PDF Viewer (SfPdfViewer)

17 Jul 20265 minutes to read

The SfPdfViewer allows you to customize the visual appearance of form fields by modifying properties on their Widget objects. A form field can have one or more Widget instances (the visual representations of the field on the page). You can change the background color, foreground (text) color, border color, and border width.

NOTE

Customize the background color

The BackgroundColor property sets the fill color behind the field content. The following example applies a uniform background color to all form fields in the document.

foreach (FormField formField in PdfViewer.FormFields)
{
    foreach (Widget widget in formField.Widgets)
    {
        // Apply a semitransparent blue background (matches the pre-v29.1.33 default).
        widget.BackgroundColor = Color.FromRgba(204, 215, 255, 200);
    }
}

Customize the foreground (text) color

The ForegroundColor property sets the color of the text inside the form field. The following example applies a red text color to all text form fields.

foreach (FormField formField in PdfViewer.FormFields)
{
    if (formField is TextFormField textBoxField)
    {
        foreach (var widget in textBoxField.Widgets)
        {
            widget.ForegroundColor = Colors.Red;
        }
    }
}

Customize the border color

The BorderColor property sets the color of the border drawn around the form field. The following example applies a red border to all text form fields.

foreach (FormField formField in PdfViewer.FormFields)
{
    if (formField is TextFormField textBoxField)
    {
        foreach (var widget in textBoxField.Widgets)
        {
            widget.BorderColor = Colors.Red;
        }
    }
}

Customize the border width

The BorderWidth property sets the thickness of the border around the form field. The following example sets a border width of 2.0 on all text form fields.

foreach (FormField formField in PdfViewer.FormFields)
{
    if (formField is TextFormField textBoxField)
    {
        foreach (var widget in textBoxField.Widgets)
        {
            widget.BorderWidth = 2.0f;
        }
    }
}

Detect widget property changes

In addition to setting widget properties, you can also track when a widget property changes at runtime. The PropertyChanged event on a Widget fires whenever a widget property — such as BorderColor, BackgroundColor, BorderWidth, or ForegroundColor — changes. Subscribe to this event after the document loads.

void SubscribeToWidgetPropertyChanges()
{
    foreach (FormField formField in PdfViewer.FormFields)
    {
        foreach (var widget in formField.Widgets)
        {
            widget.PropertyChanged += Widget_PropertyChanged;
        }
    }
}

private void Widget_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (sender is Widget widget)
    {
        if (e.PropertyName == nameof(widget.BorderWidth))
        {
            double width = widget.BorderWidth;
            // Respond to the border width change.
        }
    }
}

See Also