maui-404874-pdf-viewer-add-annotations.md
The DevExpress PDF Viewer for .NET MAUI allows users to add different annotations to a PDF document. An annotation is an object that is bound to a specific place in a document. The following annotation types are supported:
For more information about markup text annotations (highlight, underline, squiggle, and strikethrough), refer to the following help topic section: Highlight the Selected Text.
The PDF viewer stores all document annotations in the Annotations collection. Once you (or a user) add a new annotation, the PDF Viewer control re-sorts the Annotations collection to insert this annotation (insert where) according to its position in the document.
Users can add comments to each annotation in the document. The Author property defines the person who adds the comment.
All annotations with assigned comments are available in the Annotations view. You can tap the icon in the PDF viewer or call the PdfViewerCommands.ToggleAnnotations command to open the Annotations view:
Follow the steps below to add a sticky note with the PDF viewer UI:
You can delete, add a comment, or change the sticky note color in its context menu. To invoke the menu, tap a sticky note:
Use the following API members to add sticky notes with specified settings on a PDF document page:
AddStickyNoteAnnotationAdds a sticky note with the specified text to the given position in the document.PdfAnnotationOptions.AllowAddStickyNoteSet this property to False to disable the Sticky Note icon in the edit toolbar. This also disables the AddStickyNoteAnnotation method functionality.PdfAnnotationOptions.StickyNoteColorSpecifies the fill color of sticky notes.PdfAnnotationOptions.StickyNoteSubjectSpecifies the subject for comments assigned to sticky notes.
<dx:PdfViewer.AnnotationOptions>
<dx:PdfAnnotationOptions ...
StickyNoteColor="Beige"
StickyNoteSubject="Note"/>
</dx:PdfViewer.AnnotationOptions>
<dx:DXButton Clicked="DXButton_Clicked"/>
private void DXButton_Clicked(object sender, EventArgs e) {
pdfViewer.AddStickyNoteAnnotation(new PdfDocumentPosition(1, new PdfPoint(300, 100)), "Sticky note text");
}
Follow the steps below to add a text label with the PDF viewer UI:
In the context menu, you can delete, add a comment, change text size and color. To invoke the menu, tap a text label:
Use the following API members to add text directly to a page and customize text settings:
AddFreeTextAnnotationAdds a text label to a page.PdfAnnotationOptions.AllowAddFreeTextSet this property to False to disable the Text icon in the edit toolbar. This change also disables AddFreeTextAnnotation method functionality.PdfAnnotationOptions.FreeTextColorSpecifies text color.PdfAnnotationOptions.FreeTextFontSizeSpecifies the text font size.PdfAnnotationOptions.FreeTextSubjectSpecifies the subject for comments assigned to free text annotations.
<dx:PdfViewer.AnnotationOptions>
<dx:PdfAnnotationOptions ...
FreeTextColor="Blue"
FreeTextFontSize="10"
FreeTextSubject="Subject"/>
</dx:PdfViewer.AnnotationOptions>
<dx:DXButton Clicked="DXButton_Clicked" .../>
private void DXButton_Clicked(object sender, EventArgs e) {
pdfViewer.AddFreeTextAnnotation(0, new PdfRectangle(0, 0, 100, 100), "Your text");
}
Follow the steps below to add a drawing with the PDF viewer UI:
Tap the Graphics icon ( ) in the edit toolbar.
Tap the Draw icon:
(Optional) Change line thickness and color:
Draw on the document page.
Tap Done to finish.
In the context menu, you can delete a drawing, add a comment, change line thickness and color. To invoke this menu, tap the drawing and select the corresponding option. You can also resize and move the selected drawing.
Use the following API members to add free-hand drawings with specified settings to a PDF document page:
AddInkAnnotationAdds an ink drawing to a page with the given serial number.PdfAnnotationOptions.AllowAddInkSet this property to False to disable the Draw icon in the edit toolbar. This also disables the AddInkAnnotation method functionality.PdfAnnotationOptions.InkColorSpecifies the ink color.PdfAnnotationOptions.InkLineWidthDefines ink line thickness.PdfAnnotationOptions.InkSubjectSpecifies the subject for comments assigned to drawing annotations.
<dx:PdfViewer.AnnotationOptions>
<dx:PdfAnnotationOptions ...
InkColor="Green"
InkLineWidth="2"
InkSubject="Ink drawing"/>
</dx:PdfViewer.AnnotationOptions>
<dx:DXButton Clicked="DXButton_Clicked" .../>
private void DXButton_Clicked(object sender, EventArgs e) {
// The origin point (0,0) is the page's bottom-left corner; coordinates are in document units.
PdfPoint point1 = new PdfPoint(100, 100);
PdfPoint point2 = new PdfPoint(110, 110);
PdfPoint point3 = new PdfPoint(120, 100);
PdfPoint point4 = new PdfPoint(130, 110);
PdfPoint point5 = new PdfPoint(140, 100);
PdfPoint point6 = new PdfPoint(150, 150);
PdfPoint[] points = new[] { point1, point2, point3, point4, point5, point6 };
List<IList<PdfPoint>> inks = new List<IList<PdfPoint>> { points };
pdfViewer.AddInkAnnotation(0, inks);
}
Follow the steps below to add a rectangle with the PDF viewer UI:
Tap the Graphics icon ( ) in the edit toolbar.
Tap the Rectangle icon:
(Optional) Change outline thickness and color:
You can draw directly on a document page. Tap where you want to place one of the corners and drag diagonally to mark the opposite corner.
Tap Done to finish.
In the context menu, you can delete a rectangle, add a comment, change line thickness and color. To invoke this menu, tap the rectangle and select the corresponding option. You can also resize and move the selected rectangle.
Use the following API members to add rectangles with specified settings to a PDF doc page:
AddSquareAnnotationAdds a rectangle with thespecified boundaries to a page with the given serial number.PdfAnnotationOptions.AllowAddSquareSet this property to False to disable the AddSquareAnnotation method functionality.PdfAnnotationOptions.SquareColorSpecifies the rectangle outline color.SquareLineWidthSpecifies the rectangle outline thickness.SquareSubjectDefines the subject for comments assigned to rectangles.
<dx:PdfViewer.AnnotationOptions>
<dx:PdfAnnotationOptions ...
SquareColor="Blue"
SquareLineWidth="3"
SquareSubject="Subject"/>
</dx:PdfViewer.AnnotationOptions>
<dx:DXButton Clicked="DXButton_Clicked" .../>
private void DXButton_Clicked(object sender, EventArgs e) {
// The origin point (0,0) is the page's bottom-left corner; coordinates are in document units.
pdfViewer.AddSquareAnnotation(0, new PdfRectangle(left: 240, bottom: 660, right: 355, top: 700));
}
Follow the steps below to add an ellipse with the PDF viewer UI:
Tap the Graphics icon ( ) in the edit toolbar.
Tap the Ellipse icon:
(Optional) Change outline thickness and color:
You can draw directly on a document page. Tap where you want to place an ellipse bounding rectangle corner and drag diagonally to mark the opposite corner.
Tap Done to finish.
In the context menu, you can delete an ellipse, add a comment, change line thickness and color. To invoke this menu, tap the ellipse and select the corresponding option. You can also resize and move the selected ellipse.
Use the following API members to add ellipses with specified settings to a PDF doc page:
AddCircleAnnotationAdds an ellipse with the specified boundaries to a page with the given serial number.PdfAnnotationOptions.AllowAddCircleSet this property to False to disable the AddCircleAnnotation method functionality.CircleColorSpecifies the ellipse outline color.CircleLineWidthDefines the ellipse outline thickness.CircleSubjectDefines the subject for comments assigned to ellipses.
<dx:PdfViewer.AnnotationOptions>
<dx:PdfAnnotationOptions ...
CircleColor="Red"
CircleLineWidth="3"
CircleSubject="Subject"/>
</dx:PdfViewer.AnnotationOptions>
<dx:DXButton Clicked="DXButton_Clicked" .../>
private void DXButton_Clicked(object sender, EventArgs e) {
// The origin point (0,0) is the page's bottom-left corner; coordinates are in document units.
pdfViewer.AddCircleAnnotation(0, new PdfRectangle(left:240, bottom:660, right:355, top:700));
}
The PDF Viewer does not automatically save newly added annotations to the document. To invoke the system Save File dialog to allow users to save the current document to the file system, call the PdfViewer.ShowSaveFileDialogAsync method or the PdfViewerCommands.ShowSaveFileDialog command. Users can also save documents in the Share UI. To invoke it, call the PdfViewer.ShareDocumentAsync method or the PdfViewerCommands.ShareDocument command. Call the PdfViewer.SaveDocumentAsync method to save the current document to a stream.
Handle the following PdfViewer events to respond to user actions:
AnnotationCreating | AnnotationCreatedOccur before/after a new annotation object is added.AnnotationChanging | AnnotationChangedOccur before/after an annotation object property value is changed.AnnotationDeleting | AnnotationDeletedOccur before/after an annotation object is deleted.
The PDF viewer raises the AnnotationSelectionChanged event once a user selects an annotation. To obtain the selected annotation object, use the SelectedAnnotation property.
Use the following methods/commands to implement a custom navigation UI:
PdfViewer.SelectNextAnnotation | PdfViewerCommands.SelectNextAnnotation
PdfViewer.SelectPreviousAnnotation | PdfViewerCommands.SelectPreviousAnnotation
Users can select an annotation in Annotations view to navigate to that annotation in the document.