WPF, C#: Draw a line onto existing bitmap in image control

Question

I have a bitmap image in an image control

I need to draw a red line on the bitmap each time I click with the mouse onto it, at the place where I clicked the mouse.

I first thought of creating a Line object, but found out, that I cannot add the Line. I would need a canvas. But if I put my image in a canvas, my bitmap does not stretch over the whole canvas (I found out, that the coordinates of the bitmap determine the place on the canvas, so my bitmap is wrongly displayed.)

Then I tried using graphics

Graphics graphics = Graphics.FromImage(bitmapImg);
graphics.DrawLine(new System.Drawing.Pen(System.Drawing.Color.Red), 0, 0,  bitmapImg.Width, bitmapImg.Height); //not the line yet, just for testing
    graphics.DrawImage(bitmapImg, 0, 0, bitmapImg.Width,bitmapImg.Height);
        graphics.Dispose();

However, I don`t get anything painted onto my bitmap........

Now I think, I probably have to get the bitmap into an array and then change the pixel color to get the line in the bitmap. I believe, that this would be very slow.

I am now trying something with visualDrawing, however, I have not got it to work yet:-(

What is a good way to get a line onto an existing bitmap in WPF C#???? and how to remove it?

I would be glad for any help! Thank you! I posted it already on the MS forum page, but no answer so far.

Answer 1

When you do Graphics.FromImage, this Graphics class (and also the System.Drawing.Pen) do not belong to WPF, they are part from WinForms and they are internally using Windows' GDI+ calls to draw and cannot draw on top of WPF.

If you didn't got an error when compiling the first line of your code, then probably your bitmapImg is a System.Drawing.Image (from WinForms) not an Image control from WPF (System.Window.Controls.Image).

As adrianm mentioned, the easiest way will probably be to use a Grid:

<Grid>
    <Image Source="your image" />
    <Line Name="line" Visibility="Hidden" Stroke="Red" StrokeThickness="1" />
</Grid>

Then, in your click event handler you can make the line visible and give it the coordinates you want:

line.Visibility = Visible;
line.X1 = mouse_x;
line.Y1 = mouse_y;
line.X2 = ...;
line.Y2 = ...;