View PDFs in UWP Apps with FlexViewer

ComponentOne Studio UWP Edition adds a new object for viewing PDF Files in FlexViewer. The new PDFDocumentSource (Beta) helps you to bind FlexViewer with PDF files using simple lines of code. At the same time, you can take advantage of advanced viewing features on PDF.

How to load PDFs in UWP Apps through code

1. Step 1: Create new C1PDFDocumentSource object:

   
   C1PdfDocumentSource _pdfDocSource = new C1PdfDocumentSource();  
   
   

2. Step 2: Load file into the Memory Stream:

   
   var memStream = new MemoryStream();  
   using (Stream stream = \_asm.GetManifestResourceStream("Sample\_ExportType.Resources." + "Sample\_GCDataSheet\_2016.pdf"))  
   { await stream.CopyToAsync(memStream);  
           memStream.Position = 0; }  
   
   

3. Step 3: Load memory stream into C1PDFDocumentSource object:

   
   await _pdfDocSource.LoadFromStreamAsync(memStream);  
   
   

4. Step 4: Bind FlexViewer's DocumentSource object with C1PDFDocumentSource:

   
   flexViewer.DocumentSource = _pdfDocSource;  
   
   

And you're done! Here's how the PDF looks when loaded into the FlexViewer:

How to load a PDF directly in FlexViewer

1. Step 1: Run FlexPDFViewer sample installed with ComponentOne UWP Edition at the following location:
   C:\Users\...\Documents\ComponentOneSamples\UWP\C1.UWP.FlexReport\FlexPdfViewer\

2. Step 2: Click Open icon in the left panel.

3. Step 3: Choose PDF File (say, TelephoneBill.pdf) and click open:

   

That's it! Here's how the PDF looks:

Other UWP PDF Features in FlexViewer

• Thumbnails: You can use the Thumbnails icon to view a Thumbnail view of PDF pages which can help you to jump to specific page in the document.

  

• Export: PDF Files loaded in FlexViewer can be exported to TIFF, BMP, PNG, JPEG and GIF Images.

  

  

• Print: You can choose following printer settings in the Print dialog to print your PDF file.
  • Choose Printer.
  • Orientation
  • Page Size
  • Page Range to print

• It also gives a Print Preview of the PDF in this dialog:

  

• View: FlexViewer offers a number of views that can be used in different ways.

[![View](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/View.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/View.png)  

*   You can rotate the PDF using 'Rotate Clockwise' option:  

    [![RotatedPDF](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/RotatedPDF-1024x709.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/RotatedPDF.png)  


*   Or, you can choose to read PDF pages side by side using "Two Pages" option:  

    [![TwoFacePaging](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/TwoFacePaging-1024x710.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2016/09/TwoFacePaging.png)  

Check out the FlexPdfViewer sample to view above features and share your feedback with us below! Thanks!