Customize the arrow annotation heads in Blazor PDF Viewer Component

7 Oct 20241 minute to read

You can customize the arrow annotation using the ArrowSettings API.

The following code illustrates how to remove the starting arrow and end arrow from arrow annotation.

@using Syncfusion.Blazor.PdfViewer
@using Syncfusion.Blazor.PdfViewerServer

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

@code
{
    public SfPdfViewerServer Viewer { get; set; }

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

    PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings 
    { 
        //To remove the starting arrow.
        LineHeadStartStyle=LineHeadStyle.None,
        //To remove the end arrow.
        LineHeadEndStyle=LineHeadStyle.None
    };

    //Invokes while loading document in the PDFViewer. 
    public void DocumentLoad(LoadEventArgs args)
    {
        //Shows the AnnotationToolbar on initial loading.
        Viewer.ShowAnnotationToolbar(true);        
    }
}

NOTE

View sample in GitHub.