Working with Shape Annotations

Shape Annotations are used to add annotations in the form of shapes such as rectangle, ellipse, horizontal line, and vertical line at the specific area of interest. PDF viewer allows you to include shape annotations in a PDF document and provides options to modify or remove the existing shape annotations. The supported shape annotations are:

  1. Rectangle
  2. Circle
  3. Line
  4. Arrow
  5. Polygon.

Adding shape annotations

Enabling the shape annotation mode

Set the AnnotationMode of the PDF Viewer to any of the shape annotations to enable it. Once the shape annotation mode is set, zooming, panning, and scrolling will be disabled. A shape annotation can be drawn only on the currently visible pages. Refer to the following code.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the annotation mode to Rectangle
pdfViewer.AnnotationMode = AnnotationMode.Rectangle;

Disabling shape annotation mode

Set the AnnotationMode of the PDF Viewer to None to disable the shape annotation mode. When the shape annotation mode is disabled, zooming, panning, and scrolling will be enabled again.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the annotation mode to None
pdfViewer.AnnotationMode = AnnotationMode.None;

Detecting the inclusion of shape annotations

The ShapeAnnotationAdded event will be raised when a shape annotation is added to the PDF. The properties of the added shape annotation can be retrieved from the ShapeAnnotationAddedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the ShapeAnnotionAdded Event
pdfViewer.ShapeAnnotationAdded += PdfViewer_ShapeAnnotationAdded;

The following code shows how to retrieve the properties of the added shape annotation.

private void PdfViewer_ShapeAnnotationAdded(object sender, ShapeAnnotationAddedEventArgs args)
        {
            //Get the added shape annotation type
            AnnotationMode annotationMode = args.AnnotationType;

            //Get the bounds of the added shape annotation
            CGRect bounds = args.Bounds;

            //Get the page number in which the added shape annotation is present
            int pageNumber = args.PageNumber;

            //Get the data points of the added shape annotation
            List<CGPoint> dataPoints = args.DataPoints;

            //Get the opacity value of the added shape annotation
            nfloat opacity = args.Opacity;            

            //Get the position of the added shape annotation within the page
            CGPoint position = args.Position;

            //Get the stroke color of the added shape annotation 
            UIColor strokeColor = args.StrokeColor;

            //Get the thickness of the added shape annotation
            float thickness = args.Thickness;

        }

Detecting tap on shape annotations

Tapping a shape annotation selects it or deselects it if it is already selected. The ShapeAnnotationTapped event is raised when a shape annotation is tapped. The properties of the tapped shape annotation can be retrieved from the ShapeAnnotationTappedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the ShapeAnnotionTapped event
pdfViewer.ShapeAnnotationTapped += PdfViewer_ShapeAnnotationTapped;

The following code shows how to retrieve the properties of the tapped shape annotation.

private void PdfViewer_ShapeAnnotationTapped(object sender, ShapeAnnotationTappedEventArgs args)
        {
            //Get the tapped shape annotation type
            AnnotationMode annotationMode = args.AnnotationType;

            //Get the bounds of the tapped shape annotation
            CGRect bounds = args.Bounds;

            //Get the page number in which the tapped shape annotation is present
            int pageNumber = args.PageNumber;

            //Get the data points of the tapped shape annotation
            List<CGPoint> dataPoints = args.DataPoints;

            //Get the opacity value of the tapped shape annotation
            nfloat opacity = args.Opacity;

            //Get the position of the tapped shape annotation within the page
            CGPoint position = args.Position;

            //Get the stroke color of the tapped shape annotation 
            UIColor strokeColor = args.StrokeColor;

            //Get the thickness of the tapped shape annotation
            float thickness = args.Thickness;
        }

Selecting Shape annotations

You can select a shape annotation by tapping it. When a shape annotation is selected, the ShapeAnnotationSelected event will be raised. The properties of the selected shape annotation can be retrieved from the ShapeAnnotationSelectedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer();

