Annotations Overview

Writing notes or comments on paper documents is such a commonplace activity that we almost take it for granted. These notes or comments are "annotations" that we add to a document to flag information or to highlight items of interest for later reference. Although writing notes on printed documents is easy and commonplace, the ability to add personal comments to electronic documents is typically very limited, if available at all.

This topic reviews several common types of annotations, specifically sticky notes and highlights, and illustrates how the Microsoft Annotations Framework facilitates these types of annotations in applications through the Windows Presentation Foundation (WPF) document viewing controls. WPF document viewing controls that support annotations include FlowDocumentReader and FlowDocumentScrollViewer, as well as controls derived from DocumentViewerBase such as DocumentViewer and FlowDocumentPageViewer.

This topic contains the following sections.

  • Sticky Notes
  • Highlights
  • Data Anchoring
  • Matching Annotations with Annotated Objects
  • Related Topics

Sticky Notes

A typical sticky note contains information written on a small piece of colored paper that is then "stuck" to a document. Digital sticky notes provide similar functionality for electronic documents, but with the added flexibility to include many other types of content such as typed text, handwritten notes (for example, Tablet PC "ink" strokes), or Web links.

The following illustration shows some examples of highlight, text sticky note, and ink sticky note annotations.

Highlight, text and ink sticky note annotations.

The following example shows the method that you can use to enable annotation support in your application.

        ' ------------------------ StartAnnotations --------------------------
        ''' <summary>
        '''   Enables annotations and displays all that are viewable.</summary>
        Private Sub StartAnnotations()
            ' If there is no AnnotationService yet, create one.
            If _annotService Is Nothing Then
                ' docViewer is a document viewing control named in Window1.xaml.
                _annotService = New AnnotationService(docViewer)
            End If

            ' If the AnnotationService is currently enabled, disable it.
            If _annotService.IsEnabled = True Then
                _annotService.Disable()
            End If

            ' Open a stream to the file for storing annotations.
            _annotStream = New FileStream(_annotStorePath, FileMode.OpenOrCreate, FileAccess.ReadWrite)

            ' Create an AnnotationStore using the file stream.
            _annotStore = New XmlStreamStore(_annotStream)

            ' Enable the AnnotationService using the new store.
            _annotService.Enable(_annotStore)
        End Sub ' end:StartAnnotations()
// ------------------------ StartAnnotations --------------------------
/// <summary>
///   Enables annotations and displays all that are viewable.</summary>
private void StartAnnotations()
{
    // If there is no AnnotationService yet, create one.
    if (_annotService == null)
        // docViewer is a document viewing control named in Window1.xaml.
        _annotService = new AnnotationService(docViewer);

    // If the AnnotationService is currently enabled, disable it.
    if (_annotService.IsEnabled == true)
        _annotService.Disable();

    // Open a stream to the file for storing annotations.
    _annotStream = new FileStream(
        _annotStorePath, FileMode.OpenOrCreate, FileAccess.ReadWrite);

    // Create an AnnotationStore using the file stream.
    _annotStore = new XmlStreamStore(_annotStream);

    // Enable the AnnotationService using the new store.
    _annotService.Enable(_annotStore);
}// end:StartAnnotations()

Highlights

People use creative methods to draw attention to items of interest when they mark up a paper document, such as underlining, highlighting, circling words in a sentence, or drawing marks or notations in the margin. Highlight annotations in Microsoft Annotations Framework provide a similar feature for marking up information displayed in WPF document viewing controls.

The following illustration shows an example of a highlight annotation.

Highlight Annotation

Users typically create annotations by first selecting some text or an item of interest, and then right-clicking to display a ContextMenu of annotation options. The following example shows the Extensible Application Markup Language (XAML) you can use to declare a ContextMenu with routed commands that users can access to create and manage annotations.

<DocumentViewer.ContextMenu>
  <ContextMenu>
    <MenuItem Command="ApplicationCommands.Copy" />
    <Separator />
    <!-- Add a Highlight annotation to a user selection. -->
    <MenuItem Command="ann:AnnotationService.CreateHighlightCommand"
              Header="Add Highlight" />
    <!-- Add a Text Note annotation to a user selection. -->
    <MenuItem Command="ann:AnnotationService.CreateTextStickyNoteCommand"
              Header="Add Text Note" />
    <!-- Add an Ink Note annotation to a user selection. -->
    <MenuItem Command="ann:AnnotationService.CreateInkStickyNoteCommand"
              Header="Add Ink Note" />
    <Separator />
    <!-- Remove Highlights from a user selection. -->
    <MenuItem Command="ann:AnnotationService.ClearHighlightsCommand"
              Header="Remove Highlights" />
    <!-- Remove Text Notes and Ink Notes from a user selection. -->
    <MenuItem Command="ann:AnnotationService.DeleteStickyNotesCommand"
              Header="Remove Notes" />
    <!-- Remove Highlights, Text Notes, Ink Notes from a selection. -->
    <MenuItem Command="ann:AnnotationService.DeleteAnnotationsCommand"
              Header="Remove Highlights &amp; Notes" />
  </ContextMenu>
</DocumentViewer.ContextMenu>

Data Anchoring

The Annotations Framework binds annotations to the data that the user selects, not just to a position on the display view. Therefore, if the document view changes, such as when the user scrolls or resizes the display window, the annotation stays with the data selection to which it is bound. For example, the following graphic illustrates an annotation that the user has made on a text selection. When the document view changes (scrolls, resizes, scales, or otherwise moves), the highlight annotation moves with the original data selection.

Annotation Data Anchoring

Matching Annotations with Annotated Objects

You can match annotations with the corresponding annotated objects. For example, consider a simple document reader application that has a comments pane. The comments pane might be a list box that displays the text from a list of annotations that are anchored to a document. If the user selects an item in the list box, then the application brings into view the paragraph in the document that the corresponding annotation object is anchored to.

The following example demonstrates how to implement the event handler of such a list box that serves as the comments pane.

        Private Sub annotationsListBox_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)

            Dim comment As Annotation = TryCast((TryCast(sender, ListBox)).SelectedItem, Annotation)
            If comment IsNot Nothing Then
                ' service is an AnnotationService object
                ' comment is an Annotation object
                info = AnnotationHelper.GetAnchorInfo(Me.service, comment)
                Dim resolvedAnchor As TextAnchor = TryCast(info.ResolvedAnchor, TextAnchor)
                Dim textPointer As TextPointer = CType(resolvedAnchor.BoundingStart, TextPointer)
                textPointer.Paragraph.BringIntoView()
            End If
        End Sub
void annotationsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

    Annotation comment = (sender as ListBox).SelectedItem as Annotation;
    if (comment != null)
    {
        // IAnchorInfo info;
        // service is an AnnotationService object
        // comment is an Annotation object
        info = AnnotationHelper.GetAnchorInfo(this.service, comment);
        TextAnchor resolvedAnchor = info.ResolvedAnchor as TextAnchor;
        TextPointer textPointer = (TextPointer)resolvedAnchor.BoundingStart;
        textPointer.Paragraph.BringIntoView();
    }
}

Another example scenario involves applications that enable the exchange of annotations and sticky notes between document readers through e-mail. This feature enables these applications to navigate the reader to the page that contains the annotation that is being exchanged.

See Also

Reference

DocumentViewerBase

DocumentViewer

FlowDocumentPageViewer

FlowDocumentScrollViewer

FlowDocumentReader

IAnchorInfo

Concepts

Annotations Schema

ContextMenu Overview

Commanding Overview

Flow Document Overview

Other Resources

How to: Add a Command to a MenuItem