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.
Predefined Toolbar Items
By default, the PDF Viewer Toolbar provides the following toolbar items:
PdfViewerZoomInToolbarItem
PdfViewerZoomOutToolbarItem
PdfViewerNavigateToNextPageToolbarItem
PdfViewerNavigateToPreviousPageToolbarItem
PdfViewerFitToWidthToolbarItem
PdfToolbarItems
inherit fromButtonToolbarItem
. All properties applicable forButtonToolbarItem
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.