Customize the arrow annotation head in Blazor SfPdfViewer Component

17 Jul 20261 minute to read

Use the ArrowSettings API to customize arrow annotations, including the start and end arrow head styles.

The following example shows how to remove arrow heads from arrow annotations.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 @ref="@Viewer"
              DocumentPath="@DocumentPath"
              ArrowSettings="@ArrowSettings"
              Height="100%"
              Width="100%">
    <PdfViewerEvents DocumentLoaded="DocumentLoad"></PdfViewerEvents>
</SfPdfViewer2>

@code
{
    private SfPdfViewer2 Viewer { get; set; }

    private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings 
    { 
        //Removes the start arrow head.
        LineHeadStartStyle=LineHeadStyle.None,
        //Removes the end arrow head.
        LineHeadEndStyle=LineHeadStyle.None
    };

    //Invoked when the document is loaded in the PDF Viewer.
    private void DocumentLoad(LoadEventArgs args)
    {
        //Shows the AnnotationToolbar on initial loading.
        Viewer.ShowAnnotationToolbar(true);        
    }
}

View sample in GitHub.

NOTE

ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set LineHeadStartStyle and LineHeadEndStyle to LineHeadStyle.None to remove heads. Other common values include LineHeadStyle.Closed, LineHeadStyle.Round, LineHeadStyle.Square, LineHeadStyle.ClosedArrow, LineHeadStyle.Diamond, and LineHeadStyle.Open.

See also