View images with annotations in WPF

In This Topic

WpfAnnotationViewer class, a WPF control derived from of WpfImageViewer class, is intended for viewing images with annotations.

WpfAnnotationViewer class extends the functionality of WpfImageViewer and:

provides access to annotation collection of the image
contains visual tools which simplify and make more handy working with annotations
allows to choose the interaction mode between user and annotations
allows to select one or more annotations
allows to define an image region where annotation may be built or transformed
allows to build annotation
allows to transform annotation
allows to expand existing functionality

Programmatically access to the annotations in WPF annotation viewer

The annotation data collection of any image, which is loaded into image viewer, can be accessed using WpfAnnotationViewer.AnnotationDataController property. The annotation data collection of focused image can be get using WpfAnnotationViewer.AnnotationDataCollection property. The data of selected annotation of focused image can be get using WpfAnnotationViewer.FocusedAnnotationData property.

The collection of annotation visual appearances of any image, which is loaded into image viewer, can be accessed using WpfAnnotationViewer.AnnotationViewController property. The collection of annotation visual appearances of focused image can be get using WpfAnnotationViewer.AnnotationViewCollection property. The visual appearance of selected annotation of focused image can be get using WpfAnnotationViewer.FocusedAnnotationView property.

The WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationDataControllerChanged event when image collection is changed. The WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationViewCollectionChanged event when focused image is changed. The WpfAnnotationViewer raises the WpfAnnotationViewer.FocusedAnnotationViewChanging and WpfAnnotationViewer.FocusedAnnotationViewChanged events when focused annotation is changed.

Interact with annotations in WPF annotation viewer

WpfAnnotationViewer class contains 2 visual tools, which simplify and make more handy working with annotations.

The first one is intended for viewing, interaction and editing of annotation collection of focused image. This visual tool can be accessed using WpfAnnotationViewer.AnnotationVisualTool property. Detailed information about the WpfAnnotationVisualTool can be found in article Viewing and transforming annotations. Interaction with annotations."

The second visual tool allows to select multiple annotations on the image using rectangular selection. It can be accessed using WpfAnnotationViewer.AnnotationSelectionTool property.

By default the WpfAnnotationViewer class creates the composite visual tool, which combines the functionality of both WpfAnnotationViewer.AnnotationVisualTool and WpfAnnotationViewer.AnnotationSelectionTool for more convenient interaction with annotations. Also visual tools can be used separately.

Here is C#/VB.NET code that shows how to create WpfAnnotationViewer, which can scroll image and edit/select annotations of focused image:

public void SetCompositeVisualTool(Vintasoft.Imaging.Annotation.Wpf.UI.WpfAnnotationViewer annotationViewer)
{
    annotationViewer.VisualTool = 
        new Vintasoft.Imaging.Wpf.UI.VisualTools.WpfCompositeVisualTool(
            annotationViewer.AnnotationVisualTool,
            annotationViewer.AnnotationSelectionTool,
            new WpfScrollPages());
}

VB.NET

Public Sub SetCompositeVisualTool(annotationViewer As Vintasoft.Imaging.Annotation.Wpf.UI.WpfAnnotationViewer)
    annotationViewer.VisualTool = New Vintasoft.Imaging.Wpf.UI.VisualTools.WpfCompositeVisualTool(annotationViewer.AnnotationVisualTool, annotationViewer.AnnotationSelectionTool, New WpfScrollPages())
End Sub

Use different annotation interaction modes in WPF annotation viewer

WpfAnnotationViewer class allows to choose interaction mode between user and annotations using WpfAnnotationViewer.AnnotationInteractionMode property. The following modes are available:

None - the visual tool just displays annotations, interaction with annotations is NOT possible, editing of annotations is NOT possible.
View - the visual tool displays annotations and is possible to interact with them, editing of annotations is NOT possible.
Author - the visual tool displays annotations and is possible to edit them, interaction with annotations is NOT possible.

WpfAnnotationViewer.AnnotationInteractionModeChanging and WpfAnnotationViewer.AnnotationInteractionModeChanged events are generated when interaction mode between user and annotations is changing and changed in the viewer.

Detailed information about interaction modes between user and annotations can be foind in article "Viewing and transforming annotations. Interaction with annotations."

Interact with annotations in WPF annotation viewer on touch screen

By default the annotation visual tool has interactive areas, which are comfortable to use if the user works with mouse for interacting with annotation. The default interaction areas are not comfortable to use if the user works with touch screen and interacts with annotation using fingers. Fingers always are thicker than mouse cursor so the interaction areas must be larger for comfortable interaction with annotation on touch screen. The WpfAnnotationInteractionAreaAppearanceManager class allows to manage settings of interaction areas of visual tool.

Here is C#/VB.NET code that demonstrates how to change the radius and color of points, which allow to scale and rotate annotation:


// ...

/// <summary>
/// Manager of interaction areas.
/// </summary>
Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager _interactionAreaAppearanceManager;

// ...


/// <summary>
/// Initializes a new instance of the <see cref="MainWindow"/> class.
/// </summary>
public MainWindow()
{
    // ...

    _interactionAreaAppearanceManager = CreateCustomInteractionAreaAppearanceManager(annotationImageViewer1.AnnotationVisualTool);

    // ...
}

// ...

