How To Enable Annotations

The following step-by-step tutorial demonstrates how to enable annotations in Document Toolkit. The download link for the complete source code of this tutorial is available at the bottom of this page.

1) Create a DocumentViewer project in Visual Studio 2010. Follow the steps in the How To Create My First Document Viewer tutorial to create a simple project if you haven't done so already.

2) In order to work with annotations we need to enable text selection first. Modify the MainPage.xaml and add a TextSelection to the grid resources collection. Modify the document viewer to reference the TextSelection using the StaticResource markup extension:

  <doc:TextSelection x:Name="Selection" IsEnabled="True" />

<doc:DocumentViewer x:Name="Viewer" DocumentDataSource="{Binding ElementName=DataSource}" Selection="{StaticResource Selection}" />

Hit F5 to compile and run the application and you'll notice that text selection is now enabled.

3) Before enabling annotations we need to add a context menu for commands to add and remove annotations. First we need to install the context menu. A context menu is available in the Silverlight Toolkit which conveniently enough is also distributed with NuGet.
3.1) Right click the project references
3.2) Select 'Add Library Package References...'
3.3) Select the NuGet official package source
3.4) Search for and install the SilverlightToolkit-Input package. This will implicitly install the SilverlightToolkit-Core package as well.
4) The context menu requires a reference to the System.Windows.Controls which is available in the Silverlight SDK.
4.1) Right click the project references
4.2) Select 'Add Reference'
4.3) Select the System.Windows.Controls assembly.
5) Add a context menu to the document viewer by modifying the DocumentViewer in the MainPage.xaml.cs.

<doc:DocumentViewer x:Name="Viewer" DocumentDataSource="{Binding ElementName=DataSource}" Selection="{StaticResource Selection}">
      <toolkit:MenuItem Header="Copy">
          <doc:CopyToClipboardCommand Selection="{StaticResource Selection}" />
      <toolkit:Separator />
      <toolkit:MenuItem Header="Highlight">
          <doc:HighlightCommand Selection="{StaticResource Selection}" />
      <toolkit:MenuItem Header="Clear Highlight">
          <doc:ClearHighlightCommand Selection="{StaticResource Selection}" />

Hit F5 to compile and run the application. Right-mouse click the document and the context menu appears. The copy command works, but the highlight commands do not work yet. We need to enable the annotation service first.

6) The Document Toolkit Annotation API has been closely modeled after its WPF counterpart. Annotations are load and save to an AnnotationStore, which is an XML based store that can be saved to any stream. The annotation store is associated with a viewer using the AnnotationService.

Enable annotations by adding the following code to the constructor of the MainPage.xaml.cs:

using FirstFloor.Documents.Annotations;
using FirstFloor.Documents.Annotations.Storage;

// create annotation store
var annotations = new AnnotationStore();

// enable annotation service
var service = new AnnotationService(this.Viewer);

7) Hit F5 to compile and run the application. The highlight and remove highlight commands in the context menu now work as expected.

Document Toolkit includes a Highlight annotation, for details on how to add your own custom annotations, see the How To Create a Custom Annotation tutorial.

Tutorial source code:

Last edited Jul 4, 2011 at 7:25 PM by kozw, version 8


No comments yet.