//Wire up the ShapeAnnotionSelected event
pdfViewer.ShapeAnnotationSelected += PdfViewer_ShapeAnnotationSelected;

The following code shows how to retrieve the properties of the selected shape annotation.

private void PdfViewer_ShapeAnnotationSelected(object sender, ShapeAnnotationSelectedEventArgs args)
{
//Get the selected shape annotation type
AnnotationMode annotationMode = args.AnnotationType;

//Get the bounds of the selected shape annotation
CGRect bounds = args.Bounds;

//Get the page number in which the selected shape annotation is present
int pageNumber = args.PageNumber;

//Get the list of other annotations that overlap the selected annotation
System.Collections.Generic.List<IAnnotation> overlappedAnnotation = args.OverlappedAnnotations;
}

Deselecting Shape annotations

You can deselect a selected shape annotation by tapping on it or somewhere else on the PDF page. Deselection can be detected using the ShapeAnnotationDeselected event. The properties of the deselected shape annotation can be retrieved from the ShapeAnnotationDeselectedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the ShapeAnnotionDeselected event
pdfViewer.ShapeAnnotationDeselected = PdfViewer_ShapeAnnotationDeselected;

The following code shows how to retrieve the properties of the deselected shape annotation.

private void PdfViewer_ShapeAnnotationDeselected(object sender, ShapeAnnotationDeselectedEventArgs args) 
{ 
//Get the deselected shape annotation type
AnnotationMode annotationType = args.AnnotationType; 

//Retrieves the bounds of the deselected shape annotation. 
CGRect bounds = args.Bounds; 

//Retrieves the page number where the deselected shape annotation resides. 
int page = args.PageNumber; 
}

##Moving or resizing the selected shape annotation

To move or resize a shape annotation it should first be selected. After the appearance of the selector, tapping and dragging anywhere inside the selector will move the shape annotation. Tapping on the bubbles around the selector and dragging would resize the shape annotation.

Detecting the move or resize of a shape Annotation

The AnnotationMovedOrResized event will be raised when you move or resize the selected annotation. The properties of the moved or re-sized shape annotation can be retrieved from the AnnotationMovedOrResizedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the AnnotationMovedOrResized event
pdfViewer.AnnotationMovedOrResized = PdfViewer_AnnotationMovedOrResized;

The following code shows how to retrieve the properties of the moved or re-sized shape annotation.

private void PdfViewer_AnnotationMovedOrResized(object sender, AnnotationMovedOrResizedEventArgs args)
        {
            //Determine whether the moved or resized annotation is a shape annotation or some other annotation. 
            if (sender as ShapeAnnotation != null)
            {
                //The annotation is a shape annotation 
            }
            else
            {
                //The annotation is not a shape annotation
            }

            //Retrieve the old bounds of the shape annotation 
            CGRect oldBounds = args.OldBounds;

            //Retrieve the new bounds of the shape annotation 
            CGRect newBounds = args.NewBounds;

            //Get the page number in which the shape annotation is moved or re-sized            
            int pageNumber = args.PageNumber;

            //Get the opacity value of the shape annotation            
            nfloat opacity = args.Opacity;

            //Get the color of the shape annotation
            UIColor color = args.Color;

            //Get the thickness of the shape annotation
            float thickness = args.Thickness;
        }

Deleting the shape annotations

The PDF Viewer allows you to remove a selected annotation or all the annotations in the PDF document.

Removing a selected annotation

The following code sample shows how to remove the selected shape annotation from the PDF document.

ShapeAnnotation shapeAnnotation;
private void PdfViewer_ShapeAnnotationSelected(object sender, ShapeAnnotationSelectedEventArgs args)
        {
            //Cast the sender object as shape annotation. 
            shapeAnnotation = sender as ShapeAnnotation;
        }

private void deleteShapeAnnotationButton_Clicked(object sender, EventArgs e)
        {
            //Delete the shape annotation 
            pdfViewer.RemoveAnnotation(shapeAnnotation);
        }

Detecting the removal of a shape Annotation

