Skip to content

Commit b1df5a1

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #3493 from Syncfusion-Content/hotfix/hotfix-v30.1.37
DOCINFRA-2341_merged_using_automation
2 parents 9021a1d + 826e993 commit b1df5a1

File tree

1 file changed

+176
-28
lines changed

1 file changed

+176
-28
lines changed

‎MAUI/PDF-Viewer/Custom-Bookmark.md‎

Lines changed: 176 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
22
layout: post
3-
title: Custom Bookmark in .NET MAUI PDF Viewer control | Syncfusion
4-
description: Learn here about the custom bookmark navigation in Syncfusion<sup>®</sup> .NET MAUI PDF Viewer (SfPdfViewer) control.
3+
title: Custom Bookmarks in .NET MAUI PDF Viewer Control | Syncfusion
4+
description: Discover how to navigate using custom bookmark navigation in Syncfusion<sup>®</sup> .NET MAUI PDF Viewer (SfPdfViewer) control.
55
platform: MAUI
66
control: SfPdfViewer
77
documentation: ug
88
---
99

10-
# Custom bookmark in .NET MAUI PDF Viewer
10+
# Custom Bookmarks in .NET MAUI PDF Viewer
1111

12-
A PDF document may optionally have custom bookmarks that allow the user to bookmark pages and navigate to them. The PDF viewer control displays these custom bookmarks in outline view.
12+
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.
1313

14-
## Showing/hiding the custom bookmark
14+
## Showing/Hiding the Custom Bookmarks Pane
1515

16-
The PDF viewer's built-in custom bookmark view, which displays the custom bookmarks, can be shown or hidden using the [IsOutlineViewVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_IsOutlineViewVisible) property. Its default value is `false`.
16+
The built-in custom bookmark view of the PDF Viewer displays the custom bookmarks, can be shown or hidden using the [IsOutlineViewVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_IsOutlineViewVisible) property. The default value of this property is `false`.
1717

1818
{% tabs %}
1919
{% highlight XAML %}
@@ -28,9 +28,9 @@ pdfViewer.IsOutlineViewVisible = true;
2828
{% endhighlight %}
2929
{% endtabs %}
3030

31-
## Accessing the custom bookmarks collection
31+
## Accessing the Custom Bookmarks Collection
3232

33-
To access the custom bookmarks, you can use the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection. This property provides the list of custom bookmarks in the PDF.
33+
To retrieve the list of custom bookmarks in a PDF document, use the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) property.
3434

