WPF Image Annotation in VB.NET

This article is about how to annotate an image in WPF Application.
  • 3148

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"
    Title="Image Annotation" Height="500" Width="500"
    FontSize="14" WindowStartupLocation="CenterScreen"
    <!-- 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" />
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Background" Value="#CC666666" />
    <DockPanel DockPanel.Dock="Top" >
     <TextBox x:Name="txtAnnotation" Background="LemonChiffon" Text="Type some text here for annotation..." />
    <!-- This Viewbox's adorner layer hosts the annotations. -->
    <Viewbox x:Name="viewBox">
        <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" />

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.


More Articles

© 2020 DotNetHeaven. All rights reserved.