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?

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