Syncfusion AI Assistant

How can I help you?

Customize the arrow annotation heads in Blazor SfPdfViewer Component

12 Feb 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 the start and end arrow heads for arrow annotations.

@using Syncfusion.Blazor.SfPdfViewer

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

@code
{
    public SfPdfViewer2 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

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.

View sample in GitHub.

See also