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

I have a bitmap image in an image control

I need to draw a red line on the bitmap eac开发者_JAVA百科h 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.

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

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.