Lesson 1 - Create a PDF Viewer

• Aug 03, 2020
• 4 minutes to read

This document demonstrates how to create a WPF PDF Viewer. This tutorial consists of the following steps.

• Step 1. Create a New Project and Add a PDF Viewer
• Step 2. Change the Command Bar Style
• Step 3. Provide a Start Screen
• Step 4. Load a Document
• Result

Step 1. Create a New Project and Add a PDF Viewer

Perform the following actions to add a PdfViewerControl to your application.

• Run Microsoft Visual Studio 2012, 2013, 2015 or 2017.
• Create a new WPF Application project.
• Add a PdfViewerControl component to the project. Drag the PdfViewerControl from the DX.18.2: Data & Analytics Toolbox tab and drop it onto the main window.

• Right-click the PDF Viewer and select Layout | Reset All to fill the entire window.

After this action, your XAML appears as follows.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PDF_Viewer"
        xmlns:dxpdf="http://schemas.devexpress.com/winfx/2008/xaml/pdf" x:Class="PDF_Viewer.MainWindow"
        mc:Ignorable="d"
        Title="PDF Viewer" x:Name="pdfViewer" Height="350" Width="525">
    <Grid>
        <dxpdf:PdfViewerControl/>
    </Grid>
</Window>

Note that you can add the PdfViewerControl by overwriting your MainWindow.xaml file with this code without dragging the PdfViewerControl control to the window. However, in this case, you need to manually add references to the following libraries.

• DevExpress.Data.v18.2.dll
• DevExpress.Mvvm.v18.2.dll
• DevExpress.Pdf.v18.2.Core.dll
• DevExpress.Pdf.v18.2.Drawing.dll
• DevExpress.Xpf.Core.v18.2.dll
• DevExpress.Xpf.Docking.v18.2.dll
• DevExpress.Xpf.DocumentViewer.v18.2.Core.dll
• DevExpress.Xpf.Grid.v18.2.dll
• DevExpress.Xpf.PdfViewer.v18.2.dll

Right-click References in the Solution Explorer and select Add Reference… in the invoked context menu to add library references.

Note

Use the Assembly Deployment Tool to collect all assemblies that may be required for your application. If you need to copy references locally, you can find copies at C:\Program Files (x86)\DevExpress 18.2\Components\Bin\Framework\

Now, you have a PDF Viewer added to our application. Continue and customize the command bar style.

Step 2. Change the Command Bar Style

Click the control’s smart tag to invoke the Tasks list and select the Bars command bar style to change the default ribbon style.

You can also change the DocumentViewerControl.CommandBarStyle property value in XAML.

XAML

    <Grid>
        <dxpdf:PdfViewerControl x:Name="pdfViewer"
                                CommandBarStyle="Bars"/>
    </Grid>

You can see that the PDF Viewer control displays command buttons.

Set the DocumentViewerControl.CommandBarStyle property to CommandBarStyle.None to hide the PdfViewerControl’s toolbar and context menu.

Provide a Start Screen

Set the PdfViewerControl.ShowStartScreen property true to provide the PDF Viewer with a Start Screen. This screen allows end users to open recently opened files or invoke the Open dialog box.

The PdfViewerControl.NumberOfRecentFiles property limits the number of recently opened files displayed in the Start Screen. The PdfViewerControl.ShowOpenFileOnStartScreen property allows you to hide the Open button.

Step 4. Load a Document

The PdfViewerControl provides different ways to load a PDF document. Refer to the Lesson 2 - Load a Document tutorial for more code samples.

This lesson describes, in details, how to use the DocumentViewerControl.DocumentSource property to specify a path to the document at design time. Perform the following actions to complete the task:

• Copy a file (e.g., Demo.pdf) to the Data subdirectory of your project and include this file into your solution.

Note

For this lesson, use the PDF document shipped with the WPF PDF Viewer demo. This file is located at C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data\Demo.pdf

• Specify a path to the target file using the DocumentViewerControl.DocumentSource property, as shown below.

XAML

<dxpdf:PdfViewerControl DocumentSource="..\\..\\Data\Demo.pdf"/>

Result

Run the application to see the loaded file. You can navigate, zoom and print the document using the corresponding bar commands.

The PDF Viewer can show bookmarks within its navigation pane for a PDF document that supports them. Check the Bookmarks topic for more information.

You can also see file attachments and thumbnails in the Attachments and Page Thumbnails panels on the navigation pane. Refer to the File Attachment, and Thumbnails topics for more information.