The ShapeAnnotationRemoved event will be raised when a shape annotation is removed from the PDF. The properties of the removed shape annotation can be retrieved from the ShapeAnnotationRemovedEventArgs parameter of the event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the ShapeAnnotionRemoved Event
pdfViewer.ShapeAnnotationRemoved = PdfViewer_ShapeAnnotationRemoved;

The following code shows how to retrieve the properties of the removed shape annotation.

private void PdfViewerControl_ShapeAnnotationRemoved(object sender, ShapeAnnotationRemovedEventArgs args)
        {
            //Get the removed shape annotation type
            AnnotationMode annotationMode = args.AnnotationType;

            //Get the bounds of the removed shape annotation
            CGRect bounds = args.Bounds;

            //Get the data points of the removed shape annotation
            List<CGPoint> dataPoints = args.DataPoints;

            //Get the page number in which the removed shape annotation was present
            int pageNumber = args.PageNumber; 
        }

Customizing the appearance of shape annotations

You can customize the default values of stroke color, opacity, maximum height, minimum height, maximum width, minimum width, display text, text background color, text color, text opacity, text size, interaction (locked), thickness, and fill color of the shape annotations that are to be added.

NOTE

This will not affect the shape annotations that were already added. The following properties are common to all the shape annotations. In all code samples, the Rectangle shape annotation is used for illustration purposes.

Setting the default stroke color

You can set the default stroke color for the shape annotations by using the StrokeColor property. Refer to the following code example

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the stroke color for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.StrokeColor = UIColor.Red;

Setting the default opacity

You can set the default opacity for the shape annotations by using the Opacity property. The opacity value ranges from 0 to 1. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the opacity for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.Opacity = 0.5f;

Setting the default fill color

You can set the default fill color for the shape annotations by using the FillColor property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the fill color for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.FillColor = UIColor.Blue;

Setting the default thickness

You can set the thickness for the shape annotations by using the Thickness property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting thickness for the rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.Thickness = 5;

Setting the default text

You can set the text for the shape annotations by using the Text property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the text for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.Text = "Area";

Setting the default text background color

You can set the background color for the text assigned to the shape annotations by using the TextBackgroundColor property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the text background color for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.TextBackgroundColor = UIColor.Black;

Setting the default text color

You can set the color for the text assigned to the shape annotations by using the TextColor property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the text color for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.TextColor = UIColor.Black;

Setting the default text opacity

You can set the opacity for the text assigned to the shape annotations by using the TextOpacity property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the text opacity for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.TextOpacity = 0.5f;

Setting the default text size

You can set the size for the text assigned to the shape annotations by using the TextSize property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the text opacity for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.TextOpacity = 0.5f;

Setting the default minimum height

You can set the minimum height for the shape annotations by using the MinimumHeight property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the minimum height for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.MinimumHeight = 20;

Setting the default minimum width

You can set the minimum width for the shape annotations by using the MinimumWidth property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the minimum width for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.MinimumWidth = 20;

Setting the default maximum height

You can set the maximum height for the shape annotations by using the MaximumHeight property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the maximum height for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.MaximumHeight = 60;

Setting the default maximum width

You can set the maximum width for the shape annotations by using the MaximumWidth property. Refer to the following code example.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Setting the minimum width for rectangle shape annotation
pdfViewer.AnnotationSettings.Rectangle.Settings.MinimumWidth = 20;

Changing the properties of a selected shape annotation

You can change the properties of the selected annotation by casting the sender parameter of the ShapeAnnotationSelected event handler to ShapeAnnotation and modifying its properties. The following code shows how to change the properties.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer(); 

