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.

Cribbs

Put the image and line in the same grid cell and they will overlap. – Dram

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 = ...;

Boater

Thank you both for your help! However I have a zoom attached to the image (WPF) and this takes only 1 content. When I add the line, I get: The property 'content' is set more than once. I will try to add it after the zoom. Any other way? <ImageZoom:PanAndZoomViewer x:Name="zoomViewer" MinimumZoom="1" MaximumZoom="4" Grid.Row ="0" Grid.Column="2"> <Image Name="image1" Visibility="Collapsed" Stretch="Fill"> </Image> </ImageZoom:PanAndZoomViewer > – Cribbs

It works! Of course the line does not zoom, but that is no problem for now. Thank you very very much! – Cribbs

Answer 2

You can place a canvas with the background as transparent on top of your BitmapImage and then draw the line as required. Code from xaml file:

<Grid>
    <Image Source="C:\Users\sm143444\Desktop\download.jpg" />
    <Canvas Background="Transparent"  x:Name="draw" />
</Grid>

Code from Xaml.cs:

public MainWindow()
    {
        InitializeComponent();
        Point startPoint = new Point(50, 50);
        Line newLine = new Line();
        newLine.Stroke = Brushes.Black;
        newLine.Fill = Brushes.Black;
        newLine.StrokeLineJoin = PenLineJoin.Bevel;
        newLine.X1 = startPoint.X;
        newLine.Y1 = startPoint.Y;
        newLine.X2 = startPoint.X + 100;
        newLine.Y2 = startPoint.Y + 100;
        newLine.StrokeThickness = 2;
        this.draw.Children.Add(newLine);
    }

output

Or you can even add a ZIndex to your image and Line so that they are laid on different layers on canvas.

Potvaliant

then how to save the image with the line as an image? – Trotskyism

@CarlosLiu Sorry for late reply. You can achieve that by drawing the image as background of the canvas, instead of an overlay and then saving the canvas as an image. – Potvaliant