Winforms multi-layer graphics

Question

Problem example: I have a control do draw some geometrical shapes (I use panel). I have drawn a line. Now when I move cursor to one of the line tips I want that point to be "highlighted" (a solid circle drawn around it). And when I move cursor off the point, I want the "highlighting" circle to be erased, but I do not want to redraw the line.

So, technically, I need two layers: 1-st layer to draw my line(s). 2-nd layer to draw/erase highlights. I do not want the first layer to be redrawn every time when something is drawn/erased in the second layer.

Any suggestions?

@HighCore It's good to recommend WPF, but `winforms` is not deprecated, and `WPF` does not require only 10% of the time, code and effort. — Loathing, Aug 29 '15 at 18:48

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Option 1: Nest another Panel in the bottom one. This is good for overlaying graphics including semi-transparency. (Nesting means: panel2.Parent = panel1) You can nest many layers if you want to.
Option 2: Draw into the BackgroundImage of the Panel and use drawing onto the surface for the interactivce stuff.

I noted that you 'don't want to draw the line again'. This is not what you would usually say/do/try when doing graphics. If you are serious about this go for option 2!

See here for the difference of drawing onto a control and into a Bitmap and here for another example of using option 2 to display a cross as a cursor above a Bitmap.

Btw, the two options are not mutually exclusive: You could nest Panels with BackgroundImages and draw interactive stuff on the topmost one..

edited May 23 '17 at 10:26

Community

1
1

answered Aug 29 '15 at 18:33

TaW

53,122
8
69
111

Transparency is not working very well in Windows form, specially if you redraw each layer through independant events. The solution is to keep a "copy" of the first layer before drawing the second one. When doing a new redraw, copy the saved image and make the second drawing. – Graffito Aug 29 '15 at 20:46
True for __overlapping__ controls. But __nested__ controls work just fine with Winform's faked tranparency. – TaW Aug 29 '15 at 20:48
@ TaW - Fast reaction :). I didn't even finished my comment, because I often type on the [Enter] key for a CR, what triggers an early validation of my comment ... – Graffito Aug 29 '15 at 20:55
Sorry ;-) - Well the balance of drawing in the Paint event and drawing into Images depends mostly on the number of items to draw. If this is unknown imo the best course of action is to keep it dynamical.. – TaW Aug 29 '15 at 20:58
Thank you guys! I was thinking about nested controls but was not sure about transparency. – user5280339 Aug 31 '15 at 22:11

score 0 · Answer 2 · answered Aug 29 '15 at 21:24

@TaW pretty much answered it. I set an example:

For static drawing:

private Bitmap myStaticImage;

public Form2()
{
    InitializeComponent();

    this.myStaticImage = new Bitmap(200, 100);

    Graphics g = Graphics.FromImage(this.myStaticImage);

    g.DrawLine(Pens.Red, new Point(0, 0), new Point(200, 0));

    this.panel1.BackgroundImage = this.myStaticImage;
}

For dynamic drawing:

private void panel1_Paint(object sender, PaintEventArgs e)
{
    // Stuff
}

I recommend using a PictureBox or a UserControl with DoubleBuffered property set to true. Panel control is not double buffered and will flicker.

Winforms multi-layer graphics

2 Answers2

Linked