//Wire up the ShapeAnnotionRemoved Event
pdfViewer.ShapeAnnotationSelected = PdfViewer_ShapeAnnotationSelected;

 private void PdfViewer_ShapeAnnotationSelected(object sender, ShapeAnnotationSelectedEventArgs args)
        {
            //Get the type of the annotation. Here, it is a rectangle.
            AnnotationMode annotationMode = args.AnnotationType;

            //Cast the sender object as shape annotation. 
            ShapeAnnotation selectedShapeAnnotation = sender as ShapeAnnotation;

            //Set the stroke color of the selected annotation using the shape annotation settings. 
            selectedShapeAnnotation.Settings.StrokeColor = UIColor.Blue;

            //Set the opacity of the selected annotation using the shape annotation settings. 
            selectedShapeAnnotation.Settings.Opacity = 0.3f;

            //Set the thickness of the selected annotation using the shape annotation settings. 
            selectedShapeAnnotation.Settings.Thickness = 3;

            //Set the fill color of the selected annotation using the shape annotation settings. 
            selectedShapeAnnotation.Settings.FillColor = UIColor.Red;

            //Set the minimum height for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.MinimumHeight = 20;

            //Set the minimum width for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.MinimumWidth = 20;

            //Set the maximum width for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.MaximumWidth = 80;

            //Set the maximum height for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.MaximumHeight = 80;

            //Set the text for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.Text = "Rectangle";

            //Set the text background color for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.TextBackgroundColor = UIColor.Black;

            //Set the text color for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.TextColor = UIColor.Black;

            //Set the text opacity for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.TextOpacity = 0.5f;

            //Set the text size for the selected annotation using the shape annotation settings.
            selectedShapeAnnotation.Settings.TextSize = 12;
        }

How to enable or disable the shape annotation interaction

The interaction operation can be enabled or disabled for the shape annotation alone by setting the SfPdfViewer.AnnotationSettings.Rectangle.IsLocked API to false or true respectively.

For example, the following code disables the interaction operations for all shape annotations in the PDF. But the other annotation types can be selected, moved, resized, or removed.

//Disable the arrow annotation interaction 
pdfViewerControl.AnnotationSettings.Arrow.IsLocked = true; 

//Disable the line annotation interaction 
pdfViewerControl.AnnotationSettings.Line.IsLocked = true; 

//Disable the rectangle annotation interaction 
pdfViewerControl.AnnotationSettings.Rectangle.IsLocked = true;
 
//Disable the circle annotation interaction 
pdfViewerControl.AnnotationSettings.Circle.IsLocked = true;

//Disable the polygon annotation interaction 
pdfViewerControl.AnnotationSettings.Polygon.IsLocked = true;

The interaction with shape annotation types will be allowed only if, the SfPdfViewer.AnnotationSettings.IsLocked API is set to false. The following code does not allow the interactions with shape annotations, although the SfPdfViewer.AnnotationSettings.Rectangle.IsLocked property of the shape annotation is set to false.

//Disables the shape annotation interaction, though its 'IsLocked' property is set to `false` 
pdfViewerControl.AnnotationSettings.IsLocked = true; 

pdfViewerControl.AnnotationSettings.Arrow.IsLocked = false;

pdfViewerControl.AnnotationSettings.Line.IsLocked = false; 

pdfViewerControl.AnnotationSettings.Rectangle.IsLocked = false; 

pdfViewerControl.AnnotationSettings.Circle.IsLocked = false;

pdfViewerControl.AnnotationSettings.Polygon.IsLocked = false;

How to get the list of Annotations that overlaps the selected shape Annotation

You can retrieve the list of Annotations that overlaps the selected shape Annotation from the ShapeAnnotationSelectedEventArgs parameter of the ShapeAnnotationSelected event handler.

//Initialize the SfPdfViewer
SfPdfViewer pdfViewer = new SfPdfViewer();

//Wire up the ShapeAnnotionSelected event
pdfViewer.ShapeAnnotationSelected += PdfViewer_ShapeAnnotationSelected;

private void PdfViewer_ShapeAnnotationSelected(object sender, ShapeAnnotationSelectedEventArgs args)
        {
            // Get the list of Annotations that overlap the selected Annotation
            System.Collections.Generic.List<IAnnotation> overlappedAnnotation = args.OverlappedAnnotations;
        }