Image Annotation in WPF

Annotation refers to a note which describes or explains part of another document. The WPF has built-in support for document annotations. The technique involves rendering a custom control in the adorner layer of an Image element, allowing for in-place editing of annotations.

This article shows how to create text annotations over an image in a WPF application. You have simply write the text to create annotation on the image, you can also modify and delete annotations.

Code Snippets

<Window x:Class="AnnotatedImageInViewbox.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Image Annotation" Height="500" Width="500"
    FontSize="14" WindowStartupLocation="CenterScreen"
    >
  <Window.Resources>
    <!-- This is the Style applied to the TextBlock within a TextBlockAdorner. -->
    <Style x:Key="AnnotationStyle" TargetType="TextBlock">
      <Setter Property="Background" Value="#88000000" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Foreground" Value="White" />
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Background" Value="#CC666666" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
   <DockPanel>
    <DockPanel DockPanel.Dock="Top" >
     <TextBox x:Name="txtAnnotation" Background="LemonChiffon" Text="Type some text here for annotation..." />
    </DockPanel>
    <!-- This Viewbox's adorner layer hosts the annotations. -->
    <Viewbox x:Name="viewBox">
      <StackPanel>
        <TextBlock Text="Click on the image to insert the annotation" HorizontalAlignment="Center" />
        <!-- This is the Image which is given annotations. -->
        <Image x:Name="image" Source="Cartoon.jpg" MouseLeftButtonDown="image_MouseLeftButtonDown" />
        <TextBlock Text="Click on annotation to remove it from image" HorizontalAlignment="Center" />
      </StackPanel>
    </Viewbox>
  </DockPanel>
</Window>

Output Window

Now type annotation text in the text box and after click on the image to insert on it and see the result like this:

I hope you really enjoy this.