/// <summary>
/// Creates the custom interaction area appearance manager.
/// </summary>
/// <param name="visualTool">The visual tool.</param>
/// <returns>
/// The custom interaction area appearance manager.
/// </returns>
public Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager CreateCustomInteractionAreaAppearanceManager(
    Vintasoft.Imaging.Annotation.Wpf.UI.VisualTools.WpfAnnotationVisualTool visualTool)
{
    // create manager
    Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager manager =
        new Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager();
    manager.VisualTool = visualTool;

    // begin the initialization of manager
    manager.BeginInit();

    // resize point

    manager.ResizePointsRadius = 10;
    manager.ResizePointsInteractionRadius = 10;
    manager.ResizePointsBackgroundColor = System.Windows.Media.Color.FromArgb(128, 255, 255, 0);

    // rotation point

    manager.RotationPointDistance = 30;
    manager.RotationPointRadius = 10;
    manager.RotationPointInteractionRadius = 10;
    manager.RotationPointBackgroundColor = System.Windows.Media.Color.FromArgb(128, 255, 192, 203);

    // end the initialization of manager
    manager.EndInit();

    // return the manager
    return manager;
}

// ...

/// <summary>
/// Main form is closed.
/// </summary>
protected override void OnClosed(System.EventArgs e)
{
    base.OnClosed(e);

    _interactionAreaAppearanceManager.Dispose();
}

// ...

VB.NET


' ...

''' <summary>
''' Manager of interaction areas.
''' </summary>
Private _interactionAreaAppearanceManager As Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager

' ...


''' <summary>
''' Initializes a new instance of the <see cref="MainWindow"/> class.
''' </summary>
Public Sub New()
    ' ...


        ' ...
    _interactionAreaAppearanceManager = CreateCustomInteractionAreaAppearanceManager(annotationImageViewer1.AnnotationVisualTool)
End Sub

' ...

''' <summary>
''' Creates the custom interaction area appearance manager.
''' </summary>
''' <param name="visualTool">The visual tool.</param>
''' <returns>
''' The custom interaction area appearance manager.
''' </returns>
Public Function CreateCustomInteractionAreaAppearanceManager(visualTool As Vintasoft.Imaging.Annotation.Wpf.UI.VisualTools.WpfAnnotationVisualTool) As Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager
    ' create manager
    Dim manager As New Vintasoft.Imaging.Pdf.Wpf.UI.Annotations.WpfPdfInteractionAreaAppearanceManager()
    manager.VisualTool = visualTool

    ' begin the initialization of manager
    manager.BeginInit()

    ' resize point

    manager.ResizePointsRadius = 10
    manager.ResizePointsInteractionRadius = 10
    manager.ResizePointsBackgroundColor = System.Windows.Media.Color.FromArgb(128, 255, 255, 0)

    ' rotation point

    manager.RotationPointDistance = 30
    manager.RotationPointRadius = 10
    manager.RotationPointInteractionRadius = 10
    manager.RotationPointBackgroundColor = System.Windows.Media.Color.FromArgb(128, 255, 192, 203)

    ' end the initialization of manager
    manager.EndInit()

    ' return the manager
    Return manager
End Function

' ...

''' <summary>
''' Main form is closed.
''' </summary>
Protected Overrides Sub OnClosed(e As System.EventArgs)
    MyBase.OnClosed(e)

    _interactionAreaAppearanceManager.Dispose()
End Sub

' ...

Restrict annotation building/transformation in image region in WPF annotation viewer

WpfAnnotationViewer allows to restrict region where annotation can be built or transformed. This functionality can be enabled using WpfAnnotationViewer.IsAnnotationBoundingRectEnabled property. WpfAnnotationViewer.AnnotationBoundingRect property allows to set a region on image, where annotation may be built or transformed.

Select one or more annotations in WPF annotation viewer

By default, WpfAnnotationViewer class allows to select several annotations. The selected annotation collection can be get using WpfAnnotationViewer.SelectedAnnotations property. The ability of multiple annotations selection can be disabled using WpfAnnotationViewer.AnnotationMultiSelect property.

Detailed information about principles of annotation selection can be found in article "Viewing and transforming annotations. Interaction with annotations."

Build annotation in WPF annotation viewer

The WpfAnnotationViewer.AddAndBuildAnnotation method allows to start the annotation building process, the WpfAnnotationViewer.FinishAnnotationBuilding method allows to finish the annotation building process, the WpfAnnotationViewer.CancelAnnotationBuilding method allows to cancel the annotation building process.
WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationBuildingStarted event when annotation building process is started, WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationBuildingFinished event when annotation building process is finished, WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationBuildingCanceled event when annotation building process is canceled.

Detailed information about principles of annotation selection can be found in article "Viewing and transforming annotations. Interaction with annotations."

Transform annotation in WPF annotation viewer

The transformation of focused annotation may be started via mouse.
WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationTransformingStarted event when annotation transformation process is started, WpfAnnotationViewer raises the WpfAnnotationViewer.AnnotationTransformingFinished event when annotation transformation process is finished.

Detailed information about principles of annotation selection can be found in article "Viewing and transforming annotations. Interaction with annotations."

Expand functionality of WPF annotation viewer

WpfAnnotationViewer class has open architecture and allows to change, practically, any functionality in derived classes.

Send Feedback