How to Customize arrow heads in Blazor PDF Viewer

14 Aug 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.

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