PDF viewer sample

  • Article

This PDF viewer showcase sample demonstrates how to work with Portable Document Format (PDF) files programmatically in Windows Store apps.

Key features and benefits

The PDF viewer showcase sample demonstrates how to:

  • Scroll through various pages in a PDF file.
  • Use semantic zoom to switch between viewing single and multiple pages in a PDF file.
  • Share a PDF file in an email message.

The following video shows how to use the sample app.

The following figure shows the sample app in single-page viewing mode.

The following figure shows the sample app in multiple-page viewing mode.

How to use the sample

  1. Open the sample's project in Microsoft Visual Studio 2013.
  2. To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.

To test semantic zoom with the keyboard, press CTRL+PLUS SIGN or CTRL+MINUS SIGN. To test semantic zoom with touch, if your testing machine doesn't have touch enabled, run the app in Simulator mode in Microsoft Visual Studio. After the app starts in the simulator, click the Pinch/zoom touch mode icon on the simulator's edge, and then use the mouse to simulate pinch and zoom touch gestures. To perform these gestures, press and hold the left mouse button while rotating the mouse wheel backward or forward. To turn off pinch/zoom touch mode, click either the Mouse mode or Basic touch icon on the simulator's edge.

To test device rotation, if you have a desktop PC or your testing machine doesn't have rotation enabled, run the app in Simulator mode in Visual Studio. After the app starts in the simulator, click the Rotate clockwise (90 degrees) or Rotate counterclockwise (90 degrees) icon on the simulator's edge to simulate device rotation.

After the app starts, you can load a different PDF file. To do this, display the app bar: swipe from the top or bottom edge; or right-click the mouse; or with Basic touch mode enabled in the simulator, with the mouse pointer anywhere on the top or bottom device frame, press and hold the left mouse button while dragging onto the app's surface. Click the open button on the app bar, and browse to and select the desired PDF file.

In the JavaScript sample: to share the loaded PDF file in an email message, display the charms: swipe from the right edge; or move the mouse pointer to the upper-right or lower-right corner; or with Basic touch mode enabled in the simulator, with the mouse pointer anywhere on the right device frame, press and hold the left mouse button while dragging onto the app's surface. Click the Share charm, and follow the on-screen instructions.

Exploring the code

Here are some code highlights.

Loading the PDF file

When the app starts, a predetermined PDF file is loaded by default. To find this predetermined PDF file, the sample uses the InstalledLocation property.

To load the specified PDF file, the sample then uses the GetFileAsync method and then the LoadFromFileAsync method in C++ or the LoadFromStreamAsync method in JavaScript.

After the app starts, you can load a different PDF file. After you select the target file, the sample then calls the LoadFromFileAsync method in C++ or the LoadFromStreamAsync method in JavaScript.

To explore the code:

  • In the C++ version of the sample, look in the MainPage.xaml.cpp file for the LoadDefaultFile, LoadPDF, and OnOpenFileClick methods. Look also in the MainPage.xaml file for the <Page.BottomAppBar> tag.
  • In the JavaScript version of the sample, look in the default.js file for the initializeApp, loadPDF, and openClick functions. Look also in the default.html file for the <div id="appBar"> tag.

Semantic zoom

When the app starts, it initializes the zoomed-in and zoomed-out views for use. When the user selects a different view, the app transitions between the zoomed-in to zoomed-out views.

To explore the code:

  • In the C++ version of the sample, look in the MainPage.xaml.cpp file for the LoadPDF, InitializeZoomedInView, InitializeZoomedOutView, EventHandlerViewChanged, and EventHandlerViewChangeStarted methods. Look also in the MainPage.xaml file for the <SemanticZoom> tag, and the various <Style> and <ControlTemplate> tags that are called by the InitializeZoomedInView and InitializeZoomedOutView methods.
  • In the JavaScript version of the sample, look in the default.js file for the self-invoking, loadPDF, initializeZoomedInView, and initializeZoomedOutView functions. Look also in the default.html file for the <div id="semanticZoomDiv">, <div id="pdfViewTemplate">, and <div id="pdfSZViewTemplate"> tags.

Sharing a PDF file

In the JavaScript sample, users can share the loaded PDF file in an email message by using the Share charm.

To explore the code:

  • In the JavaScript version of the sample, look in the default.js file for the self-invoking and eventHandlerShareItem functions.

Best practices

The C#/C++ sample is meant to serve as a model for the best practice of abstracting functions into a separate Windows Runtime component. This sample features:

  • The Model View ViewModel pattern: The sample makes use of the MVVM pattern which is best suited for XAML apps. This allows code re-use and reduces coupling thereby increasing modularization.
  • PdfViewModel WinRT component: The ViewModel Model has been abstracted out as a separate Windows Runtime component which enables re-use and separates the business logic from the View. This also allows full use of the performance of the native Windows PDF APIs in other projections of WinRT where XAML is supported. You can leverage this new WinRT component as-is, or modify it to suit the needs of your own scenarios.
  • UI and data virtualization: This has been implemented to improve the memory requirements of the sample app. The PdfDocViewModel inherits the IBindableObservableVector interface, through which the elements of the ListView/GridView are populated with placeholder items until they are scrolled into view. As the items are scrolled out, the image source for the items are discarded. This enables the use of less UI memory which in turn helps make the UI more responsive.

The PdfDocViewModel classes are:

  • PdfDocViewModel: This class serves as the datasource for the view. It implements the IBindableObservableVector interface to enable virtualization. It abstracts out all the methods and data members which are document-level specific and are required by the view. The class maintains a vector of all the PdfPageViewModel items.
  • PdfPageViewModel: This class serves as the data-binding class for the view. It implements the INotifyPropertyChanged interface to enable discarding of data items as they are scrolled out of view. It abstracts out all the methods and data members which are page-level specific.
  • PdfViewContext: This class serves as the link between PdfDocViewModle and PdfPageViewModel.
  • ImageSourceBase: This abstract class implements methods required for generating on-screen rendering for the pages. It creates the required Microsoft DirectX Graphics Infrastructure (DXGI) surfaces and renders the page content onto these surfaces.
  • ImageSourceSIS: This derived class inherits from ImageSourceBase and implements methods specific to SurfaceImageSource.
  • ImageSourceVSIS: This derived class inherits from ImageSourceBase and implements methods specific to VirtualSurfaceImageSource.
  • Renderer: This helper class provides an abstraction to the DirectX API objects.

Samples

PDF viewer showcase sample

PDF viewer sample

Reference

Windows.Data.Pdf