PDF viewer end-to-end sample

This 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.

PDF viewer app in single-page viewing mode

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

PDF viewer 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.

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

Users can share the loaded PDF file in an email message by using the Share charm.

To explore the code:

  • In the C++ version of the sample, look in the MainPage.xaml.cpp file for the constructor and EventHandlerShareItems methods.
  • In the JavaScript version of the sample, look in the default.js file for the self-invoking and eventHandlerShareItem functions.

Related topics

Samples
PDF viewer showcase sample
PDF viewer sample
Reference
Windows.Data.Pdf

 

 

Show:
© 2014 Microsoft. All rights reserved.