Ink Annotation in WPF Pdf Viewer

15 Nov 202210 minutes to read

PDF viewer WPF allows the user to include ink annotation in the PDF document and provides options to edit or remove the existing ink annotation in the PDF document.

The following code shows how to switch to ink annotation mode in code behind.

C#

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PdfLoadedDocument pdf = new PdfLoadedDocument("Input.pdf");
    pdfviewer.Load(pdf);
    pdfviewer.AnnotationMode = PdfDocumentView.PdfViewerAnnotationMode.Ink;
}

VBNET

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim pdf As New PdfLoadedDocument(“Input.pdf”)
    pdfViewer.Load(pdf)
    pdfviewer.AnnotationMode = PdfDocumentView.PdfViewerAnnotationMode.Ink
End Sub

The following image shows the ink annotation being included in the PDF Document.

How to set the color of the ink annotation?

The color of the ink annotation included can be customized at the time of inclusion itself. The following code shows how to set color of the ink annotation to be included.

C#

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PdfLoadedDocument pdf = new PdfLoadedDocument("Input.pdf");
    pdfviewer.Load(pdf);
    pdfviewer.InkAnnotationSettings.InkColor = Colors.Green;
}

VBNET

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim pdf As New PdfLoadedDocument(“Input.pdf”)
    pdfViewer.Load(pdf)
    pdfviewer.InkAnnotationSettings.InkColor = Colors.Green
End Sub

How to set the opacity of the ink annotation?

The opacity of the ink annotation can be customized at the time of inclusion itself. The following code shows how to set opacity value of the ink annotation to be included.

C#

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PdfLoadedDocument pdf = new PdfLoadedDocument("Input.pdf");
    pdfviewer.Load(pdf);
    pdfviewer.InkAnnotationSettings.Opacity = 0.5f;
}

VBNET

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim pdf As New PdfLoadedDocument(“Input.pdf”)
    pdfViewer.Load(pdf)
    pdfviewer.InkAnnotationSettings.Opacity = 0.5F
End Sub

How to set the thickness of the ink annotation?

The thickness of the ink annotation can be customized at the time of inclusion itself. The following code shows how to set thickness of the ink annotation to be included.

C#

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PdfLoadedDocument pdf = new PdfLoadedDocument("Input.pdf");
    pdfviewer.Load(pdf);
    pdfviewer.InkAnnotationSettings.Thickness = 5;
}

VBNET

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim pdf As New PdfLoadedDocument(“Input.pdf”)
    pdfViewer.Load(pdf)
    pdfviewer.InkAnnotationSettings.Thickness = 5
End Sub

How to set the author and subject of the ink annotation?

The author and subject fields of the ink annotation can be added for the ink annotation to be added to the PDF document. The follow code shows how to set the author and subject field of the ink annotation to be included.

C#

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PdfLoadedDocument pdf = new PdfLoadedDocument("Input.pdf");
    pdfviewer.Load(pdf);
    pdfviewer.InkAnnotationSettings.Author = "Syncfusion Softwares";
    pdfviewer.InkAnnotationSettings.Subject = "Ink annotation";
}

VBNET

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim pdf As New PdfLoadedDocument(“Input.pdf”)
    pdfViewer.Load(pdf)
    pdfviewer.InkAnnotationSettings.Author = "Syncfusion Softwares"
    pdfviewer.InkAnnotationSettings.Subject = "Ink annotation"
End Sub

Working with included/existing ink annotations

Ink annotation supports adding notes along with it, also it allows editing its color, opacity and thickness. To use these options, select the included/existing ink annotation and click right using mouse, over the selected annotation, a pop up context menu will appear with the following options,

• Open Pop-up note
• Properties
• Delete

Open Pop-up notes

We can add notes to the ink annotation choosing Open Pop-up note option from the context menu. The following image illustrates the notes added to the selected ink annotation. The added notes will be saved along with the PDF document and if there is any existing notes, it will be displayed in here.

Properties

Selecting properties from the context menu will display the Ink Properties window, which would consist of two tabs

• Appearance
• General

Appearance tab

The color, opacity and thickness of the ink annotation can be edited using Appearance tab of Ink Properties window.

Editing the thickness of the ink annotation

Modifying the value in the NumericUpDown control in the Appearance tab of ink annotation properties window will allow us to modify the thickness of the selected ink annotation.

The following image illustrates how to change the thickness of the ink annotation.

The following image illustrates the change in thickness of the selected ink annotation.

Editing color of the annotation

The color of the selected ink annotation will be displayed in the color row in the appearance tab. Selecting the Color would displays the color palette control, choosing a color from the color palette and clicking OK will apply the color to the ink annotation.

The following image illustrates how to change the color of the ink annotation included.

The following image illustrates the change in the color of the ink annotation.

Editing opacity of the annotation

The slider control displayed in the Appearance tab will allow us to modify the opacity of the selected ink annotation. You can also modify the opacity of the selected ink annotation by giving numeric value in the opacity text box.

The following image illustrates how to change the opacity of the ink annotation.

The following image illustrates the change in the opacity of the ink annotation.

General tab

We can add or edit the Author and Subject of the ink annotation using General tab of the Ink Properties window.

The following image illustrates the change in Author and Subject of the included Ink annotation.

Deleting an annotation

Selecting delete option from the context menu which will be displayed by right click on the selected annotation would delete the respective annotation from the PDF document.

The following image illustrates how to delete the included annotation from the PDF document.

Erase ink annotation

The Eraser tool in the toolbar helps you to erase (remove) the unwanted parts in an ink annotation. You can enable the eraser tool by simply clicking the tool.

After the tool is enabled, you can erase the unwanted parts by holding the mouse button down and drag over the parts of an ink annotation.

The Eraser tool can also be enabled programmatically using the AnnotationMode property of the PdfDocumentView and PdfViewerControl. Please refer to the following code.

C#

pdfViewer.AnnotationMode = PdfViewerAnnotationMode.InkEraser;

NOTE

This tool can be used to erase the ink annotation only and not applicable for other annotations.

Events

The PdfViewerControl notifies through events, when AnnotationChangedAction such us adding, deleting, select, deselect, moving and resizing made in annotations. It also provides the annotations common information such as annotation name, page index, bounds and action type performed in respective annotation.

InkAnnotationChanged Event

The InkAnnotationChanged event occurs when the Action performed in ink annotation. It provides the common information and annotation properties which are available in Settings through the InkAnnotationChangedEventArgs. The user can modify the annotation properties through Settings.

The following code shows how to write the InkAnnotationChanged event in PdfViewerControl

C#

private void PdfViewer_InkAnnotationChanged(object sender, InkAnnotationChangedEventArgs e)
{
    //COMMON PROPERTIES
    //AnnotationChangedAction to identify action performed for annotation 
    AnnotationChangedAction action = e.Action;
    //Page index in which this shape annotation was modified 
    int pageNumber = e.PageNumber;
    //Annotation's previous position and current position 
    RectangleF currentBound = e.NewBounds;
    RectangleF previousBound = e.NewBounds;
    PdfViewerInkSettings settings = e.Settings;
    //Annotation's properties which can be modify 
    string author = settings.Author;
    string subject = settings.Subject;
    string Text = settings.Text;
    float opacity = settings.Opacity;
    System.Windows.Media.Color color = settings.InkColor;
    double thickness = settings.Thickness;
}

NOTE

You can refer to our WPF PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our WPF PDF Viewer example to know how to render and configure the pdfviewer.