Select and Highlight Content in DevExpress PDF Viewer for .NET MAUI

• Jul 17, 2024
• 5 minutes to read

Users can select and highlight document content in a PDF document opened in the PdfViewer control. The PDF Viewer updates document metadata to save info about highlighted content. You can see these changes if you open the document on another device or PDF reader.

Select PDF Document Content

Tap and hold a word within the document content to select it. This action selects the word and displays selection handles. You can drag a selection handle to select additional portions of the text. Note that within a single page, users can select either one image or a portion of text at one time.

Use the HasSelection property to check whether any content is selected in the opened doc. Next, you can call the GetSelectedContent() method to obtain the selected content. This method returns a PdfSelectedContent object. Use the PdfSelectedContent.ContentType property to check the selected content type. Depending on the content property, you can use the PdfSelectedContent.Image or PdfSelectedContent.Text property to obtain selected content.

The PDF control raises the ContentSelectionChanged event each time a user selects content in the PDF viewer.

To allow users to copy the selected content to the clipboard, enable the AllowCopySelection property.

Call the PdfViewer.CopySelection method or the PdfViewerCommands.CopySelection command to copy the selection to the clipboard.

To reset selection, call the PdfViewer.ClearSelection method or the PdfViewerCommands.ClearSelection command.

Initially, the PDF viewer uses the theme‘s seed color to paint the selection rectangle and touch controls. You can use the SelectionColor property to specify that color.

Highlight the Selected Text

Users can insert markup text annotations into the document: highlight the selected text with a color, a straight line, a squiggle line, or strikethrough. To do this, a user should select the corresponding command in the selection menu (it appears on selection or when you tap selected text):

You can clear selected highlight decorations, add a comment, or change the annotation color in the annotation context menu. To do so, tap the highlighted text and then select the corresponding icon:

Highlight Text with a Fill Color

Users can highlight the selected text with a colorful rounded rectangle.

If Highlight Text mode is enabled in the edit toolbar, users can select text to highlight it with their color of choice:

The following APIs allow you to control and customize highlight options:

PdfViewer.HighlightSelectedText | PdfViewerCommands.HighlightSelectedText

Highlight the selected text with a filled rectangle and allow you to implement a custom highlighting UI.

PdfAnnotationOptions.AllowHighlight

Set this property to False to hide the Highlight command from the selection context menu. This also disables HighlightSelectedText method/command functionality.

PdfAnnotationOptions.HighlightColor

Specifies rectangle color.

PdfAnnotationOptions.HighlightSubject

Specifies the subject for comments assigned to highlight annotations.

XAML

<dx:PdfViewer x:Name="pdfViewer">
    <dx:PdfViewer.AnnotationOptions>
        <dx:PdfAnnotationOptions HighlightColor="#60f0ffff"
                                 HighlightSubject="Highlighted text"/>
    </dx:PdfViewer.AnnotationOptions>
</dx:PdfViewer>
<dx:DXButton Command="{Binding Source={x:Reference pdfViewer}, Path=Commands.HighlightSelectedText}"/>

Underline Text

Users can underline the selected text with a straight line.

If Underline Text mode is enabled in the edit toolbar, users can select text to apply an underline effect with their color of choice:

The following APIs allow you to control and customize highlight options:

PdfViewer.UnderlineSelectedText | PdfViewerCommands.UnderlineSelectedText

Underline the selected text and allow you to implement a custom highlighting UI.

PdfAnnotationOptions.AllowUnderline

Set this property to False to hide the Underline command from the selection context menu. This also disables UnderLineSelectedText method/command functionality.

PdfAnnotationOptions.UnderlineColor

Specifies line color.

PdfAnnotationOptions.UnderlineSubject

Specifies the subject for comments assigned to underline annotations.

XAML

<dx:PdfViewer x:Name="pdfViewer">
    <dx:PdfViewer.AnnotationOptions>
        <dx:PdfAnnotationOptions UnderlineColor="Black"
                                  UnderlineSubject="Underlined text"/>
    </dx:PdfViewer.AnnotationOptions>
</dx:PdfViewer>
<dx:DXButton Command="{Binding Source={x:Reference pdfViewer}, Path=Commands.UnderlineSelectedText}"/>

Underline Text with a Wavy Line

Users can underline the selected text with a squiggle line.

The following APIs allow you to control and customize highlight options:

PdfViewer.SquiggleSelectedText | PdfViewerCommands.SquiggleSelectedText

Underline the selected text with a wavy line and allow you to implement a custom highlighting UI.

PdfAnnotationOptions.AllowSquiggle

Set this property to False to hide the Squiggle command from the selection context menu. This also disables the SquiggleSelectedText method/command functionality.

PdfAnnotationOptions.SquiggleColor

Specifies the line color.

PdfAnnotationOptions.SquiggleSubject

Specifies the subject for comments assigned to underline annotations.

XAML

<dx:PdfViewer x:Name="pdfViewer">
    <dx:PdfViewer.AnnotationOptions>
        <dx:PdfAnnotationOptions SquiggleColor="Black"
                                 SquiggleSubject="Underlined text"/>
    </dx:PdfViewer.AnnotationOptions>
</dx:PdfViewer>
<dx:DXButton Command="{Binding Source={x:Reference pdfViewer}, Path=Commands.SquiggleSelectedText}"/>

Strikethrough Text

Users can apply strikethrough to the selected text.

If Strikethrough Text mode is enabled in the edit toolbar, users can select text to apply a strikethrough effect with their color of choice:

The following APIs allow you to control and customize highlight options:

PdfViewer.StrikethroughSelectedText | PdfViewerCommands.StrikethroughSelectedText

Apply strikethrough to the selected text and allow you to implement a custom highlighting UI.

PdfAnnotationOptions.AllowStrikethrough

Set this property to False to hide the Strikethrough command from the selection context menu. This also disables the StrikethroughSelectedText method/command functionality.

PdfAnnotationOptions.StrikethroughColor

Specifies the strikethrough line color.

PdfAnnotationOptions.StrikethroughSubject

Specifies the subject for comments assigned to strikethrough annotations.

XAML

<dx:PdfViewer x:Name="pdfViewer">
    <dx:PdfViewer.AnnotationOptions>
        <dx:PdfAnnotationOptions StrikethroughColor="Black"
                                 StrikethroughSubject="Strikethrough text"/>
    </dx:PdfViewer.AnnotationOptions>
</dx:PdfViewer>
<dx:DXButton Command="{Binding Source={x:Reference pdfViewer}, Path=Commands.StrikethroughSelectedText}"/>

Save Changes to the Document

HighlightSelectedText, UnderlineSelectedText, SquiggleSelectedText, and StrikethroughSelectedText methods/commands do not automatically save changes 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.

Respond to User Actions

Since Highlight, Underline, Squiggle, and Strikethrough text effects are markup text annotations, you can handle the following PdfViewer events to respond to user actions:

• AnnotationCreating | AnnotationCreated

• AnnotationChanging | AnnotationChanged

• AnnotationDeleted | AnnotationDeleting

• AnnotationSelectionChanged

For more information about annotations, refer to the following help topic: Add Annotations.