Customizing the Toolbar

PSPDFKit comes with a very useful toolbar by default, but it’s also important for individuals to modify toolbar items to suit their needs. As such, it’s possible to add, remove, or reorder all the buttons on the toolbar, and there are also more advanced options, like the responsive grouping of buttons and custom icons.

Add a Toolbar Item

The following code shows an example of how a custom item can be added to the toolbar:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var toolbarItem = new ButtonToolbarItem
{
    Attributes =
    {
        Id = "id",
        Title = "Button",
    },
    Icon = new Uri("ms-appx-web:///Assets/ToolbarIcons/status_completed.svg")
};
toolbarItem.OnItemPressEvent += ToolbarItem_OnPressAsync;

var toolbarItems = PdfView.GetToolbarItems();
toolbarItems.Add(toolbarItem);
await PdfView.SetToolbarItemsAsync(toolbarItems);

First, a [ButtonToolbarItem][buttontoolbaritem] is created with a custom Icon. Set the Id to ensure the correct onPress listener is called, and set a Title to be shown. Note that if an Icon is defined, the title will be used to show a hint if the mouse hovers over the icon button. OnItemPressEvent then has a function callback assigned to receive notifications when the user clicks the custom button. The toolbar item can then be inserted into the list of toolbar items. The position of where the item is inserted into the list will determine in which position it appears on the toolbar.

Remove a Toolbar Item

Removing an item from the toolbar is even simpler than adding an item:

1
2
3
var toolbarItems = PdfView.GetToolbarItems();
toolbarItems.RemoveAt(0);
await PdfView.SetToolbarItemsAsync(toolbarItems);

The code above will remove the item at position zero, i.e. remove the item at the start of the toolbar. Extra logic can be applied to find the required item and remove it from the list before SetToolbarItemsAsync.

Reorder the Toolbar Items

As seen when adding and removing items, the order is determined by the order inserted into the list. As such, we can simply reorder the items on the toolbar by reordering the items in the list. The following example shows how to randomly shuffle the items on the toolbar:

Copy
1
2
3
var toolbarItems = PdfView.GetToolbarItems();
var shuffledList = toolbarItems.OrderBy(a => Guid.NewGuid()).ToList();
await PdfView.SetToolbarItemsAsync(shuffledList);

Responsive Group

As the size of screen is not often known, it is great to have the ability to dynamically hide toolbar items dependent upon a given metric. With PSPDFKit, you can define a ResponsiveGroupToolbarItem item that other [IToolbarItem][itoolbaritem]s can reference in order to create a collapsed grouping:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var responsiveGroup = new ResponsiveGroupToolbarItem
{
    Attributes =
    {
        Id = "my-group",
        MediaQueries = new List<string> { "(max-width:600px)" },
    },
    Icon = new Uri("ms-appx-web:///Assets/ToolbarIcons/status_completed.svg")
};

var toolbarItem = new ToggleButtonToolbarItem()
{
    Attributes =
    {
        Id = "id",
        Title = "Button",
        ResponsiveGroup = "my-group"
    }
};

toolbarItem.OnItemPressEvent += ToolbarItem_OnPressAsync;

var toolbarItems = PdfView.GetToolbarItems();
toolbarItems.Insert(0, responsiveGroup);
toolbarItems.Add(toolbarItem);
await PdfView.SetToolbarItemsAsync(toolbarItems);

If the view is less than 600px wide, then the ResponsiveGroupToolbarItem will be shown at index 0. When the responsive group button is pressed, the custom button is revealed. But when the view is larger than 600px wide, the button will be shown as normal.

Annotation Presets

Annotation presets are sets of default properties assigned to each annotation button. With annotation presets, you can configure default values for annotation properties created with the annotation button — for example, default colors.

Annotation presets can be modified to use customized property values. These values will be updated by default when the user changes the settings in the annotation toolbar. It is possible to disable update events if required.

Below, the line item preset is modified so that line annotations have a red color, are transparent, and have a thick stroke width by default:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
// Get the Dictionary of string -> IAnnotation presets.
var presets = await pdfView.Controller.GetAnnotationPresetsAsync();

// We know "line" is a Line class.
var line = (Line)presets["line"];

// Change some defaults.
line.StrokeWidth = 10;
line.Opacity = 0.5f;
line.StrokeColor = Colors.Red;

// Set the preset.
await pdfView.Controller.SetAnnotationPresetAsync("line", line);

Preset Update Events

The following code is taken from the example Catalog app provided with our SDK. It demonstrates how to register an event handler for preset changes made by the user in the annotation toolbar:

Copy
1
2
3
4
5
6
pdfView.Controller.OnAnnotationPresetUpdate += async (sender, annotation) =>
{
    var from = await Json.StringifyAsync(annotation.Current);
    var to = await Json.StringifyAsync(annotation.New);
    Events.Add($"Preset updated for {annotation.Name} from:\n {from}\nTo:\n{to}");
};

Preset update events can be disabled. When disabled, any changes to the settings made by the user via the annotation toolbar will not be preserved after the user is finished creating an annotation:

1
2
// Disable preset updating.
await pdfView.Controller.DisableAnnotationPresetUpdatingAsync(true);