Create a New Tool in Our Viewer Toolbar

The main differentiator between built-in toolbar items and user-defined ones is the Id, which is used to explicitly identify the latter. You can add one of the built-in types or a custom toolbar item of type CustomMainToolbarItem, CustomMainToolbarButton, or CustomMainToolbarToggleButton to the main toolbar. All these types are subclasses of MainToolbarItems:

using static PSPDFKit.Sdk.Models.Toolbar.MainToolbarItems;

...

var toolbarItem = new CustomMainToolbarItem("customItemId");

var toolbarButton = new CustomMainToolbarButton("customButtonId")
{
    Icon = "newIcon.svg",
    Tooltip = "My button",
};
toolbarButton.Clicked += (s, e) => Debug.WriteLine("My button clicked");

var toolbarToggleButton = new CustomMainToolbarToggleButton("customToggleButtonId")
{
    Icon = "newIcon.svg",
    Tooltip = "My button",
    IsSelected = true,
};
toolbarToggleButton.Clicked +=
  (s, e) => Debug.WriteLine("My toggle button clicked");

When the Icon for a button is missing, the Tooltip will instead be displayed as Button.Text. This is useful if you want to create text-only buttons.

The Clicked event is invoked when a button is either clicked or tapped (on touch devices).

Once the custom button is ready, it’s possible to insert it into the current list:

PSPDFKitController.MainToolbar.ToolbarItems.Add(toolbarItem)
PSPDFKitController.MainToolbar.ToolbarItems.Add(toolbarButton)
PSPDFKitController.MainToolbar.ToolbarItems.Add(toolbarToggleButton)

Control Item Visibility via MediaQueries

Each toolbar item’s visibility is controlled by its MediaQueries property. When MediaQueries isn’t defined, the item will always be visible.

MediaQueries is an observable collection of valid CSS media query strings.

Additionally, built-in items have extra internal logic that, under some circumstances, removes them from the list.

Toolbar Layout and the Spacer Item

The items list is rendered as a flat list of sibling elements that are separated by a special toolbar item called SpacerItem. This solution makes the toolbar layout flexible and easy to customize.

The SpacerItem is an empty element, and it pushes items from both sides together, making them more compact. You can insert as many SpacerItems as you want.