Page Navigation

• Mar 28, 2024
• 3 minutes to read

This document explains how to navigate through pages in the PDF Viewer control.

Navigate to a Specific Document Page

Use the following commands to implement a custom UI that allows users to navigate to specific pages:

• PdfViewerCommands.GoToFirstPage
• PdfViewerCommands.GoToLastPage
• PdfViewerCommands.GoToNextPage
• PdfViewerCommands.GoToPreviousPage

The example below implements a navigation panel in a PDF viewer app:

XAML

<Grid Grid.Row="1" HorizontalOptions="Fill" Background="#ECE6F0">
    <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center" Grid.Row="2" >
        <Button ImageSource="first" Style="{StaticResource btnStyle}"
                Command="{Binding Commands.GoToFirstPage, Source={x:Reference pdfViewer}}" />
        <Button ImageSource="previous" Style="{StaticResource btnStyle}"
                Command="{Binding Commands.GoToPreviousPage, Source={x:Reference pdfViewer}}" />
        <Label Text="{Binding CurrentPageNumber, Source={x:Reference pdfViewer}}" Padding="4" VerticalOptions="Center" />
        <Button ImageSource="next" Style="{StaticResource btnStyle}"
                Command="{Binding Commands.GoToNextPage, Source={x:Reference pdfViewer}}" />
        <Button ImageSource="last" Style="{StaticResource btnStyle}"
                Command="{Binding Commands.GoToLastPage, Source={x:Reference pdfViewer}}" />
    </StackLayout>
</Grid>

Users can tap the page counter to invoke the Go to page dialog:

Search Through Document Content

Use PdfViewerCommands.SearchForward and PdfViewerCommands.SearchBackward commands to search for the specified text in the document.

The first SearchForward or SearchBackward command call searches for the first occurrence of the search query string starting from the document beginning. Consecutive command calls continue the search forward or backward respectively.

Use the following properties to configure search filters:

• SearchCaseSensitive – Allows you differentiate between uppercase and lowercase letters. If SearchCaseSensitive is true, “viewer”, “Viewer”, and “VIEWER” are different words.

• SearchWholeWords – Allows you to look for whole words when searching for a given string.

The SearchHighlightColor property allows you to customize the highlight color for search results.

Show Outlines

The built-in Outlines page contains a list of bookmarks that allow users to navigate between different document sections. Users can tap the Outlines icon to view PDF document outlines.

The Outlines icon appears disabled if the viewed document does not have outlines (no Outlines entry in the document catalogue).

To check whether the Outlines page is currently visible, use the IsOutlinesViewOpened property.

You can use the ToggleOutlines command to invoke Outlines programmatically.

Show Thumbnails

The built-in Thumbnails page shows preview images for all document pages. Users can tap the Thumbnails icon to view thumbnails.

To check whether the Thumbnails page is currently visible, use the IsThumbnailsViewOpened property.

You can use the ToggleThumbnails command to invoke Thumbnails programmatically.

Zoom the Document

Users can use pinch gestures to zoom into and out of a document. To obtain the current zoom level, use the ZoomFactor property. The possible value range is from 0.2 to 5, where 0.2 means that the page occupies 20% of the screen width and 5 corresponds to the maximum supported zoom level (500%).

Specify MinZoomFactor and MaxZoomFactor properties to constrain minimum and maximum zoom levels for users.

You can bind to ZoomIn and ZoomOut commands to zoom the document programmatically.