Skip to content

annotation-toolbar.md

Latest commit

 

History

History
102 lines (71 loc) · 4.64 KB

annotation-toolbar.md

File metadata and controls

102 lines (71 loc) · 4.64 KB
layout post
title Customize the annotation toolbar in Blazor SfPdfViewer | Syncfusion
description Learn how to customize the annotation toolbar in the Syncfusion Blazor SfPdfViewer by showing or hiding default items.
platform document-processing
control SfPdfViewer
documentation ug

Annotation toolbar customization

Customize which tools appear in the annotation toolbar, control their order, and toggle toolbar visibility programmatically.

Show or hide the annotation toolbar

Toggle the annotation toolbar during initialization or at runtime using the EnableAnnotationToolbar property or the ShowAnnotationToolbar method.

Example: show the annotation toolbar when a document loads.

@using Syncfusion.Blazor.SfPdfViewer

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

@code {

    private string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    SfPdfViewer2 viewer;

    //Invokes while loading document in the PDFViewer.
    public void DocumentLoad(LoadEventArgs args)
    {
        //Shows the annotation toolbar on initial loading.
        viewer.ShowAnnotationToolbar(true);
        //Code to hide the annoatation toolbar.
        //viewer.ShowAnnotationToolbar(false);
    }
}

View the sample on GitHub.

Customize annotation toolbar items

Use PdfViewerToolbarSettings to specify which annotation tools are shown and their order. The property accepts a list of AnnotationToolbarItems values; only listed items are rendered, and the displayed order follows the list sequence.

Include the Close tool so users can exit the annotation toolbar when needed. The annotation toolbar appears when entering annotation mode in SfPdfViewer2 and adapts responsively to available width.

Example: configure a custom set of annotation tools.

<!-- Container for the PDF Viewer -->
<div class="Pdf-viewer-container">
    <!-- SfPdfViewer2 component with annotation toolbar enabled -->
    <SfPdfViewer2 @ref="PdfViewerInstance" EnableFormDesigner="true" 
                  DocumentPath="wwwroot/data/Form_Designer.pdf"
                  Height="650px"
                  Width="100%">
                  
                  <!-- Configuring the annotation toolbar items -->
                  <PdfViewerToolbarSettings AnnotationToolbarItems="AnnotationToolbarItems"></PdfViewerToolbarSettings>
    </SfPdfViewer2>
</div>

@code {
    // Reference to the SfPdfViewer2 instance
    SfPdfViewer2 PdfViewerInstance { get; set; }

    // Define a list of annotation toolbar items to be displayed and usable
    List<AnnotationToolbarItem> AnnotationToolbarItems { get; set; } = new List<AnnotationToolbarItem>() 
    {
        AnnotationToolbarItem.UnderlineTool,
        AnnotationToolbarItem.StampAnnotationTool,
        AnnotationToolbarItem.FreeTextAnnotationTool,
        AnnotationToolbarItem.FontSizeAnnotationTool,
        AnnotationToolbarItem.CloseTool
    };
}

Refer to the image below for the desktop view (items shown in the order configured).

Annotation toolbar with selected tools on desktop

Refer to the image below for the mobile view (responsive layout adapts to width).

Annotation toolbar with selected tools on mobile

View the sample on GitHub

N> Properties tools (color, opacity, thickness, font, etc.) now appear only after you select or add the related annotation. Until you select or add one, these tools are hidden.

N> This change reduces clutter and shows options only when they’re relevant to the selected annotation.

See also