Syncfusion AI Assistant

How can I help you?

Toolbar Customization in .NET MAUI PDF Viewer (SfPdfViewer)

25 Mar 202611 minutes to read

The SfPdfViewer allows you to fully customize its built-in toolbars — including showing or hiding entire toolbars, and adding, removing, or reordering individual toolbar items. This flexibility lets you tailor the viewer’s interface to match your application’s workflow.

For the list of toolbar names and toolbar item names, see Toolbar.

Show and hide all toolbars

The built-in toolbars are visible by default. In certain scenarios, you might want to hide all the toolbars in the PDF Viewer to display the document in full view or to use customized toolbars based on your application needs. You can do this by setting the ShowToolbars property to false. Set it back to true to restore the built-in toolbars.

// Hide all toolbars
public MainPage()
{
    SfPdfViewer pdfViewer = new SfPdfViewer();
    pdfViewer.ShowToolbars = false;
}
<ContentPage.Content>
    <syncfusion:SfPdfViewer x:Name="pdfViewer"
                            DocumentSource="{Binding PdfDocumentStream}"
                            ShowToolbars="False" />
</ContentPage.Content>

You can find the sample project from the link provided here.

Show and hide specific toolbars

Sometimes, you might need to hide specific toolbars instead of all. This can be useful if you want to simplify the user interface by removing unnecessary tools or creating a more focused environment for certain tasks. The Toolbars collection property in the PDF Viewer allows you to hide a specific toolbar by using its index or name.

Hide specific toolbars by index

If you know the position of the toolbar you want to hide within the Toolbars collection, you can access and hide it using its index. For example, the following code hides the first and second toolbars in the collection.

if (pdfViewer?.Toolbars?.Count > 1)
{
    var firstToolbar = pdfViewer?.Toolbars[0];
    if (firstToolbar != null)
        firstToolbar.IsVisible = false; // Hide the first toolbar

    var secondToolbar = pdfViewer?.Toolbars[1];
    if (secondToolbar != null)
        secondToolbar.IsVisible = false; // Hide the second toolbar
}

Hide specific toolbars by name

By using the GetByName method with a specified toolbar name, you can access and modify that toolbar’s properties. The following example retrieves the BottomToolbar by name and hides it.

// On mobile, access the bottom toolbar using the GetByName method.
var toolbar = pdfViewer.Toolbars?.GetByName("BottomToolbar");
if (toolbar != null)
{
    toolbar.IsVisible = false; // Hide the bottom toolbar
}

NOTE

For the full list of toolbar names, see Mobile toolbar names and Desktop toolbar names.

Manage toolbar items

In addition to customizing the visibility of toolbars, you can customize the items within each toolbar. This includes adding new items, removing existing ones, or rearranging their order to suit your app’s workflow better.

NOTE

All toolbar customization code should run after the PDF Viewer has been initialized and attached to the visual tree. The recommended place is the DocumentLoaded event handler or the page’s OnAppearing() override — not the constructor, where the toolbar may not yet be populated.

Add a new toolbar item

To add an item to a toolbar, first create the UI element you want to include, then convert it into a ToolbarItem, and finally add it to the toolbar using the Add method. The following example creates a button and adds it to the PrimaryToolbar.

// Recommended: place inside the DocumentLoaded event handler or OnAppearing().
// Create the button you want to add to the toolbar.
Button fileOpenButton = new Button
{
    Text = "\ue712",
    FontSize = 24,
    IsEnabled = false,
    FontFamily = "Maui Material Assets",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    BackgroundColor = Colors.Transparent,
    BorderColor = Colors.Transparent,
    Padding = 10,
    Margin = new Thickness(5, 0, 0, 0),
    Opacity = 0.5
};

// Access the PrimaryToolbar (desktop) and append the new item at the end.
pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Add(
    new Syncfusion.Maui.PdfViewer.ToolbarItem(fileOpenButton, "FileOpenButton"));

Add a toolbar item at a specific index

