PdfViewer Toolbar

RadPdfToolbar includes all commands that the RadPdfViewer provides. They can be used as a pre-defined UI toolbar items. You have also the option to include additional toolbar items to the PdfViewerToolbar with a custom command.

Predefined Toolbar Items

RadPdfToolbar contains the following Toolbar items:

  • ZoomInToolbarItem
  • ZoomOutToolbarItem
  • NavigateToNextPageToolbarItem
  • NavigateToPreviousPageToolbarItem
  • NavigateToPageToolbarItem
  • FitToWidthToolbarItem
  • ToggleLayoutModeToolbarItem

Example

Here is an example how to use the RadPdfViewer Toolbar:

Use the following snippet to define the RadPdfViewer and RadPdfToolbar:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <telerikPdfViewer:RadPdfViewerToolbar PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <telerikPdfViewer:ZoomInToolbarItem />
        <telerikPdfViewer:ZoomOutToolbarItem />
        <telerikPdfViewer:NavigateToNextPageToolbarItem/>
        <telerikPdfViewer:NavigateToPreviousPageToolbarItem/>
        <telerikPdfViewer:NavigateToPageToolbarItem/>
        <telerikPdfViewer:FitToWidthToolbarItem/>
        <telerikPdfViewer:ToggleLayoutModeToolbarItem/>
    </telerikPdfViewer:RadPdfViewerToolbar>
    <telerikPdfViewer:RadPdfViewer x:Name="pdfViewer" Grid.Row="1"/>
</Grid>

In addition to this, you need to add the following namespace:

xmlns:telerikPdfViewer="clr-namespace:Telerik.XamarinForms.PdfViewer;assembly=Telerik.XamarinForms.PdfViewer"

Then add the following code to visualize the pdf document:

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

This is the result:

PdfViewer Toolbar

Custom Toolbar Item

You can easily add custom toolbar items to the PdfToolbar bound with a custom command. This is implemented by creating a PdfViewerToolbarItemBase object with Text and Command properties applied and adding it to the PdfViewerToolbar Items collection.

Below you can find an example showing how to add a custom ToolbarItem with a sample command bound to it. The command is used just to display a message with the PdfDocument file size.

First, add the PdfViewer and the PdfToolbar controls to your page:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <telerikPdfViewer:RadPdfViewerToolbar PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <telerikPdfViewer:PdfViewerToolbarItemBase Text="&#xE815;" 
                                                   FontFamily="{StaticResource IconsFontFamily}" 
                                                   Command="{Binding DisplayFileSizeCommand}" />
        <telerikPdfViewer:ZoomInToolbarItem />
        <telerikPdfViewer:ZoomOutToolbarItem />
        <telerikPdfViewer:NavigateToNextPageToolbarItem/>
        <telerikPdfViewer:NavigateToPreviousPageToolbarItem/>
        <telerikPdfViewer:NavigateToPageToolbarItem/>
        <telerikPdfViewer:FitToWidthToolbarItem/>
        <telerikPdfViewer:ToggleLayoutModeToolbarItem/>
    </telerikPdfViewer:RadPdfViewerToolbar>
    <telerikPdfViewer:RadPdfViewer x:Name="pdfViewer" Grid.Row="1"
                                   Document="{Binding Document, Mode=OneWayToSource}" />
</Grid>

The text of the custom ToolbarItem is set to one of the provided with Telerik UI for Xamarin font icons. For more details on this check Telerik Font Icons topic.

Then, load a sample pdf document in code-behind:

this.BindingContext = new ViewModel();

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

As you might notice in the previous snippet, there is a ViewModel class set as BindingContext of the page. In the ViewModel you can get a reference to the RadFixedDocument instance through the Document property of the PdfViewer as well as execute the DisplayFileSizeCommand bound to the Command property of the custom ToolbarItem:

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;          
    } 
}

Check below the result on different platforms:

PdfToolbar Custom ToolbarItem

A sample Custom ToolbarItem example is available in PdfViewer -> Features folder of the SDK Browser application.

See Also

In this article
Not finding the help you need? Improve this article