Overlay Image

Question

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

The position of the rectangle relative to the image.

How to create such an overlay?

Answer 1

I managed to do something like this:

• Set image as background
• Place a transparent ItemsControl on top of it
• Set ItemsControl.ItemsPanel to Canvas
• wrote handlers for drag and drop 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> 

Answer 2

An easy way is to simply use Canvas and set the canvas background property to your photo, and then put your circles or rectangles on top of it and put 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>