WinRT XAML (Part 7) PDF Viewer

Script 7: PDF Viewer in Studio for WinRT XAML

image

Pdf Viewer

Add document viewing capabilities to your Windows Store apps. ComponentOne PdfViewer™ for Windows Phone can display simple PDF documents within your applications without requiring any external application. Load arbitrary PDF documents with support for page zooming and (coming soon) text searching

Features

  • Load and View PDF Files

Load and view PDF files in your Windows Store apps using the C1PdfViewer control. This XAML control has no external dependency on the desktop or anything from Adobe to view or save files. Content is parsed and rendered as native WinRT XAML elements.

  • Multi-touch Gesture Support

Users can drag the pages to scroll, as well as, pinch or double tap to zoom the document. Zooming can better legibility for reading content on a small screen.

  • Horizontal Orientation

The C1PdfViewer control supports both Vertical and Horizontal orientation. Just set the Orientation property.

image

PDF Specification Support

C1PdfViewer supports a subset of the PDF 1.5 specification. There are a few important limitations including encryption, special fonts, and rare image formats. Documents that use non-supported content will still render, but the formatting may be incorrect. It is recommended to use C1PdfViewer in a controlled environment where the features used by your PDF files can be tested before being used. The full list of limitations can be found in the documentation.

  • Find Text

Users can perform text searches within the document. As matches are found they are brought into view, and users can navigate through search results in a quick and intuitive manner.

  • Get Pages from PDF

After loading a PDF, you can obtain a list of its pages as FrameworkElements to customize how the user views each page. This enables a lot more flexibility in working with existing PDF documents. Just call the GetPages method.

Getting Started with PDF Viewer

Step 1 of 3: Adding C1PdfViewer to the Application

In this step you'll begin in Visual Studio to create a WinRT-style application using PdfViewer for WinRT XAML. To set up your project and add a C1PdfViewer control to your application, complete the following steps:

  1. In Visual Studio 2012 Select File | New | Project.

  2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

image

3. Open MainPage.xaml if it isn't already open, place the cursor between the and tags.

  1. Add the following column and row definitions between the and tags:

    <Grid.RowDefinitions>

       <RowDefinition Height="Auto"/>
   <RowDefinition/>

    </Grid.RowDefinitions> <Grid.ColumnDefinitions>

       <ColumnDefinition/>
   <ColumnDefinition Width="Auto"/>

    </Grid.ColumnDefinitions>

Elements in the grid will now appear positioned.

  1. Navigate to the Toolbox and double-check the C1PdfViewer icon to add the control to your application.

  2. Edit the C1PdfViewer's markup so it appears similar to the following:

    <PdfViewer:C1PdfViewer x:Name="pdfViewer" ViewMode="FitWidth" Grid.Row="1" Grid.ColumnSpan="2"/>

This markup gives the control a name, sets the ViewMode of the control so that the entire width of a PDF will be displayed in the control, and customizes the layout of the control.

  1. Navigate to the Toolbox and double-click the StackPanel icon to add it to the page. Edit the StackPanel's markup so it appears similar to the following:

This markup adds three TextBlock controls in the StackPanel.

  1. Add the following markup just below the StackPanel's closing tag icon to add a Button to the page:

Note that you'll add the Click event handler's code in the next step.

You've successfully created a WinRT-style application. In the next step you'll add code to the application to view a PDF.

Step 2 of 3: Adding Code to the C1PdfViewer Application

In the previous step you created a new WinRT-style project and added a C1PDFViewer control to the application. In this step you'll continue by adding a PDF document to the application, and code to display the PDF file in the C1PdfViewer control.

Complete the following steps:

  1. In the Solution Explorer, right-click the project name and select Add │ Existing Item.

  2. In the Add Existing Item dialog box, locate a PDF file (for example the C1XapOptimizer.pdf included with the samples) and click Add.

You can select any PDF file but will have to replace "C1XapOptimizer.pdf" with the name of your PDF file in the code below.

  1. Select the PDF file in the Solution Explorer, and in the Properties window set the file's Build Action to Embedded Resource.

  2. Select View | Code to switch to Code view.

image

  1. In Code view, add the following import statements to the top of the page:

using System.Reflection; using Windows.Storage; using Windows.Storage.Pickers;

6. Add code to the page's constructor so that it appears like the following:

public MainPage() { this.InitializeComponent(); Assembly asm = typeof(MainPage).GetTypeInfo().Assembly; Stream stream = asm.GetManifestResourceStream("PDFViewer.C1XapOptimizer.pdf"); pdfViewer.LoadDocument(stream); }

Note: You will need to replace "PDFViewer" with the name of your project's namespace.

  1. Add the following btnLoad_Click event handler to the project:

    private async void btnLoad_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) { FileOpenPicker openPicker = new FileOpenPicker();

       openPicker.FileTypeFilter.Add(".pdf"); StorageFile file = await openPicker.PickSingleFileAsync(); if (file != null)
   { Stream stream = await file.OpenStreamForReadAsync();
       pdfViewer.LoadDocument(stream);
   }

    }

In this step you completed adding code to your application. In the next step you'll run the application and observe run-time interactions.

Step 3 of 3: Running the C1PdfViewer Application

Now that you've created a WinRT-style application and customized the application's appearance and behavior, the only thing left to do is run your application. To run your application and observe PdfViewer for WinRT XAML's run-time behavior, complete the following steps:

  1. From the Debug menu, select Start Debugging to view how your application will appear at run time. Notice that a PDF file appears in the PDF width fitted to the viewer and page numbers displayed in the upper left corner of the application.

image

  1. Click the scroll bar to scroll through the document, and notice that you will scroll from one page in the PDF file to the next.

  2. Click the Load Pdf button, locate and select another PDF file, click Open, and notice that the file loads into the C1PdfViewer control.

Congratulations! You've completed the PdfViewer for WinRT XAML quick start and created a PdfViewer for WinRT XAML application, customized the C1PdfViewer control, and viewed some of the run-time capabilities of your application.

See this example in our documentation for both C# and VB

Here is a great read on how to: Print with the PDF Viewer, see Greg Lutz’s blog.

Next: Blog Series (Part 8) Date and Time Editors: Windows 8 Studio for WinRT XAML

MESCIUS inc.

comments powered by Disqus