Skip to content

Commit 08b0ff8

Browse files
authored
Merge pull request #3538 from syncfusion-content/revert-3537-976545
Revert "976545 - Change the UG for PDF Viewer controls"
2 parents c55a570 + 280693f commit 08b0ff8

File tree

94 files changed

+8612
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+8612
-1
lines changed
Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
layout: post
3+
title: Add, Remove, and Edit Annotations in .NET MAUI PDF Viewer | Syncfusion
4+
description: Learn here all about adding, removing and editing annotations in a PDF document using Syncfusion<sup>®</sup> .NET MAUI PDF Viewer (SfPdfViewer) control.
5+
platform: MAUI
6+
control: SfPdfViewer
7+
documentation: ug
8+
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
9+
---
10+
11+
# Add, Remove, and Edit Annotations in .NET MAUI PDF Viewer
12+
13+
This section will review the various functions in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) for adding, removing, and editing annotations in a PDF document.
14+
15+
## Add annotations to a PDF document
16+
17+
This section will go through how to add annotations to a PDF document programmatically.
18+
19+
### Add annotations programmatically
20+
21+
You can add a new annotation to the PDF document programmatically by creating an annotation instance and providing it as a parameter to the [AddAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_AddAnnotation_Syncfusion_Maui_PdfViewer_Annotation_) method. The following example shows how to create an instance of a circle annotation and add it to the PDF document. Similarly, you can create and add other types of annotations.
22+
23+
{% tabs %}
24+
{% highlight c# %}
25+
void AddCircleAnnotation()
26+
{
27+
int pageNumber = 1;
28+
// Define the bounds for the circle in the PDF coordinates.
29+
RectF circleBounds = new RectF(10, 10, 100, 100);
30+
31+
// Create a circle annotation.
32+
CircleAnnotation annotation = new CircleAnnotation(circleBounds, pageNumber);
33+
34+
// Set the appearance for the circle annotation.
35+
annotation.Color = Colors.Red; //Stroke color
36+
annotation.FillColor = Colors.Green; //Fill color
37+
annotation.BorderWidth = 2; //Stroke thickness
38+
annotation.Opacity = 0.75f; // 75% Opacity
39+
40+
// Add the annotation to the PDF document using the `AddAnnotation` method of `SfPdfViewer`.
41+
PdfViewer.AddAnnotation(annotation);
42+
}
43+
{% endhighlight %}
44+
{% endtabs %}
45+
46+
### AnnotationAdded event
47+
48+
The [AnnotationAdded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_AnnotationAdded) event occurs when an annotation is added successfully to the PDF document. The following example explains how to wire and handle the event.
49+
50+
{% tabs %}
51+
{% highlight c# %}
52+
void WireAnnotationAddedEvent()
53+
{
54+
// Wire the annotation added event of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control.
55+
PdfViewer.AnnotationAdded += OnAnnotationAdded;
56+
}
57+
58+
private void OnAnnotationAdded(object sender, AnnotationEventArgs e)
59+
{
60+
Annotation addedAnnotation = e.Annotation;
61+
Debug.WriteLine("{0} is added to the document successfully", addedAnnotation.Name);
62+
}
63+
{% endhighlight %}
64+
{% endtabs %}
65+
66+
## Remove annotations from the PDF document
67+
68+
This section will go through different methods of removing annotations from a PDF document.
69+
70+
### Remove a specific annotation
71+
72+
You can remove an annotation from the document programmatically by providing the specific annotation instance as the parameter to the [RemoveAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RemoveAnnotation_Syncfusion_Maui_PdfViewer_Annotation_) method of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html). The following example shows how to remove the first annotation in the annotation collection from a PDF document.
73+
74+
{% tabs %}
75+
{% highlight c# %}
76+
void RemoveFirstAnnotation()
77+
{
78+
//Obtain the annotation collection using [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) instance.
79+
ReadOnlyObservableCollection<Annotation> annotations = PdfViewer.Annotations;
80+
81+
//Obtain the first annotation in the annotation collection.
82+
Annotation firstAnnotation = annotations[0];
83+
84+
//Remove the annotation using the RemoveAnnotation method of `SfPdfViewer`.
85+
PdfViewer.RemoveAnnotation(firstAnnotation);
86+
}
87+
{% endhighlight %}
88+
{% endtabs %}
89+
90+
### Remove all the annotations
91+
92+
You can remove all the annotations from a document programmatically by calling the [RemoveAllAnnotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RemoveAllAnnotations) method. The following example shows how to remove all the annotations from a PDF document.
93+
94+
{% tabs %}
95+
{% highlight c# %}
96+
void RemoveAllAnnotations()
97+
{
98+
// Removes all the annotations from a PDF document using [RemoveAllAnnotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RemoveAllAnnotations) method of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
99+
PdfViewer.RemoveAllAnnotations();
100+
}
101+
{% endhighlight %}
102+
{% endtabs %}
103+
104+
### AnnotationRemoved event
105+
106+
The [AnnotationRemoved](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_AnnotationRemoved) event occurs when an annotation is removed successfully from the PDF document. The following example explains how to wire and handle the event.
107+
108+
{% tabs %}
109+
{% highlight c# %}
110+
void WireAnnotationRemovedEvent()
111+
{
112+
// Wire the annotation removed event of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
113+
PdfViewer.AnnotationRemoved += OnAnnotationRemoved;
114+
}
115+
116+
private void OnAnnotationRemoved(object sender, AnnotationEventArgs e)
117+
{
118+
Annotation removedAnnotation = e.Annotation;
119+
Debug.WriteLine("{0} is removed from the document successfully", removedAnnotation.Name);
120+
}
121+
{% endhighlight %}
122+
{% endtabs %}
123+
124+
## Edit annotations
125+
126+
This section will go through different methods of editing annotations in a PDF document programmatically.
127+
128+
### Edit a specific annotation
129+
130+
You can edit the properties of an annotation from the document programmatically by accessing the specific annotation instance from the [Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_Annotations) property of the SfPdfViewer. The following example shows how to edit the first annotation in the annotation collection. Similarly, you can also modify the other properties.
131+
132+
{% tabs %}
133+
{% highlight c# %}
134+
void EditFirstAnnotation()
135+
{
136+
// Obtain the annotation collection using [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) instance.
137+
ReadOnlyObservableCollection<Annotation> annotations = PdfViewer.Annotations;
138+
139+
// Obtain the first annotation in the annotation collection.
140+
Annotation annotation = annotations[0];
141+
142+
// Edit the annotation properties.
143+
annotation.Color = Colors.Green; //Stroke color.
144+
annotation.Opacity = 0.75f; // 75% Opacity
145+
146+
// Type cast to edit the properties of the specific annotation type. Here, the first annotation is a circle annotation.
147+
if (annotation is CircleAnnotation circleAnnotation)
148+
{
149+
circleAnnotation.FillColor = Colors.Red; //Inner fill color.
150+
circleAnnotation.BorderWidth = 2; //Stroke thickness.
151+
circleAnnotation.Bounds = new RectF(10, 10, 100, 100); // Bounds in PDF coordinates.
152+
}
153+
}
154+
{% endhighlight %}
155+
{% endtabs %}
156+
157+
### AnnotationEdited event
158+
159+
The [AnnotationEdited](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_AnnotationEdited) event occurs when an annotation is edited in the PDF document. The following example explains how to wire and handle the event.
160+
161+
{% tabs %}
162+
{% highlight c# %}
163+
void WireAnnotationEditedEvent()
164+
{
165+
// Wire the annotation edited event of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
166+
PdfViewer.AnnotationEdited += OnAnnotationEdited;
167+
}
168+
169+
private void OnAnnotationEdited(object sender, AnnotationEventArgs e)
170+
{
171+
Annotation editedAnnotation = e.Annotation;
172+
Debug.WriteLine("The {0} is edited successfully", editedAnnotation.Name);
173+
}
174+
{% endhighlight %}
175+
{% endtabs %}
176+
177+
### Adding custom information to an annotation
178+
179+
The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to assign custom information to annotations. The [CustomData](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.Annotation.html#Syncfusion_Maui_PdfViewer_Annotation_CustomData) property is utilized to store additional information about each annotation instance for reference. However, it's essential to note that these data are solely intended for reference purposes and will not be displayed in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) interface.
180+
181+
The provided code sample illustrates how to set the [CustomData](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.Annotation.html#Syncfusion_Maui_PdfViewer_Annotation_CustomData) property for an annotation. Within this code sample, we set the custom data to represent the creation date of the annotation.
182+
183+
{% tabs %}
184+
{% highlight C# %}
185+
186+
private void OnAnnotationAdded(object sender, AnnotationEventArgs e)
187+
{
188+
e.Annotation.CustomData="Created Date is: " +DateTime.Now.ToString();
189+
}
190+
191+
{% endhighlight %}
192+
{% endtabs %}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
title: Annotation Collection in .NET MAUI PDF Viewer control | Syncfusion
4+
description: Learn here all about annotation collection in Syncfusion<sup>®</sup> .NET MAUI PDF Viewer (SfPdfViewer) control and its uses.
5+
platform: MAUI
6+
control: SfPdfViewer
7+
documentation: ug
8+
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
9+
---
10+
11+
# Annotation Collection in .NET MAUI PDF Viewer (SfPdfViewer)
12+
13+
The existing annotations in a PDF document can be accessed using the [Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_Annotations) property of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html). This read only property will have the annotation collection information as soon as the document is loaded into the PDF Viewer. The following example explains how to use the property to obtain information about a square annotation that is the first on a specific document.
14+
15+
{% tabs %}
16+
{% highlight c# %}
17+
public void WireDocumentLoadedEvent()
18+
{
19+
// Wire the document loaded event of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) to occur when a PDF document is loaded.
20+
PdfViewer.DocumentLoaded += OnDocumentLoaded;
21+
}
22+
23+
private void OnDocumentLoaded(object sender, EventArgs e)
24+
{
25+
if (sender is SfPdfViewer pdfViewer)
26+
{
27+
// Obtain the annotation collection.
28+
ReadOnlyObservableCollection<Annotation> annotations = pdfViewer.Annotations;
29+
30+
if (annotations.Count > 0)
31+
{
32+
// Type cast the annotation to get the annotation-specific properties.
33+
if (annotations[0] is SquareAnnotation squareAnnotation)
34+
{
35+
RectF bounds = squareAnnotation.Bounds;
36+
Color color = squareAnnotation.Color;
37+
}
38+
}
39+
}
40+
}
41+
{% endhighlight %}
42+
{% endtabs %}
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: post
3+
title: About Annotations in .NET MAUI PDF Viewer control | Syncfusion
4+
description: Learn here all about introduction of Annotations in .NET MAUI PDF Viewer (SfPdfViewer) control, its functionalites and more.
5+
platform: MAUI
6+
control: SfPdfViewer
7+
documentation: ug
8+
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
9+
---
10+
11+
# Annotations in .NET MAUI PDF Viewer (SfPdfViewer)
12+
13+
The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to add, remove and modify annotations in the PDF documents. This section will go through the various types and functionalities available in PDF Viewer for working with annotations.
14+
15+
## Supported Annotation Types
16+
17+
The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) supports the following annotation types.
18+
19+
1. Arrow
20+
2. Circle
21+
3. Free text
22+
4. Highlight
23+
5. Ink
24+
6. Ink eraser
25+
7. Line
26+
8. Polygon
27+
9. Polyline
28+
10. Square
29+
11. Squiggly
30+
12. Stamp
31+
13. Sticky notes
32+
14. Strikeout
33+
15. Underline
34+
35+
To learn how to work with annotations, you can also check out our video tutorial below.
36+
37+
<style>#MAUISfPdfViewerVideoTutorial{width : 90% !important; height: 400px !important }</style> <iframe id='MAUISfPdfViewerVideoTutorial' src='https://www.youtube.com/embed/Vom4I_xt--I'></iframe>

0 commit comments

Comments
 (0)