How to do thumbnail navigation using PDF Viewer?
How to do thumbnail navigation using PDF Viewer?
By default, PdfViewerControl does not have a thumbnail view. However, as a workaround, pages of the PDF document can be displayed as thumbnails by exporting them as images using the PdfViewerControl.ExportAsImage() API. Additionally, support for navigating to the destination page can be implemented when clicking the thumbnail image.
The following code example demonstrates the same.
XAML
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ThumbnailView" xmlns:sfpdfviewer="clr-namespace:Syncfusion.SfPdfViewer.XForms;assembly=Syncfusion.SfPdfViewer.XForms" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="HelloWorld.MainPage"> <ContentPage.Resources> <ResourceDictionary> <local:ByteImageConverter x:Key="ByteImgConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.BindingContext> <local:PdfViewerViewModel/> </ContentPage.BindingContext> <Grid x:Name="mainGrid" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="90" /> </Grid.RowDefinitions> <Grid x:Name="pdfViewerGrid" Grid.Row="0" > <sfpdfviewer:SfPdfViewer x:Name="pdfViewerControl" InputFileStream="{Binding PdfDocumentStream}" /> </Grid> <Grid x:Name="thumbnailView" Grid.Row="1"> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ThumbnailInfoCollection}" ItemTapped="ListView_OnItemTapped" Orientation="Horizontal"> <syncfusion:SfListView.ItemTemplate> <DataTemplate x:Name="ItemTemplate" x:Key="ItemTemplate" > <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="5"> <Image Source="{Binding ThumbnailImage, Converter={StaticResource ByteImgConverter}}" VerticalOptions="Fill" HorizontalOptions="Fill" HeightRequest="90"> </Image> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </Grid> </Grid> </ContentPage>
C#
private PdfViewerViewModel viewModel;public MainPage()
{
InitializeComponent();
pdfViewerControl.DocumentLoaded += PdfViewerControl_DocumentLoaded;
pdfViewerControl.DocumentSaveInitiated += PdfViewerControl_DocumentSaved;
}/// <summary>
/// Event triggered once the document has been loaded
/// </summary>
private void PdfViewerControl_DocumentLoaded(object sender, EventArgs args)
{
viewModel = this.BindingContext as PdfViewerViewModel;
// Convert the PDF pages into a stream.
Stream[] exportedImages = pdfViewerControl.ExportAsImage(0, pdfViewerControl.PageCount - 1, 0.1f);
ConvertStreamToImageSource(exportedImages);
viewModel.UpdateImages();
}/// <summary>
/// Converts a stream into an image.
/// </summary>
private void ConvertStreamToImageSource(Stream[] imageStreams)
{
foreach (Stream imageStream in imageStreams)
{
imageStream.Position = 0;
byte[] bytes = ReadBytes(imageStream);
viewModel.ThumbnailBytes.Add(bytes);
}
}private byte[] ReadBytes(Stream input)
{
byte[] buffer = new byte[16 * 1024];
using (MemoryStream ms = new MemoryStream())
{
int read;
while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
{
ms.Write(buffer, 0, read);
}
return ms.ToArray();
}
}/// <summary>
/// Event triggered once the document has been saved
/// </summary>
private void PdfViewerControl_DocumentSaved(object sender, DocumentSaveInitiatedEventArgs args)
{
string filePath = DependencyService.Get<ISave>().Save(args.SaveStream as MemoryStream);
string message = "The PDF has been saved to " + filePath;
DependencyService.Get<IAlertView>().Show(message);
}/// <summary>
/// Event triggered when selecting the image items in the list view collection.
/// </summary>
private void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)
{
if (e.ItemData is ThumbnailInfo)
{
int pageNumberToNavigate = (e.ItemData as ThumbnailInfo).PageNumber;
pdfViewerControl.GoToPage(pageNumberToNavigate);
}
}
Please find the sample from the below link,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ThumbnailViewSample-313894057
I hope you enjoyed learning about how to do thumbnail navigation using PDF Viewer.
You can refer to our Xamarin.Forms PDFViewer feature tour page to learn about its other groundbreaking features and documentation, and how to quickly get started with configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!