3535
{% tabs %}
3636
{% highlight c# %}
@@ -40,19 +40,23 @@ var customBookmarks = pdfViewer.CustomBookmarks;
4040
{% endhighlight %}
4141
{% endtabs %}
4242

43-
## Add, edit, and remove custom bookmarks
43+
## Add, Edit, and Remove Custom Bookmarks
4444

45-
To add, edit, or remove custom bookmarks in a PDF viewer, you can use the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection. This property provides access to the collection of custom bookmarks that can be manipulated to modify the bookmarks displayed in the viewer's bookmark view.
45+
You can manage custom bookmarks in the PDF viewer using the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection. This property allows you to add, edit, or remove bookmarks that appear in the viewer’s bookmark pane.
4646

47-
### Add custom bookmarks using the bookmark pane
47+
### Add Custom Bookmarks
4848

49-
Custom bookmarks can be added using the floating button in the bookmark pane.
49+
You can add custom bookmarks either through the UI or programmatically. You can also track additions using event handlers.
50+
51+
#### Add via UI
52+
53+
Use the floating action button in the bookmark pane to add a custom bookmark.
5054

5155
![Custom bookmark floating button](Images\custom-bookmark.png)
5256

53-
### Adding a Custom Bookmark programmatically
57+
#### Add Programmatically
5458

55-
To add a custom bookmark, you can create a new instance of Bookmark and add it to the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection:
59+
Create a new instance of the Bookmark class and add it to the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection:
5660

5761
{% tabs %}
5862
{% highlight c# %}
@@ -65,19 +69,60 @@ Bookmark newBookmark = new Bookmark()
6569

6670
pdfViewer.CustomBookmarks.Add(newBookmark);
6771

72+
{% endhighlight %}
73+
{% endtabs %}
74+
75+
#### Track Bookmark Additions
76+
77+
To track when a custom bookmark is added, subscribe to the [CollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1.collectionchanged?view=net-9.0) event of the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection inside the [DocumentLoaded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentLoaded) event handler.
78+
Within the [CollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1.collectionchanged?view=net-9.0) event handler, use the [NotifyCollectionChangedAction](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.notifycollectionchangedaction?view=net-9.0) 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.
79+
80+
{% tabs %}
81+
{% highlight c# %}
82+
83+
// Event handler for when the PDF document is loaded
84+
private void PdfViewer_DocumentLoaded(object? sender, EventArgs? e)
85+
{
86+
// Obtain the collection of custom bookmarks from the PDF viewer
87+
ObservableCollection<Bookmark> bookmarks = pdfViewer.CustomBookmarks;
88+
89+
// Subscribe to collection change events on the bookmarks
90+
bookmarks.CollectionChanged += Bookmarks_CollectionChanged;
91+
}
92+
93+
// Event handler for changes in the bookmarks collection
94+
private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
95+
{
96+
// Check if the change action is 'Add'
97+
if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
98+
{
99+
// Iterate through newly added bookmarks
100+
foreach (Bookmark bookmark in e.NewItems)
101+
{
102+
Debug.WriteLine($"Added bookmark: {bookmark.Name} at page {bookmark.PageNumber}");
103+
}
104+
}
105+
}
68106

69107
{% endhighlight %}
70108
{% endtabs %}
71109

72-
### Rename custom bookmarks using the bookmark context menu
110+
### Rename Custom Bookmarks
73111

74-
Tap the context menu button on the custom bookmark to be edited and choose Rename and enter the desired name.
112+
You can rename custom bookmarks either through the UI or programmatically. You can also track rename changes using event handlers.
113+
114+
#### Rename via Context Menu
115+
116+
To rename a custom bookmark from the UI:
117+
1. Tap the context menu button on the desired custom bookmark.
118+
2. Select **Rename**.
119+
3. Enter the new name.
75120

76121
![Custom bookmark context menu](Images\custom-bookmark-contextmenu.png)
77122

78-
### Rename a Custom Bookmark programmatically
123+
#### Rename Programmatically
79124

80-
To rename an existing custom bookmark, you can retrieve the bookmark from the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection and modify its properties:
125+
To rename an existing custom bookmark, retrieve it from the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection and update its Name property:
81126

82127
{% tabs %}
83128
{% highlight c# %}
@@ -88,17 +133,93 @@ if (bookmarkToEdit != null)
88133
bookmarkToEdit.Name = "Edited Bookmark Title";
89134
}
90135

136+
{% endhighlight %}
137+
{% endtabs %}
138+
139+
#### Track Bookmark Rename Changes
140+
141+
To track when a bookmark is renamed, you need to handle the [PropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged.propertychanged?view=net-9.0#system-componentmodel-inotifypropertychanged-propertychanged) event of each bookmark.
142+
143+
##### For Newly Added Bookmarks
144+
145+
Subscribe to the `PropertyChanged` event inside the [CollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1.collectionchanged?view=net-9.0) event handler when the action is **Add**:
146+
147+
{% tabs %}
148+
{% highlight c# %}
149+
150+
private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
151+
{
152+
// Handle addition of new bookmarks
153+
if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
154+
{
155+
foreach (Bookmark bookmark in e.NewItems)
156+
{
157+
bookmark.PropertyChanged += Bookmark_PropertyChanged;
158+
}
159+
}
160+
}
161+
162+
private void Bookmark_PropertyChanged(object? sender, PropertyChangedEventArgs e)
163+
{
164+
if (sender is Bookmark changedBookmark)
165+
{
166+
if (e.PropertyName == nameof(Bookmark.Name))
167+
{
168+
Debug.WriteLine($"Bookmark updated: {e.PropertyName} changed to: " +
169+
$"{changedBookmark.Name}");
170+
}
171+
}
172+
}
173+
174+
{% endhighlight %}
175+
{% endtabs %}
176+
177+
##### For Existing Bookmarks
178+
179+
To track rename changes for bookmarks that already exist when the document is loaded, wire the [PropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged.propertychanged?view=net-9.0#system-componentmodel-inotifypropertychanged-propertychanged) event for each bookmark in the [DocumentLoaded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentLoaded) event handler:
180+
181+
{% tabs %}
182+
{% highlight c# %}
183+
184+
private void PdfViewer_DocumentLoaded(object? sender, EventArgs? e)
185+
{
186+
// Obtain the collection of custom bookmarks from the PDF viewer
187+
ObservableCollection<Bookmark> bookmarks = pdfViewer.CustomBookmarks;
188+
// Attach event handlers to existing bookmarks in the collection
189+
foreach (var bookmark in bookmarks)
190+
{
191+
bookmark.PropertyChanged += Bookmark_PropertyChanged;
192+
}
193+
}
194+
195+
private void Bookmark_PropertyChanged(object? sender, PropertyChangedEventArgs e)
196+
{
197+
if (sender is Bookmark changedBookmark)
198+
{
199+
if (e.PropertyName == nameof(Bookmark.Name))
200+
{
201+
Debug.WriteLine($"Bookmark updated: {e.PropertyName} changed to: " +
202+
$"{changedBookmark.Name}");
203+
}
204+
}
205+
}
91206

92207
{% endhighlight %}
93208
{% endtabs %}
94209

95-
### Remove custom bookmarks using the bookmark context menu
210+
### Remove Custom Bookmarks
211+
212+
You can remove custom bookmarks either through the UI or programmatically. You can also track bookmark removal using event handlers.
96213

97-
Tap the context menu button on the custom bookmark to be removed and tap `Delete`.
214+
#### Remove via Context Menu
98215

99-
### Removing a Custom Bookmark programmatically
216+
To remove a custom bookmark from the UI:
217+
1. Tap the context menu button on the custom bookmark you want to delete.
218+
2. Select Delete.
100219

101-
To remove a custom bookmark, you can remove it directly from the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection:
220+
#### Remove Programmatically
221+
222+
To remove a custom bookmark programmatically, retrieve it from the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection and remove it:
102223

103224
{% tabs %}
104225
{% highlight c# %}
@@ -109,21 +230,48 @@ if (bookmarkToRemove != null)
109230
pdfViewer.CustomBookmarks.Remove(bookmarkToRemove);
110231
}
111232

233+
{% endhighlight %}
234+
{% endtabs %}
235+
236+
#### Track Bookmark Removal
237+
238+
To track when a custom bookmark is removed, handle the [CollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1.collectionchanged?view=net-9.0) event of the [CustomBookmarks](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_CustomBookmarks) collection. Use the [NotifyCollectionChangedAction](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.notifycollectionchangedaction?view=net-9.0) enum to check if the action is `Remove`. If so, iterate through `e.OldItems` to access the removed bookmarks:
239+
240+
{% tabs %}
241+
{% highlight c# %}
242+
243+
// Event handler for changes in the bookmarks collection
244+
private void Bookmarks_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
245+
{
246+
// Check if the change action is 'Remove'
247+
else if (e.Action == NotifyCollectionChangedAction.Remove && e.OldItems != null)
248+
{
249+
// Iterate through reomoved bookmarks
250+
foreach (Bookmark bookmark in e.OldItems)
251+
{
252+
Debug.WriteLine($"Removed bookmark: {bookmark.Name} at page {bookmark.PageNumber}");
253+
}
254+
}
255+
}
112256

113257
{% endhighlight %}
114258
{% endtabs %}
115259

116-
## Navigating to a custom bookmark
260+
## Navigate to a Custom Bookmark
261+
262+
You can navigate to custom bookmarks either through the UI or programmatically using the PDF viewer's built-in features.
117263

118-
### Navigating using UI
264+
### Navigate Using UI
119265

120-
As mentioned above, you can show the outline view by setting the [IsOutlineViewVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_IsOutlineViewVisible) property to `true`. When the outline view is showing, you can tap on any bookmark to navigate to the destination pointed to that bookmark.
266+
To navigate using the UI:
267+
1. Ensure the outline view is visible by setting the [IsOutlineViewVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_IsOutlineViewVisible) property to `true`.
268+
2. Once the outline view is displayed, tap on any custom bookmark to navigate to the corresponding page.
121269

122270
![Custom bookmark in .NET MAUI PDF Viewer](Images\custom-bookmark.png)
123271

124-
### Navigating programmatically
272+
### Navigate Programmatically
125273

126-
The PDF viewer allows the users to navigate to an custom bookmark using the [GoToBookmark](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_GoToBookmark_Syncfusion_Maui_PdfViewer_Bookmark_) method. The below code snippet illustrates the same.
274+
To navigate to a custom bookmark programmatically, use the [GoToBookmark](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_GoToBookmark_Syncfusion_Maui_PdfViewer_Bookmark_) method. This method accepts a `Bookmark` object and navigates to the page associated with it.
127275

128276
{% tabs %}
129277
{% highlight c# %}
@@ -135,4 +283,4 @@ if (customBookmark != null)
135283
pdfViewer.GoToBookmark(customBookmark);
136284

137285
{% endhighlight %}
138-
{% endtabs %}
286+
{% endtabs %}

0 commit comments

Comments
 (0)