To open the annotation toolbar

14 Dec 20233 minutes to read

To Open the annotation toolbar, click on the Edit Annotation option in the mobile primary toolbar. The mobile annotation toolbar will open at bottom of the viewer.

Mobile Annotation Toolbar in Blazor SfPdfViewer

To add sticky notes annotation

Click the Sticky Note Annotation icon and then click anywhere in the viewer to add the sticky notes.

Click Sticky Note icon in Blazor SfPdfViewer

This action will open the comment panel, allowing you to add the required comment for the added sticky notes.

Sticky Note Annotation added in Blazor SfPdfViewer

To add text markup annotation

Long-press to select any text in the PDF, then click on any Text Markup Annotation in the annotation toolbar.

Select Text in Blazor SfPdfViewer

This action will display the required properties for this annotation in the toolbar.

Select Text in Blazor SfPdfViewer

To add shape annotation

Click the Shape Annotation icon in the toolbar. It will display the supported shape annotations.

Click Shape Icon in Blazor SfPdfViewer

Choose any annotation type from the list, then click and drag anywhere in the viewer to add the annotation.

Select Particular Shape in Blazor SfPdfViewer

The toolbar will also switch to display the properties that is required for the added annotation.

Draw Shape in Blazor SfPdfViewer

To add measure annotation

Click the Measure Annotation icon in the toolbar. It will display the supported measure annotations.

Click Measure Icon in Blazor SfPdfViewer

Choose any annotation type from the list, then click and drag anywhere in the viewer to add the annotation.

Select Particular Measure in Blazor SfPdfViewer

The toolbar will also switch to display the properties that is required for the added annotation.

Draw Measure in Blazor SfPdfViewer

To add free text annotation

Click the Free Text Annotation icon in the toolbar. Which will display the properties that is required for free text.

Click Free Text Icon in Blazor SfPdfViewer

Click anyWhere in the viewer to add the free text annotation.

Add Free Text in Blazor SfPdfViewer

To add stamp annotation

Click on the Stamp Annotation icon and choose the desired stamp from the various types listed in the menu.

Click Stamp Icon in Blazor SfPdfViewer

Afterward, click anywhere in the viewer to add the stamp. The toolbar will then switch to display the properties required for the stamp annotation.

Select Required Stamp in Blazor SfPdfViewer

To add signature

Click the Handwritten Signature icon to open the signature dialog box.

Click Signature Icon in Blazor SfPdfViewer

Draw your signature in the signature dialog canvas, then click the ‘Create’ button to add the signature into the viewer.

Draw Signature in Blazor SfPdfViewer

Click anywhere in the viewer to place the signature. The toolbar will then switch to display the properties required for the signature.

Add Signature in Blazor SfPdfViewer

To add ink annotation

Click the Ink Annotation icon and draw anywhere in the viewer.

Click ink in Blazor SfPdfViewer

Once you’ve finished drawing, click the ink annotation displayed in the toolbar to stop the ink annotation drawing. The toolbar will then switch to display the properties required for the ink annotation.

Complete Ink Annotation in Blazor SfPdfViewer

Change annotation properties (Before adding)

You can modify annotations properties before adding them. Click the rectangle shape annotation, which will display the toolbar with corresponding properties. You can be able to adjust these properties and then add the annotation by clicking and dragging it. The annotation will be added with the modified property.

Property Change Before Adding in Blazor SfPdfViewer

Change annotation properties (After adding)

After adding the annotation, you can modify its properties. Select the added annotation, and it will display the corresponding properties. Change the necessary property, and it will reflect in the added annotation.

Property Change After Adding in Blazor SfPdfViewer

Delete Annotation

To delete an annotation, first, select the annotation you want to remove. The delete icon will appear in the property toolbar. Clicking on the delete icon will remove the annotation from the PDF along with its associated comment.

Delete Selected Annotation in Blazor SfPdfViewer

Open and Close Comment Panel

You can open the comments through the more option located at the right end of the mobile primary toolbar.

Select CommentPanel in Blazor SfPdfViewer

To close the comment panel, click the close icon located within the comment panel.

Open CommentPanel in Blazor SfPdfViewer