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"
    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

Annotation1.gif

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

Annotation2.gif

I hope you really enjoy this.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.