Custom Bookmarks in .NET MAUI PDF Viewer

19 Aug 20259 minutes to read

PDF documents can include custom bookmarks that allow the user to bookmark pages and navigate to them. The PDF viewer control displays these custom bookmarks in outline view.

Showing/Hiding the Custom Bookmarks Pane

The built-in custom bookmark view of the PDF Viewer displays the custom bookmarks, can be shown or hidden using the IsOutlineViewVisible property. The default value of this property is false.

XAML

<pdfViewer:SfPdfViewer x:Name="pdfViewer" IsOutlineViewVisible="{Binding OutlineViewVisible}" />

C#

pdfViewer.IsOutlineViewVisible = true;

Accessing the Custom Bookmarks Collection

To retrieve the list of custom bookmarks in a PDF document, use the CustomBookmarks property.

C#

var customBookmarks = pdfViewer.CustomBookmarks;

Add, Edit, and Remove Custom Bookmarks

You can manage custom bookmarks in the PDF viewer using the CustomBookmarks collection. This property allows you to add, edit, or remove bookmarks that appear in the viewer’s bookmark pane.

Add Custom Bookmarks

You can add custom bookmarks either through the UI or programmatically. You can also track additions using event handlers.

Add via UI

Use the floating action button in the bookmark pane to add a custom bookmark.

Add Programmatically

Create a new instance of the Bookmark class and add it to the CustomBookmarks collection:

C#

Bookmark newBookmark = new Bookmark()
{
    Name = "New Bookmark",
    PageNumber = 1, // Page number where the bookmark should navigate
};

pdfViewer.CustomBookmarks.Add(newBookmark);

Track Bookmark Additions

To track when a custom bookmark is added, subscribe to the CollectionChanged event of the CustomBookmarks collection inside the DocumentLoaded event handler.
Within the CollectionChanged event handler, use the NotifyCollectionChangedAction enumeration to determine the type of change. If the action is Add, iterate through e.NewItems to access the newly added bookmarks and perform any necessary tracking or logging.

C#

// Event handler for when the PDF document is loaded
private void PdfViewer_DocumentLoaded(object? sender, EventArgs? e)
{
    // Obtain the collection of custom bookmarks from the PDF viewer
    ObservableCollection<Bookmark> bookmarks = pdfViewer.CustomBookmarks;

    // Subscribe to collection change events on the bookmarks
    bookmarks.CollectionChanged += Bookmarks_CollectionChanged;
}

// Event handler for changes in the bookmarks collection
private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
{
    // Check if the change action is 'Add'
    if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
    {
        // Iterate through newly added bookmarks
        foreach (Bookmark bookmark in e.NewItems)
        {
            Debug.WriteLine($"Added bookmark: {bookmark.Name} at page {bookmark.PageNumber}");
        }
    }
}

Rename Custom Bookmarks

You can rename custom bookmarks either through the UI or programmatically. You can also track rename changes using event handlers.

Rename via Context Menu

To rename a custom bookmark from the UI:

1. Tap the context menu button on the desired custom bookmark.
2. Select Rename.
3. Enter the new name.

Rename Programmatically

To rename an existing custom bookmark, retrieve it from the CustomBookmarks collection and update its Name property:

C#

Bookmark bookmarkToEdit = pdfViewer.CustomBookmarks.FirstOrDefault(b => b.Title == "Chapter 2");
if (bookmarkToEdit != null)
{
    bookmarkToEdit.Name = "Edited Bookmark Title";
}

Track Bookmark Rename Changes

To track when a bookmark is renamed, you need to handle the PropertyChanged event of each bookmark.

For Newly Added Bookmarks

Subscribe to the PropertyChanged event inside the CollectionChanged event handler when the action is Add:

C#

private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
{
    // Handle addition of new bookmarks
    if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
    {
        foreach (Bookmark bookmark in e.NewItems)
        {
            bookmark.PropertyChanged += Bookmark_PropertyChanged;
        }
    }
}

private void Bookmark_PropertyChanged(object? sender, PropertyChangedEventArgs e)
{
    if (sender is Bookmark changedBookmark)
    {
        if (e.PropertyName == nameof(Bookmark.Name))
        {
            Debug.WriteLine($"Bookmark updated: {e.PropertyName} changed to: " +
            $"{changedBookmark.Name}");
        }
    }
}

For Existing Bookmarks

To track rename changes for bookmarks that already exist when the document is loaded, wire the PropertyChanged event for each bookmark in the DocumentLoaded event handler:

C#

private void PdfViewer_DocumentLoaded(object? sender, EventArgs? e)
{
    // Obtain the collection of custom bookmarks from the PDF viewer
    ObservableCollection<Bookmark> bookmarks = pdfViewer.CustomBookmarks;
    // Attach event handlers to existing bookmarks in the collection
   foreach (var bookmark in bookmarks)
   {
       bookmark.PropertyChanged += Bookmark_PropertyChanged;
   }
}

private void Bookmark_PropertyChanged(object? sender, PropertyChangedEventArgs e)
{
    if (sender is Bookmark changedBookmark)
    {
        if (e.PropertyName == nameof(Bookmark.Name))
        {
            Debug.WriteLine($"Bookmark updated: {e.PropertyName} changed to: " +
            $"{changedBookmark.Name}");
        }
    }
}

Remove Custom Bookmarks

You can remove custom bookmarks either through the UI or programmatically. You can also track bookmark removal using event handlers.

Remove via Context Menu

To remove a custom bookmark from the UI:

1. Tap the context menu button on the custom bookmark you want to delete.
2. Select Delete.

Remove Programmatically

To remove a custom bookmark programmatically, retrieve it from the CustomBookmarks collection and remove it:

C#

Bookmark bookmarkToRemove = pdfViewer.CustomBookmarks.FirstOrDefault(b => b.Title == "Chapter 2");
if (bookmarkToRemove != null)
{
    pdfViewer.CustomBookmarks.Remove(bookmarkToRemove);
}

Track Bookmark Removal

To track when a custom bookmark is removed, handle the CollectionChanged event of the CustomBookmarks collection. Use the NotifyCollectionChangedAction enum to check if the action is Remove. If so, iterate through e.OldItems to access the removed bookmarks:

C#

// Event handler for changes in the bookmarks collection
private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
{
    // Check if the change action is 'Remove'
    else if (e.Action == NotifyCollectionChangedAction.Remove && e.OldItems != null)
    {
        // Iterate through reomoved bookmarks
        foreach (Bookmark bookmark in e.OldItems)
        {
            Debug.WriteLine($"Removed bookmark: {bookmark.Name} at page {bookmark.PageNumber}");
        }
    }
}

Navigate to a Custom Bookmark

You can navigate to custom bookmarks either through the UI or programmatically using the PDF viewer’s built-in features.

Navigate Using UI

To navigate using the UI:

1. Ensure the outline view is visible by setting the IsOutlineViewVisible property to true.
2. Once the outline view is displayed, tap on any custom bookmark to navigate to the corresponding page.

Navigate Programmatically

To navigate to a custom bookmark programmatically, use the GoToBookmark method. This method accepts a Bookmark object and navigates to the page associated with it.

C#

//Get the required custom bookmark
Bookmark customBookmark = pdfViewer.CustomBookmarks.Where(x => x.Name.Contains("Chapter 2")).FirstOrDefault();

if (customBookmark != null)
   pdfViewer.GoToBookmark(customBookmark);