PDF Viewer Toolbar

The PDF Viewer Toolbar includes some of the commands that the PDF Viewer provides. You also have the option to include additional toolbar items in the PdfViewerToolbar through a custom command.

The Toolbar is part of , the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.

Download Free Trial

Predefined Toolbar Items

By default, the PDF Viewer Toolbar provides the following toolbar items:

• PdfViewerZoomInToolbarItem
• PdfViewerZoomOutToolbarItem
• PdfViewerNavigateToNextPageToolbarItem
• PdfViewerNavigateToPreviousPageToolbarItem
• PdfViewerFitToWidthToolbarItem

PdfToolbarItems inherit from ButtonToolbarItem. All properties applicable for ButtonToolbarItem are available for the PDF Viewer toolbar items.

The following example demonstrates how to use the Toolbar and its predefined items:

1. Use the following snippet to define the RadPdfViewer and RadPdfToolbar:

<Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
    <telerik:RadPdfViewerToolbar Grid.Row="{OnIdiom Desktop=0, Phone=1}"
                                 PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <telerik:PdfViewerFitToWidthToolbarItem />
        <telerik:PdfViewerZoomInToolbarItem />
        <telerik:PdfViewerZoomOutToolbarItem />
        <telerik:PdfViewerNavigateToPreviousPageToolbarItem />
        <telerik:PdfViewerNavigateToNextPageToolbarItem />
    </telerik:RadPdfViewerToolbar>
    <telerik:RadPdfViewer x:Name="pdfViewer"
                          Grid.Row="{OnIdiom Desktop=1, Phone=0}" />
</Grid>

2. Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Then add the following code to visualize the PDF document:

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(Toolbar).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdf-overview.pdf"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});
this.pdfViewer.Source = streamFunc;

The snippet above shows one of the approaches for loading a PDF document inside RadPdfViewer just for the purpose of the example.

The following image shows the results from the completed example:

For a runnalbe example with the PDF Viewer toolbar, see the SDKBrowser Demo Application and go to PdfViewer > Toolbar.

Custom Toolbar Items

You can add custom toolbar items to the PDF Toolbar and bind them to a custom command. You can achieve this by using the ButtonToolbarItem.

Here is an example showing how to add a custom Toolbar item with a sample command bound to it. The command is used just to display a message with the PDF document's file size.

1. Add the PdfViewer and the PdfToolbar controls to your page:

<Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
    <telerik:RadPdfViewerToolbar Grid.Row="{OnIdiom Desktop=0, Phone=1}"
                                 PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <telerik:ButtonToolbarItem Command="{Binding DisplayFileSizeCommand}">
            <telerik:ButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconFile}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16"/>
            </telerik:ButtonToolbarItem.ImageSource>
        </telerik:ButtonToolbarItem>
        <telerik:PdfViewerZoomInToolbarItem />
        <telerik:PdfViewerZoomOutToolbarItem />
    </telerik:RadPdfViewerToolbar>
    <telerik:RadPdfViewer x:Name="pdfViewer"
                          Grid.Row="{OnIdiom Desktop=1, Phone=0}"
                          Document="{Binding Document, Mode=OneWayToSource}" />
</Grid>

2. Load a sample PDF document in code-behind:

this.BindingContext = new ViewModel();

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(CustomToolbar).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdf-processing.pdf"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});
this.pdfViewer.Source = streamFunc;

3. Add the ViewModel class. In the ViewModel, get a reference to the RadFixedDocument instance through the Document property of the PDF Viewer and execute the DisplayFileSizeCommand bound to the Command property of the custom Toolbar item:

public class ViewModel
{
    public ViewModel()
    {
        this.DisplayFileSizeCommand = new Command(this.DisplayFileSizeCommandExecute);
    }

    public RadFixedDocument Document { get; set; }
    public ICommand DisplayFileSizeCommand { get; set; }

    protected void DisplayFileSizeCommandExecute(object para)
    {
        RadFixedDocument document = this.Document;
        if (document != null)
        {
            using (MemoryStream stream = new MemoryStream())
            {
                PdfFormatProvider formatProvider = new PdfFormatProvider();
                formatProvider.Export(document, stream);
                double megabytes = ToKiloBytes(stream.Length);
                Application.Current.MainPage.DisplayAlert("", "File Size: " + megabytes.ToString("N0") + " KB", "OK");
            }
        }
    }

    private static double ToKiloBytes(long bytesCount)
    {
        return (double)bytesCount / 1024;
    }
}

The image below shows the results on the different platforms:

For a runnable example demonstrating the PDF Viewer's custom Toolbar items, see the SDKBrowser Demo Application and go to PdfViewer > Toolbar.

See Also

• Review PDF Viewer Commands