Some test text!

menu
search

Thumbnail slider

You can use the slider to get a thumbnail review of pages before they are actually shown in the viewer.

Page slider

This tutorial only applies to Xamarin.iOS. See Xamarin.Android equivalent here.

The PTThumbnailSliderViewController class allows the user to quickly navigate through a document. When using the slider control, a small page preview pop will be shown on top of the thumbnail slider.

thumbnail-slider

The thumbnail slider control is part of the Tools library, so make sure you have added the Tools library to your project.

linkShow a thumbnail slider

To create and set up a thumbnail slider, supply a PTPDFViewCtrl instance to the PTThumbnailSliderViewController designated initializer:

var thumbnailSlider = new pdftron.PDF.Controls.PTThumbnailSliderViewController(mPdfViewCtrl);

AddChildViewController(thumbnailSlider);
View.AddSubview(thumbnailSlider.View);

thumbnailSlider.View.TranslatesAutoresizingMaskIntoConstraints = false;

NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] {
    thumbnailSlider.View.LeadingAnchor.ConstraintEqualTo(this.View.LeadingAnchor),
    thumbnailSlider.View.WidthAnchor.ConstraintEqualTo(this.View.WidthAnchor),
    thumbnailSlider.View.BottomAnchor.ConstraintEqualTo(this.View.BottomAnchor)
});
thumbnailSlider.DidMoveToParentViewController(this);

linkPopulate with thumbnail images

The thumbnail images shown in the thumbnail slider view controller are generated by the GetThumbAsync: method of the PTPDFViewCtrl class. When ready, the thumbnail images are provided to the pdfviewCtrl's delegate via the pdfViewCtrl:gotThumbAsync:thumbImage: method.

In your class adopting the PTPDFViewCtrlDelegate protocol (usually the same view controller containing the thumbnail slider view controller), add the following:

mPdfViewCtrl.GotThumbAsync += (sender, e) =>
{
    if (e.Image == null)
    {
        return;
    }
    this.thumbnailSlider?.SetThumbnail(e.Image, e.Page_num);
};

linkUpdate the position of the slider

When the current page in the associated PTPDFViewCtrl changes, the thumbnail slider must be updated for the new page number. This is done from the pdfViewCtrl:pageNumberChangedFrom:To: method of the PTPDFViewCtrlDelegate protocol:

mPdfViewCtrl.PageNumberChangedFrom += (sender, e) =>
{
    thumbnailSlider?.SetSliderValue(e.NewPageNumber);
};

linkCustomization

The PTThumbnailSliderViewController provides a flexible API for displaying buttons either side of the slider control. This is possible with the following properties:

  • LeadingToolbarItem - a single UIBarButtonItem to the left of the slider.
  • LeadingToolbarItems - an array of UIBarButtonItems to the left of the slider.
  • TrailingToolbarItem - a single UIBarButtonItem to the right of the slider.
  • TrailingToolbarItems - an array of UIBarButtonItems to the right of the slider.
  • It is also possible to remove these buttons by setting the appropriate property to nil.

    For example, to show a button to present a PTThumbnailsViewController on the left of the slider, and a button to present a PTNavigationListsViewController on the right:

    // add a custom UIBarButtonItem to the left of the thumbnail slider
    thumbnailSlider.LeadingToolbarItem = new UIBarButtonItem(UIImage.FromFile("icon.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
        // perform custom action
    });
    
    // add an array of UIBarButtonItems to the right of the slider
    var button1 = new UIBarButtonItem(UIImage.FromFile("icon1.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
        // perform custom action
    });
    var button2 = new UIBarButtonItem(UIImage.FromFile("icon2.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
        // perform custom action
    });
    documentViewController.ThumbnailSliderController.TrailingToolbarItems = new UIBarButtonItem[] {button1, button2};
    
    // remove the buttons from the left of the slider by setting the property to null
    documentViewController.ThumbnailSliderController.LeadingToolbarItems = null;

    linkThe thumbnail slider delegate

    The PTThumbnailSliderViewDelegate protocol allows the adopting class (usually the containing view controller, as in this guide) to be notified when the user is actively using the thumbnail slider. The thumbnail slider already handles changing the current page in response to user actions, but the delegate methods can be used to hide or show other content as appropriate.

    Get the answers you need: Support

    close

    Free Trial

    Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

    Select a platform to get started with your free trial.

    Unlimited usage. No email address required.

    PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

    Learn More
    close