Getting Started

  • 3 minutes to read

This tutorial illustrates how to create a simple PDF Viewer application with and adjust its appearance.

The tutorial consists of the following sections.

Create a PDF Viewer Application

  1. Run Microsoft® Visual Studio and create a new Windows Forms Application project.

  2. Drop the PdfViewer item from the DX.20.1: Common Controls toolbox tab onto the form.

    toolbox-common-controls-pdf-viewer

  3. Click the PDF Viewer's smart tag and select Dock in parent container in the PDFViewer Tasks menu. This allows the PDF Viewer to expand to the form's size.

    DockInContainer

  4. Load a document to the PDF Viewer. Click the PdfViewer's smart tag to invoke its actions list. In the Actions list, click the Load PDF file... link.

    smart-tag-ribbon-load-pdf-file

    The Open dialog box appears. In this dialog, locate the document to be opened and click Open.

    LoadPDF_OpenDialog

Create Command UI

Design Time

  1. Select Create Ribbon in the PDFViewer Tasks menu to add a RibbonControl to the PdViewer.

    smart-tag-create-ribbon

  2. Select necessary ribbon pages in the PdfViewer Tasks menu or click Create All Bars to add all available ribbon pages at once. You can customize the created ribbon afterward: change the ribbon style, add new ribbon elements, modify or remove the existing items.

    CreateAllBars

  3. You can also implement a bar interface. You can upgrade it to the ribbon interface at any time (e.g., when converting the entire application).

    create-bars-bar-manager-convert-to-ribbon

Runtime

Use the PdfViewer.CreateRibbon() or PdfViewer.CreateBars() method overloads to add a ribbon or a bar manager to the PdfViewer at runtime.

using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraPdfViewer;

//Create all PDF ribbon tabs
pdfViewer.CreateRibbon(PdfViewerToolbarKind.All);

//Create main toolbar
pdfViewer.CreateBars(PdfViewerToolbarKind.Main);

Result

Run the application and try the PDF Viewer features. Load and navigate the document, highlight text, check the attachments or print the result.

runtime-pdf-viewer-zoom-factor-fit-visible-content

NOTE

The PDF Viewer shows bookmarks within its navigation pane for a document that contains them. So you can quickly locate and link to points of interest within a document. For more information, see the Bookmarks topic.

You can also see file attachments and thumbnails in theAttachments and Page Thumbnails panels on the navigation pane.

Change the Application's Appearance

Change the Application's Skin

At Design Time

In Code

Invoke the DevExpress Project Settings page and select a desired skin in the Skin Options group.

PDFVIewer_GettingStarted_ProjectSettings

Call the UserLookAndFeel.Default static object's UserLookAndFeel.SetSkinStyle method:


using DevExpress.LookAndFeel;
// ...
UserLookAndFeel.Default.SetSkinStyle("Office 2019 Colorful", "Fire Brick");

Use Bitmap or Vector Icons

The newly created PDF Viewer application uses vector icons. This ensures that the application is rendered correctly on high-DPI devices.

Set the static WindowsFormsSettings.AllowDefaultSvgImages property to DefaultBoolean.False at the application's startup to use bitmap icons in your application.


static void Main()
{
    DevExpress.XtraEditors.WindowsFormsSettings.AllowDefaultSvgImages = DevExpress.Utils.DefaultBoolean.False;
    // ...
}

The following images illustrate the standard PDF Viewer's ribbon UI with default vector and bitmap icons:

  • SVG Icons

    PDFViewer_Ribbon_SVG

  • Bitmap Icons

    PDFViewer_Ribbon_Bitmap

Use Skinned Open/Save File Dialogs

You can replace standard WinForms Open File and Save File dialogs with skinned DevExpress counterparts.

Set the static WindowsFormsSettings.UseDXDialogs property to DefaultBoolean.True at the application's startup to enable skinned dialogs in your application.

NOTE

Add the required assembly references to use skinned DevExpress dialogs. Refer to the Deployment topic for more information.

static void Main()
{
    DevExpress.XtraEditors.WindowsFormsSettings.UseDXDialogs = DefaultBoolean.True;
    // ...
}

IMAGE

See Also