Customize annotations in Blazor
12 May 20267 minutes to read
Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. This page summarizes common customization patterns and shows how to set defaults per annotation type.
Customize via UI
Use the annotation toolbar after selecting an annotation:
- Edit color: changes the annotation fill/text color
- Edit stroke color: changes border or line color for shapes and lines types.
- Edit thickness: adjusts border or line thickness
- Edit opacity: adjusts transparency
NOTE
Type‑specific options (for example, Line properties) are available from the context menu (right‑click > Properties) where supported.
Set Default Properties During Initialization
Set defaults for specific annotation types when creating the SfPdfViewer2 component. Configure properties such as author, subject, color, and opacity using annotation settings. The examples below reference settings used on the annotation type pages.
Text markup annotations:
- Highlight: Set default properties before creating the control using HighlightSettings
- Strikethrough: Use StrikethroughSettings
- Underline: Use UnderlineSettings
- Squiggly: Use SquigglySettings
Shape annotations:
- Line: Use LineSettings
- Arrow: Use ArrowSettings
- Rectangle: Use RectangleSettings
- Circle: Use CircleSettings
- Polygon: Use PolygonSettings
Set defaults for specific annotation types when creating the SfPdfViewer2 component. Below are examples using settings already used in the annotation type pages.
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 @ref="@viewer"
DocumentPath="@DocumentPath"
LineSettings="@LineSettings"
ArrowSettings="@ArrowSettings"
RectangleSettings="@RectangleSettings"
CircleSettings="@CircleSettings"
PolygonSettings="@PolygonSettings"
Width="100%"
Height="100%">
</SfPdfViewer2>
@code {
SfPdfViewer2 viewer;
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
// Text markup defaults
PdfViewerLineSettings LineSettings = new PdfViewerLineSettings
{
StrokeColor = "#0066ff",
Thickness = 2,
Opacity = 0.8
};
PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings
{
StrokeColor = "#0066ff",
Thickness = 2,
Opacity = 0.8
};
PdfViewerRectangleSettings RectangleSettings = new PdfViewerRectangleSettings
{
FillColor = "#ffffff00",
StrokeColor = "#222222",
Thickness = 1,
Opacity = 1
};
PdfViewerCircleSettings CircleSettings = new PdfViewerCircleSettings
{
FillColor = "#ffffff00",
StrokeColor = "#222222",
Thickness = 1,
Opacity = 1
};
PdfViewerPolygonSettings PolygonSettings = new PdfViewerPolygonSettings
{
FillColor = "#ffffff00",
StrokeColor = "#222222",
Thickness = 1,
Opacity = 1
};
}NOTE
After changing defaults using UI tools (for example, Edit color or Edit opacity), the updated values apply to subsequent annotations within the same session.
Customize Programmatically at Runtime
To update an existing annotation from code, modify its properties and call EditAnnotationAsync.
Example: bulk‑update matching annotations.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer
<SfButton OnClick="BulkUpdateAnnotations">Bulk Update Annotations</SfButton>
<SfPdfViewer2 @ref="@Viewer"
DocumentPath="@DocumentPath"
Height="100%"
Width="100%">
</SfPdfViewer2>
@code {
SfPdfViewer2 Viewer;
public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
public async void BulkUpdateAnnotations(MouseEventArgs args)
{
// Get all annotations
List<PdfAnnotation> annotationCollection = await Viewer.GetAnnotationsAsync();
// Example criteria; customize as needed
foreach (var ann in annotationCollection)
{
if (ann.Author == "Guest" || ann.Subject == "Rectangle")
{
ann.Color = "#ff0000";
ann.Opacity = 0.8;
// For shapes/lines you can also change StrokeColor/Thickness when applicable
// ann.StrokeColor = "#222222";
// ann.Thickness = 2;
await Viewer.EditAnnotationAsync(ann);
}
}
}
}Customize Annotation Settings
Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using the AnnotationSettings property.
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 @ref="viewer"
DocumentPath="@DocumentPath"
Height="100%"
Width="100%"
AnnotationSettings="@AnnotationSettings">
</SfPdfViewer2>
@code {
SfPdfViewer2 viewer;
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
PdfViewerAnnotationSettings AnnotationSettings = new PdfViewerAnnotationSettings
{
Author = "XYZ",
MinHeight = 10,
MinWidth = 10,
MaxWidth = 100,
MaxHeight = 100,
IsLock = false,
SkipPrint = false,
SkipDownload = false
};
}Customize Annotation SelectorSettings
Defines the settings of annotation selector. You can customize the annotation selector using the AnnotationSelectorSettings property on individual annotation settings classes.
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 @ref="viewer"
DocumentPath="@DocumentPath"
Height="100%"
Width="100%"
RectangleSettings="@RectangleSettings">
</SfPdfViewer2>
@code {
SfPdfViewer2 viewer;
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
PdfViewerRectangleSettings RectangleSettings = new PdfViewerRectangleSettings
{
AnnotationSelectorSettings = new PdfViewerAnnotationSelectorSettings
{
SelectionBorderColor = "blue",
ResizerBorderColor = "red",
ResizerFillColor = "#4070ff",
ResizerSize = 8,
SelectionBorderThickness = 1,
ResizerShape = AnnotationResizerShape.Circle
}
};
}