To add an item at a specific index, use the Insert method. Use the Index property to get the current index of an existing item, then insert the new item relative to it. The following example inserts a save button right after the Print button in the PrimaryToolbar.

// Create a button you want to add.
Button fileSaveButton = new Button
{
    Text = "\ue75f",
    FontSize = 24,
    FontFamily = "Maui Material Assets",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    BackgroundColor = Colors.Transparent,
    BorderColor = Colors.Transparent,
    IsEnabled = false,
    Opacity = 0.5,
    Padding = 10
};

// Access the Print item in PrimaryToolbar and insert the new button after it.
var item = PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Print");
if (item != null)
{
    PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Insert(
        item.Index + 1,
        new Syncfusion.Maui.PdfViewer.ToolbarItem(fileSaveButton, "FileSaveButton"));
}

Remove a toolbar item by index

You can access a specific item using its index and remove it from the toolbar’s Items collection using the Remove method. The following example retrieves and removes the first item from the TopToolbar.

// Get the top toolbar on mobile platforms.
Syncfusion.Maui.PdfViewer.Toolbar? topToolbar = PdfViewer.Toolbars?.GetByName("TopToolbar");
if (topToolbar != null)
{
    // Get the first item from the toolbar.
    Syncfusion.Maui.PdfViewer.ToolbarItem? firstItem = topToolbar.Items?[0];
    if (firstItem != null)
    {
        // Remove the first item from the toolbar.
        topToolbar?.Items?.Remove(firstItem);
    }
}

Remove a toolbar item by name

Use the GetByName method to access a specific item and then call Remove to remove it. The following example removes the Outline item from the PrimaryToolbar.

// Access the Outline item in PrimaryToolbar and remove it.
var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Outline");
if (item != null)
{
    pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Remove(item);
}

Remove an item from all toolbars

Each toolbar in SfPdfViewer operates independently — removing an item from one toolbar does not affect others. To remove an item from all toolbars, iterate through the Toolbars collection and remove the item from each. The following example removes the StickyNote item from all toolbars.

// Iterate through all toolbars and remove the StickyNote item from each.
for (int i = 0; i < pdfViewer?.Toolbars?.Count; i++)
{
    var item = pdfViewer.Toolbars?[i]?.Items?.GetByName("StickyNote");
    if (item != null)
    {
        pdfViewer?.Toolbars?[i]?.Items?.Remove(item);
    }
}

You can find the sample project for removing an item from the desktop toolbar using the link provided here.

Hide a toolbar item by index

To hide a toolbar item by its index, access the item in the Items collection and set its IsVisible property to false.

int indexToHide = 2; // Replace with the actual index of the item you want to hide.

var toolbar = pdfViewer.Toolbars?.GetByName("PrimaryToolbar");
if (toolbar != null && indexToHide >= 0 && indexToHide < toolbar.Items?.Count)
{
    var item = toolbar.Items[indexToHide];
    item.IsVisible = false; // Hide the item by index
}

Hide a toolbar item by name

Use the GetByName method to access a specific item, then set its IsVisible property to false. The following example hides the Search item in the PrimaryToolbar.

// On desktop, access the Search button in the PrimaryToolbar and hide it.
var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Search");
if (item != null)
{
    item.IsVisible = false; // Hide the search item
}

Hide an item in all toolbars

Each toolbar operates independently, so hiding an item in one toolbar does not affect others. To hide an item across all toolbars, iterate through the Toolbars collection. The following example hides the Signature icon in every toolbar where it appears.

// Iterate through all toolbars and hide the Signature item in each.
for (int i = 0; i < pdfViewer?.Toolbars?.Count; i++)
{
    var item = pdfViewer.Toolbars[i]?.Items?.GetByName("Signature");
    if (item != null)
    {
        item.IsVisible = false; // Hide the Signature item
    }
}

NOTE

You can identify items that appear in multiple toolbars by checking the availability column in Mobile toolbar item names and Desktop toolbar item names.

See Also