Draw and Edit Annotations on Images - WPF C#

This tutorial shows how to use the automated annotation features of the LEADTOOLS SDK in a WPF C# application.

Required Knowledge

Before working on the Draw and Edit Annotations on Images - WPF C# tutorial, get familiar with the basic steps of creating a project by reviewing the Add References and Set a License tutorial.

Create the Project and Add LEADTOOLS References

Start with a copy of the project created in the Add References and Set a License tutorial. If you don't have that project, follow the steps in that tutorial to create it.

The references needed depend upon the purpose of the project. References can be added by one or the other of the following two methods (but not both).

If NuGet references are used, this tutorial requires the following NuGet packages:

• Leadtools.Annotations.Wpf
• Leadtools.Viewer.Controls.Wpf

If local DLL references are used, the following DLLs are needed. The DLLs are located at <INSTALL_DIR>\LEADTOOLS21\Bin\Dotnet4\x64:

• Leadtools.Annotations.Automation.dll
• Leadtools.Annotations.Designers.dll
• Leadtools.Annotations.Engine.dll
• Leadtools.Annotations.Rendering.Wpf.dll
• Leadtools.Annotations.Wpf.dll
• Leadtools.Codecs.Bmp.dll
• Leadtools.Codecs.dll
• Leadtools.Codecs.Fax.dll
• Leadtools.Codecs.Png.dll
• Leadtools.Codecs.Tif.dll
• Leadtools.Controls.Wpf.dll
• Leadtools.dll
• Leadtools.Drawing.dll

For a complete list of which Codec DLLs are required for specific formats, refer to File Format Support.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

• Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
• Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS NuGet and local references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Setup the MainWindow XAML

With the project created, the references added, and the license set, coding can begin.

In the Solution Explorer, open the MainWindow.xaml file. Add the following XAML code to properly display the UI elements.

<Window x:Class="Draw_And_Edit_Annotations_On_Images_Wpf.MainWindow" 
        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:Draw_And_Edit_Annotations_On_Images_Wpf" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="450" Width="800" 
        Loaded="MainWindow_Load"> 
 
    <Grid Name="viewerGrid"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"></RowDefinition> 
            <RowDefinition Height="*"></RowDefinition> 
        </Grid.RowDefinitions> 
    </Grid> 
</Window> 

We defined 2 rows, serving as containers for the annotations toolbar and the Image Viewer.

Add the Automation Annotation Code

Click on the Events icon in the Properties Window. Then, double-click the Load event to create an event handler. Add the below using statements in the using block at the top of MainWindow.xaml.cs.

// Using block at the top 
using System; 
using System.Windows; 
using System.Windows.Controls; 
using Leadtools; 
using Leadtools.Controls; 
using Leadtools.Codecs; 
using Leadtools.Annotations.Automation; 
using Leadtools.Annotations.Wpf; 

Add the below global variables:

// Add global variables 
private ImageViewer viewer; 
private ImageViewerAutomationControl automationControl; 
private AnnAutomationManager annAutomationManager; 
private AnnAutomation automation; 

Add the following code to the MainWindow_Load event handler to initialize the automated annotations and Image Viewer.

public void MainWindow_Load(object sender, EventArgs e) 
{ 
    // Initialize Image Viewer Object 
    viewer = new ImageViewer() 
    { 
        Background = SystemColors.AppWorkspaceBrush, 
        UseDpi = true, 
        ViewPadding = new ControlPadding(), 
        ViewHorizontalAlignment = ControlAlignment.Center, 
        ViewVerticalAlignment = ControlAlignment.Center, 
    }; 
 
    // Initialize Automation Control for Image Viewer 
    automationControl = new ImageViewerAutomationControl 
    { 
        ImageViewer = viewer 
    }; 
 
    // Initialize a new RasterCodecs object 
    RasterCodecs codecs = new RasterCodecs(); 
 
    // Load the main image into the viewer 
    viewer.Image = codecs.Load(@"C:\LEADTOOLS21\Resources\Images\ocr1.tif"); 
 
    // Initialize the Interactive Move for the Image Viewer 
    AutomationInteractiveMode automationInteractiveMode = new AutomationInteractiveMode 
    { 
        AutomationControl = automationControl, 
    }; 
 
    // Add the Interactive Mode to the Image Viewer 
    viewer.InteractiveModes.BeginUpdate(); 
    viewer.InteractiveModes.Add(automationInteractiveMode); 
    viewer.InteractiveModes.EndUpdate(); 
 
    if (viewer.Image != null) 
    { 
        // Create and setup the Automation Manager 
        annAutomationManager = new AnnAutomationManager 
        { 
            RestrictDesigners = true, 
        }; 
 
        // Instruct the Manager to create all the default Automation objects. 
        annAutomationManager.CreateDefaultObjects(); 
 
        // Initialize the Manager Helper and create the Toolbad 
        // Add the Toolbar and the Image Viewer to the Controls 
        AutomationManagerHelper managerHelper = new AutomationManagerHelper(annAutomationManager); 
        managerHelper.CreateToolBar(); 
        viewerGrid.Children.Add(managerHelper.ToolBar); 
        Grid.SetRow(managerHelper.ToolBar, 0); 
        viewerGrid.Children.Add(viewer); 
        Grid.SetRow(viewer, 1); 
 
        // Set up the Automation (it will create the Container as well) 
        automation = new AnnAutomation(annAutomationManager, automationControl) 
        { 
            // Set this Automation as the active one 
            Active = true, 
        }; 
 
        // Set the size of the Container to the size of the Image Viewer 
        automation.Container.Size = automation.Container.Mapper.SizeToContainerCoordinates(LeadSizeD.Create(viewer.Image.ImageWidth, viewer.Image.ImageHeight)); 
    } 
} 

This tutorial uses this TIFF image from the LEADTOOLS Images directory here: <INSTALL_DIR>\LEADTOOLS21\Resources\Images.

Run the Project

Run the project by pressing F5, or by selecting Debug -> Start Debugging.

If the steps were followed correctly, the application runs and the sample image is loaded into the viewer. Any of the annotations on the toolbar can be selected and used to draw on the image. The following image shows an example of the image in the viewer, with the annotation toolbar.

Wrap-up

This tutorial showed how to use the ImageViewerAutomationControl, AnnAutomationManager, AnnAutomation, and AutomationInteractiveMode classes.

See Also

• LEADTOOLS AnnAutomation Documentation
• LEADTOOLS AnnAutomationManager Documentation
• LEADTOOLS SDK Download