Creating a Document Annotation WinForms Application with DotImage

DotImage 9.0 introduces a new WinForm control named DocumentAnnotationViewer. This is a composite control containing our ThumbnailView, AnnotateViewer and an optional Splitter that sits between them.

Using the DocumentAnnotationViewer developers can quickly create an application to support opening, saving, printing and annotating multi-page images. This article will take you through the steps for creating such an application.

Creating the Project

Let’s start off by creating a new Windows application project. Open Visual Studio and from the File menu select New -> Project and select Windows Forms Application (for C# if you want to use the code from this article). Give the project any name you like and click OK.

From the toolbox, drop a MenuStrip on the Form and add the following menu items:

If DotImage 9.0 is installed you should have a tab in the toolbox named “Atalasoft DotImage 9.0”. If the tab is not there, you will need to manually add the controls by right-clicking and selecting Choose Items. Once the Choose Toolbox Items dialog appears check the DocumentAnnotationViewer item and click OK.

Drop a DocumentAnnotationViewer onto the Form and change the following properties:

Now we are ready to add some code. Switch to the code view and add the following using statements:

using Atalasoft.Imaging.Codec;
using Atalasoft.Annotate;
using Atalasoft.Annotate.UI;

Opening Images

In design view, double-click the Open menu item to have Visual Studio generate the Click event handler and modify the code to the following:

private void openToolStripMenuItem_Click(object sender, EventArgs e)
{
    using (OpenFileDialog dlg = new OpenFileDialog())
    {
        dlg.Filter = "TIFF Files|*.tif";
        if (dlg.ShowDialog() == DialogResult.OK)
            this.documentAnnotationViewer1.Open(dlg.FileName, -1);
    }
}

We pass -1 for the second argument to tell the viewer it should load all pages in the TIFF file.

Saving Images

In design view, double-click the Save menu item to have Visual Studio generate the Click event handler and modify the code to the following:

private void saveToolStripMenuItem_Click(object sender, EventArgs e)
{
    using (SaveFileDialog dlg = new SaveFileDialog())
    {
        dlg.Filter = "TIFF Files|*.tif";
        if (dlg.ShowDialog() == DialogResult.OK)
            this.documentAnnotationViewer1.Save(dlg.FileName, new TiffEncoder());
    }
}

A TiffEncoder is used as the second parameter to the Save method, but other encoders may be more suitable. When a multi-page encoder such as TiffEncoder or PdfEncoder is provided, all pages loaded in the DocumentAnnotationViewer will be saved. If a single page encoder is provided only the current image will be saved.

Printing Images

In design view, double-click the Print menu item to have Visual Studio generate the Click event handler and modify the code to the following:

private void printToolStripMenuItem_Click(object sender, EventArgs e)
{
    this.documentAnnotationViewer1.Print(new AnnotatePrintDocument());
}

The above code will print all pages loaded in the viewer, including any annotations that have been placed on the images.

Adding Annotations

In design view, double-click the Highlight menu item to have Visual Studio generate the Click event handler and modify the code to the following:

private void highlightToolStripMenuItem_Click(object sender, EventArgs e)
{
    RectangleAnnotation ann = new RectangleAnnotation() 
    { 
        Fill = new AnnotationBrush(Color.FromArgb(80, Color.Yellow)), 
        Outline = null 
    };
    this.documentAnnotationViewer1.Annotations.CreateAnnotation(ann);
}

Finally, double-click the Exit menu item and modify the code to the following:

private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
    this.Close();
}

Testing the project

Press F5 to build and run the project. From the File menu select Open to load a TIFF. This will load the first page in the main viewer and add thumbnails for each page in the file. Clicking on a thumbnail will load that page into the main viewer. Clicking the Highlight menu item from the Annotations menu will let you drag a rectangle annotation onto the current image.