How to do thumbnail navigation using PDF Viewer?
How to do thumbnail navigation using PDF Viewer?
By default, PdfViewerControl does not have 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. Further, support to navigate to the destination page can be implemented when clicking the thumbnail image.
The following code example does 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 stream. Stream[] exportedImages = pdfViewerControl.ExportAsImage(0, pdfViewerControl.PageCount - 1, 0.1f); ConvertStreamToImageSource(exportedImages); viewModel.UpdateImages(); } /// <summary> /// Converts stream into 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 select 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 know about its other groundbreaking feature representations and documentation, and how to quickly get started for 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 check out 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, Direct-Trac, or feedback portal. We are always happy to assist you!