Draw overlay on an image

Question

I have an image that the user can zoom/scroll. I want to draw some rectangles/circles on a different layer (for example: drawing a circle for each person's face that was identified in the picture).

The rectangle position is relative to the image.

How do I create such an overlay?

Solution 1

I have managed to do something similar:

• Set image as background
• Put a transparent ItemsControl on top of it
• Set ItemsControl.ItemsPanel to Canvas
• wrote handlers for dragging operations

Code Snippet:

  <ItemsControl x:Name="overlayItemsControl" 
        Background="Transparent"  
        ItemsSource="{Binding Path=Blocks}"
        Width="{Binding ElementName=imageControl, Path=Width}"
        Height="{Binding ElementName=imageControl, Path=Height}"
        ItemContainerStyle="{StaticResource rectStyle}"
        PreviewMouseMove="ItemsControl_PreviewMouseMove"
        PreviewMouseDown="ItemsControl_PreviewMouseDown"
        PreviewMouseUp="ItemsControl_PreviewMouseUp"
        PreviewKeyDown="ItemsControl_PreviewKeyDown">

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
   ....
</ItemsControl>

Solution 2

An easy way is to just use a Canvas and set the canvas' background property to your photo, and then place your circles or rectangles on top of that and position them with the Canvas.Left and .Top properties.

    <Canvas x:Name="myCanvas">
        <Canvas.Background>
            <ImageBrush ImageSource="c:\photo.bmp"/>
        </Canvas.Background>
        <Image Canvas.Top="20" Canvas.Left="20" Height="20" Width="20" Source="c:\circle.bmp"/>
    </Canvas>