Working with Built-In Toolbar in Xamarin Pdf Viewer (SfPdfViewer)

6 Jan 20235 minutes to read

The SfPdfViewer has a built-in toolbar that has provisions to perform majority of the operations in the PDF Viewer and that can be shown or hidden. You can hide the built-in toolbar and develop your own toolbar.

How to show/hide built-in toolbar

By default, the built-in toolbar will be visible. It can be hidden by setting the IsToolbarVisible property of PDF Viewer to false.

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace: PdfViewerGettingStarted "
             xmlns:syncfusion ="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms"
             x:Class=" PdfViewerGettingStarted.MainPage">
    <ContentPage.Content>
        <syncfusion:SfPdfViewer x:Name="pdfViewerControl" IsToolbarVisible="False" />
    </ContentPage.Content>
</ContentPage>

C#

pdfViewerControl.IsToolbarVisible = false;

The toolbar can be shown by setting the IsToolbarVisible property to true.

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace: PdfViewerGettingStarted "
             xmlns:syncfusion ="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms"
             x:Class=" PdfViewerGettingStarted.MainPage">
    <ContentPage.Content>
        <syncfusion:SfPdfViewer x:Name="pdfViewerControl" IsToolbarVisible="True" />
    </ContentPage.Content>
</ContentPage>

C#

pdfViewerControl.IsToolbarVisible = true;

NOTE

The older API SfPdfViewer.Toolbar.Enabled have been marked as obsolete.

How to show/hide built-in toolbar dynamically using data binding

The below code snippet illustrates how to show/hide the built-in toolbar dynamically at run time using data binding.

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace: PdfViewerGettingStarted "
             xmlns:syncfusion ="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms"
             x:Class=" PdfViewerGettingStarted.MainPage">			 
	<ContentPage.BindingContext>
        <local:PdfViewerViewModel></local:PdfViewerViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfPdfViewer x:Name="pdfViewerControl" IsToolbarVisible={Binding ToolbarVisible} />
    </ContentPage.Content>
</ContentPage>

How to disable/enable bookmark

By default, the bookmark button will be enabled. It can be disabled by setting the BookmarkNavigationEnabled property of PDF Viewer to false.

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace: PdfViewerGettingStarted "
             xmlns:syncfusion ="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms"
             x:Class=" PdfViewerGettingStarted.MainPage">
    <ContentPage.Content>
        <syncfusion:SfPdfViewer x:Name="pdfViewerControl" BookmarkNavigationEnabled="False"/>
    </ContentPage.Content>
</ContentPage>

C#

//Bookmark feature is disabled
pdfViewerControl. BookmarkNavigationEnabled = false;

How to show/hide the toolbar items in built-in toolbar

The built-in toolbar in PdfViewer includes various items to perform operations such as navigation (bookmark, hyperlink and table of contents) and reviewing the PDF files with different annotation tools. These toolbar items can be hidden and customized as per the requirement.

The items in the toolbar is shown or hidden using the following API.

C#

//Show/Hide the toolbar item(s)
pdfViewerControl.Toolbar.SetToolbarItemVisibility(string itemName, bool isVisible);

For an example, the following code snippet explains how to hide the Save button from the built-in toolbar.

C#

//Hides the 'Save' button
pdfViewerControl.Toolbar.SetToolbarItemVisibility(“save”, false);

Similarly, the other items can be hidden by mentioning the appropriate key names. Find the key names of all the toolbar items from the following table:

Toolbar Item Name	Key Name
Page view mode button	page-view-mode
Continuous page view mode button	continuous-pages
Single page view mode button	page-by-page
Bookmark button	bookmark
Page number entry	page-entry
Page count label	page-count
Previous page button	previous-page
Next page button	next-page
Search button	search
Search back button	search-back
Search Bar	search-bar
Clear/Cancel search button	search-clear
Search next button	search-next
Search previous button	search-previous
Search instances label	search-instances
More options button	more-options
Undo button	undo
Redo button	redo
Save button	save
Print button	print
Annotation button	annotation
Annotation back button	annotation-back
Text markups annotation button	text-markups
Text markups back button	text-markups-back
Text highlight button	text-highlight
Text underline button	text-underline
Text strikethrough button	text-strikethrough
Text squiggly button	text-squiggly
Shapes annotation button	shapes
Shapes back button	shapes-back
Rectangle shape button	rectangle
Ellipse shape button	ellipse
Line shape button	line
Arrow shape button	arrow
Polygon shape button	polygon
Polyline shape button	polyline
Cloud shape button	cloud
Ink annotation button	ink
Ink undo button	undo-ink
Ink redo button	redo-ink
Ink confirmation button	done
Free text annotation button	free-text
Signature button	signature
Selected annotation button	selected-annotation
Edited annotation button	edited-annotation
Selected annotation back button	selected-annotation-back
Edited annotation back button	edited-annotation-back
Selected annotation color button	selected-annotation-color
Edited annotation color button	edited-annotation-color
Magenta color button	magenta
Black color button	black
Red color button	red
Green color button	green
Yellow color button	yellow
Blue color button	blue
Cyan color button	cyan
Color opacity button	opacity
Color opacity slider	opacity-slider
Font size button	font-size
Font size label	font-label
Font range slider	font-range-slider
Selected annotation thickness button	selected-annotation-thickness
Edited annotation thickness button	edited-annotation-thickness
First thickness button	1pt-thickness
Second thickness button	3pt-thickness
Third thickness button	5pt-thickness
Fourth thickness button	7pt-thickness
Fifth thickness button	9pt-thickness
Edited annotation font size button	edited-annotation-font-size
Edited annotation modify free text button	edited-annotation-modify-free-text
Edited annotation delete button	edited-annotation-delete
Page count separator	pagecount-separator
Popup annotation button	popup
Popup icon selector button	popup-iconselector
Selected popup icon selector button	selected-popup-iconselector
Popup comment icon button	popup-comment
Popup note icon button	popup-note
Popup help icon button	popup-help
Popup insert icon button	popup-insert
Popup key icon button	popup-key
Popup new paragraph icon button	popup-newparagraph
Popup paragraph icon button	popup-paragraph
Ink eraser button	ink-eraser
Ink eraser undo button	undo-eraser
Ink eraser redo button	redo-eraser

NOTE

You can refer to our Xamarin PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms PDF Viewer example to knows the functionalities of each feature.