How to draw a point over an image in Image(WPF), runtime with event

Question

I have the following problem: I'm using Image component in WPF. I load my Image that is a map for me. I want to make a Button that if I click on, I will be allowed to click on my map and draw a point. That point should be "unique", so it should remember coordinates/description(I will store it in a database). Coordinates should be read only from that image, not from the whole form. I need OnMouseClick event after my point creation.

What should I use/read about to do that ?

Answer 1

1. Canvas allows you to place an object using left/top coordinates.
2. You need to place canvas exactly over the image with same dimensions as image.
3. To accomplish this, you should use a Grid, as it allows controls to stack over each other.

4. You can get the mouse click coordinates using e.GetPosition() in MouseLeftButtonDown event handler. As canvas is covering up image, so you will get coord according to image.

   <Grid>
       <Image x:Name="MapImg"  Source="img/map.gif" Stretch="Fill" MouseLeftButtonDown="Image_MouseLeftButtonDown_1"/>
       <Canvas x:Name="Cnv"/>
   </Grid>
   
    private void Image_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
       {  
           Ellipse ellipse = new Ellipse();
           ellipse.Fill = Brushes.Sienna;
           ellipse.Width = 100;
           ellipse.Height = 100 ;
           ellipse.StrokeThickness = 2;
   
           Cnv.Children.Add(ellipse);
   
           Canvas.SetLeft(ellipse, e.GetPosition(MapImg).X);
           Canvas.SetTop(ellipse, e.GetPosition(MapImg).Y);            
       }