WPF Image Annotation in VB.NET
This article is about how to annotate an image in WPF Application.
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.