Develop Reference

Drawing on a panel by clicking a button in WinForms

I'm trying to make a program to draw on the a Panel (a square, circle, etc...) by clicking on a button.
I have not done much so far, just tried the code drawing directly to the panel but don't know how to move it to the button. Here is the code I have so far.
If you know a better method to draw than the one I'm using please let me know.
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void mainPanel_Paint(object sender, PaintEventArgs e)
{
Graphics g;
g = CreateGraphics();
Pen pen = new Pen(Color.Black);
Rectangle r = new Rectangle(10, 10, 100, 100);
g.DrawRectangle(pen, r);
}
private void circleButton_Click(object sender, EventArgs e)
{
}
private void drawButton_Click(object sender, EventArgs e)
{
}
}
}

Using this extremely simplified example class..:
class DrawAction
{
public char type { get; set; }
public Rectangle rect { get; set; }
public Color color { get; set; }
//.....
public DrawAction(char type_, Rectangle rect_, Color color_)
{ type = type_; rect = rect_; color = color_; }
}
Have a class level List<T>:
List<DrawAction> actions = new List<DrawAction>();
you would code a few buttons like this:
private void RectangleButton_Click(object sender, EventArgs e)
{
actions.Add(new DrawAction('R', new Rectangle(11, 22, 66, 88), Color.DarkGoldenrod));
mainPanel.Invalidate(); // this triggers the Paint event!
}
private void circleButton_Click(object sender, EventArgs e)
{
actions.Add(new DrawAction('E', new Rectangle(33, 44, 66, 88), Color.DarkGoldenrod));
mainPanel.Invalidate(); // this triggers the Paint event!
}
And in the Paint event:
private void mainPanel_Paint(object sender, PaintEventArgs e)
{
foreach (DrawAction da in actions)
{
if (da.type == 'R') e.Graphics.DrawRectangle(new Pen(da.color), da.rect);
else if (da.type == 'E') e.Graphics.DrawEllipse(new Pen(da.color), da.rect);
//..
}
}
Also use a double-buffered Panel subclass:
class DrawPanel : Panel
{
public DrawPanel()
{ this.DoubleBuffered = true; BackColor = Color.Transparent; }
}
The next steps will be to add more types, like lines, curve, text; also colors, pen widths and styles. Also make it dynamic, so that you pick a tool and then click at the Panel..
For freehand drawing you need to collect a List<Point> in the MouseMove etc..
Lots of work, lots of fun.
Updates from comments:
Note: This is, as I wrote extremely simplified. I have character to draw shapes like Rectangle and Ellipse. With a little more code you can add more characters for a filled rectangle and a filledEllipse. But a) the shapes really ought to be in an Enum and b) more complicated shapes like lines, polygons, text, or shapes with rotation will need more data that just a Rectangle. .
The restriction to rectangle coodinates was a simplification, not so much of the shape but of the data structure. Your other shapes could be reduced to fit in a rectangle (four triangles and two hexagons come to mind); just add charcters and new drawxxx calls.. But evetually adding a List for complex shapes and maybe a string and a font will allow for more complex results..

How to keep drawn shapes after the form is refreshed?

I am trying to create a small paint application in Visual Studio 2015. My project falls into the category of Windows Form Applications. I have the following problem:
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (a == 1)
{
if (r == 1 || el == 1)
{
int x = Math.Min(inX, e.X);
int y = Math.Min(inY, e.Y);
int width = Math.Max(inX, e.X) - Math.Min(inX, e.X);
int height = Math.Max(inY, e.Y) - Math.Min(inY, e.Y);
rect = new Rectangle(x, y, width, height);
Refresh();
}
else if (l == 1)
{
ep = e.Location;
Refresh();
}
else
{
ep = e.Location;
g = this.CreateGraphics();
g.DrawLine(p, sp, ep);
sp = ep;
}
}
}
This part of my codes creates a Rectangular (2nd if), a line segment(3rd if) and just a line. It works pretty much the same as MS Paint; the rectangular or the line segment isn not completed until the user releases the left mouse click (Mouse up). But when a rectangular is finally made when I try again to create another one, the form refreshes ( Refresh(); ) and I lose all the previous drawn rectangulars or lines. I tried replacing Refresh(); with Invalidate(rect); and Update();, but I do not get the result I want.
Instead, I get this:

You should do all your drawing to a separate Bitmap "buffer" that you keep around. Draw your shapes to that bitmap, then when the screen actually needs to be updated, draw the buffer to the screen.
Also, anytime you call Graphics.FromImage you need to remember to Dispose, or it will leak resources like crazy.
Incredibly simple example
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;
namespace DrawExample
{
public partial class Form1 : Form
{
private Bitmap _canvas; //This is the offscreen drawing buffer
private Point _anchor; //The start point for click-drag operations
private Rectangle? _ghost;
private Brush _ghostBrush;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
_ghostBrush = new SolidBrush(Color.FromArgb(200, 200, 200, 255)); //This creates a slightly blue, transparent brush for the ghost preview
ResizeCanvas();
}
private void Form1_Resize(object sender, EventArgs e)
{
ResizeCanvas();
}
/// <summary>
/// Resizes the offscreen bitmap to match the current size of the window, it preserves what is currently in the bitmap.
/// </summary>
private void ResizeCanvas()
{
Bitmap tmp = new Bitmap(this.Width, this.Height, PixelFormat.Format32bppRgb);
using (Graphics g = Graphics.FromImage(tmp))
{
g.Clear(Color.White);
if (_canvas != null)
{
g.DrawImage(_canvas, 0, 0);
_canvas.Dispose();
}
}
_canvas = tmp;
}
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_anchor = new Point(e.X, e.Y);
}
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_ghost = new Rectangle(_anchor.X, _anchor.Y, e.X - _anchor.X, e.Y - _anchor.Y);
this.Invalidate();
}
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
//Create a Graphics for the offscreen bitmap
using (Graphics g = Graphics.FromImage(_canvas))
{
Rectangle rect = new Rectangle(_anchor.X, _anchor.Y, e.X - _anchor.X, e.Y - _anchor.Y);
g.FillRectangle(Brushes.White, rect);
g.DrawRectangle(Pens.Black, rect);
}
_ghost = null;
//This queues up a redraw call for the form
this.Invalidate();
}
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
if (_ghost.HasValue)
{
using (Bitmap tmp = new Bitmap(_canvas))
{
using (Graphics g = Graphics.FromImage(tmp))
{
g.FillRectangle(_ghostBrush, _ghost.Value);
g.DrawRectangle(Pens.Black, _ghost.Value);
e.Graphics.DrawImage(tmp, 0, 0);
}
}
}
else
{
e.Graphics.DrawImage(_canvas, 0, 0);
}
}
//This stops the flickering
protected override void OnPaintBackground(PaintEventArgs e)
{
//Do nothing
}
}
}

You are drawing directly onto the form's drawing surface. That surface is not persistent. It lasts until the next paint cycle.
Instead you should:
Draw to an offscreen bitmap.
Draw that bitmap onto, for instance, a picture box control. Or paint it directly onto the form's drawing surface in its Paint event.

Mouse OnDrag event on GDI graphics object

I have a simple question about mouse events.
I have a WinForms application and I used the GDI+ graphics object
to draw simple shape, a circle.
Now what I want to do is to drag this shape with the mouse.
So when the user is moving the mouse, when the left button is still pressed
I want to move the object.
my question is how to detect if the user is still pressing on the mouse's left button?
I know that there is no onDrag event in winforms.
any ideas?

Check this very simplified example. It doesn't cover many aspects of GDI+ drawing, but gives you an idea how to handle mouse event's in winforms.
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsExamples
{
public partial class DragCircle : Form
{
private bool bDrawCircle;
private int circleX;
private int circleY;
private int circleR = 50;
public DragCircle()
{
InitializeComponent();
}
private void InvalidateCircleRect()
{
this.Invalidate(new Rectangle(circleX, circleY, circleR + 1, circleR + 1));
}
private void DragCircle_MouseDown(object sender, MouseEventArgs e)
{
circleX = e.X;
circleY = e.Y;
bDrawCircle = true;
this.Capture = true;
this.InvalidateCircleRect();
}
private void DragCircle_MouseUp(object sender, MouseEventArgs e)
{
bDrawCircle = false;
this.Capture = false;
this.InvalidateCircleRect();
}
private void DragCircle_MouseMove(object sender, MouseEventArgs e)
{
if (bDrawCircle)
{
this.InvalidateCircleRect(); //Invalidate region that was occupied by circle before move
circleX = e.X;
circleY = e.Y;
this.InvalidateCircleRect(); //Add to invalidate region the rectangle that circle will occupy after move.
}
}
private void DragCircle_Paint(object sender, PaintEventArgs e)
{
if (bDrawCircle)
{
e.Graphics.DrawEllipse(new Pen(Color.Red), circleX, circleY, circleR, circleR);
}
}
}
}

2D Array of RectangleShapes

I am developing a very rudimentary drawing program: A 2D grid comprised of multiple RectangleShapes, around 20x30 pixels each, which when clicked change color based on user RGB input, which works just fine:
Color SelectedColor = new Color();
private void Pixel_1_1_Click(object sender, EventArgs e) // on Rectangle click
{
Pixel_1_1.FillColor = SelectedColor; // change to currently desired color.
}
Since the number of squares is rising dramatically, I'm looking for a way to arrange the "pixel" rectangles into a 2D array. (I really don't want to have to make a Pixel_Click method for every single Rectangle on the screen!) Hoping eventually to be able to call something like:
private void Pixel_[x]_[y]_Click(object sender, EventArgs e)
{
Pixel_[x]_[y].FillColor = SelectedColor;
}
My friends suggest the use of an anonymous delegate, but I don't understand how to fully use one to solve my problem.
What would be the best way to generate a 2D array of rectangles in a C# Windows Form? And once generated, how can I access them with a single method for variant values of x and y?

While you are probably correct in thinking of each rectangle as an object, it probably isn't correct to think of each rectangle as a windows control, especially since you have so many of them.
So try creating your own rectangle object:
public class MyRect {
public Color FillColor { get; set; }
public Rectangle Rectangle { get; set; }
public MyRect(Rectangle r, Color c) {
this.Rectangle = r;
this.FillColor = c;
}
}
Now you just need to keep a list of your objects and paint on a single Panel control (or PictureBox) all of your rectangles:
private List<MyRect> myRectangles = new List<MyRect>();
public Form1() {
InitializeComponent();
myRectangles.Add(new MyRect(new Rectangle(10, 10, 64, 16), Color.Blue));
myRectangles.Add(new MyRect(new Rectangle(20, 48, 16, 64), Color.Red));
}
private void panel1_Paint(object sender, PaintEventArgs e) {
foreach (MyRect mr in myRectangles) {
using (SolidBrush sb = new SolidBrush(mr.FillColor)) {
e.Graphics.FillRectangle(sb, mr.Rectangle);
}
}
}
To handle the "click" event of the rectangles, you just handle the MouseDown or MouseClick event of your container control and determine yourself which rectangle is being clicked on:
void panel1_MouseDown(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left) {
foreach (MyRect mr in myRectangles) {
if (mr.Rectangle.Contains(e.Location)) {
ChangeColor(mr, Color.Green);
}
}
panel1.Invalidate();
}
}
private void ChangeColor(MyRect mr, Color newColor) {
mr.FillColor = newColor;
}

If you want to maintain the rectangles as components on screen then you can assign all of them the same click event, the click event will have a little dropdown to pick an existing event. To know which recantangle was clicked use the sender parameter ((Pixel)sender).FillColor = SelectedColor;
For ease I would recommend using something like a panel and drawing rectangles on it, That means you only have a single click event to deal with. So now your question becomes "How do I draw a grid of rectangles on a panel" and "How do I know which rectangle was clicked"
So for the first part you could use this not the very efficient way.
Create a class which stores the information about your pixels
class MyPixel
{
public Color PixelColour;
public Rectangle Bounds;
}
Keep a list of them in memory
List<MyPixels> MyGrid = new List<MyPixels>();
then in the onpaint event of the panel Draw the pixels on the panel
foreach(MyPixel Pixel in MyGrid)
{
using(Brush B = new SolidBrush(Pixel.PixelColor))
{
e.Graphics.DrawRectangle(B, Pixel.Bounds);
}
}
Now in the click event you'll need to know which pixel was clicked
foreach(MyPixel Pixel in MyGrid)
{
if (Pixel.Bounds.Contains(e.Location))
{
PixelClicked(Pixel);
}
}

I believe you're going about this the wrong way. What you want to do is to draw directly into a bitmap. Here is some code that uses a PictureBox to allow the user to draw into it.
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
private Pen _pen;
private bool _mouseDown;
private int _startX;
private int _startY;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
_pen = new Pen(Color.Black);
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
_mouseDown = true;
_startX = e.X;
_startY = e.Y;
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
_mouseDown = false;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (_mouseDown)
{
using (var graphics = Graphics.FromImage(pictureBox1.Image))
{
graphics.DrawLine(_pen, _startX, _startY, e.X, e.Y);
_startX = e.X;
_startY = e.Y;
}
pictureBox1.Invalidate();
}
}
}
}
This is the normal method to write a painting app and is quite performant as well. You can also easily save, write new tools or manipulate images better in this way.

How do I draw a rectangle based on the movement of the mouse?

I found sample code here for drawing on a form:
http://msdn.microsoft.com/en-us/library/aa287522(v=vs.71).aspx
As a followup to this requirement (discovering which controls are beneath a rectangle described by
the user dragging the mouse):
There seems to be a mismatch between the location of my controls and the location of my MouseDown and -Up events
...I want to provide the user instant/constant feedback about just what they are about to select
(when/if they release the mouse button). I want to not just draw a line following the mouse's
movement, but draw the rectangle that is being described by their mousewrangling efforts.
I'm thinking the MouseMove event, coupled with code from the two links above, could do the trick, but is that fired too often/would that have a malevolent impact on performance? If so, what would be a preferable event to hook, or would a timer be the way to go here?
UPDATE
This code, adapted from John's example below (the only difference is the StackOverflow-inducing calls to base.* are commented out, and I changed the color from red to black (no reference to Stendahl intended)), works except that previously drawn rectangles display again after releasing the mouse. IOW, the first rectangle draws perfectly - it disappears with the mouse up click (as intended). However, when I describe a second rectangle by depressing the left mouse key and dragging down and to the right, the first rectangle displays again! And this continues to happen - every previously drawn rectangle is remembered and brought back to the fore when a new rectangle is being drawn.
public partial class Form1 : Form
{
private Point? _start;
private Rectangle _previousBounds;
public Form1()
{
InitializeComponent();
}
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
_start = e.Location;
//base.OnMouseDown(e);
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
if (_start.HasValue)
DrawFrame(e.Location);
//base.OnMouseMove(e);
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
ReverseFrame();
_start = null;
//base.OnMouseUp(e);
}
private void ReverseFrame()
{
ControlPaint.DrawReversibleFrame(_previousBounds, Color.Black, FrameStyle.Dashed);
}
private void DrawFrame(Point end)
{
ReverseFrame();
var size = new Size(end.X - _start.Value.X, end.Y - _start.Value.Y);
_previousBounds = new Rectangle(_start.Value, size);
_previousBounds = this.RectangleToScreen(_previousBounds);
ControlPaint.DrawReversibleFrame(_previousBounds, Color.Black, FrameStyle.Dashed);
}
}

ControlPaint.DrawReversibleFrame() will do what you want. Performance is not generally a problem - just keep it small and clean.
--
EDIT: Added a code sample. StackOverflowException indicates something is wrong - but without seeing yours, can't answer directly.
private Point? _start;
private Rectangle _previousBounds;
protected override void OnMouseDown(MouseEventArgs e)
{
_start = e.Location;
base.OnMouseDown(e);
}
protected override void OnMouseMove(MouseEventArgs e)
{
if( _start.HasValue ) {
ReverseFrame();
DrawFrame(e.Location);
}
base.OnMouseMove(e);
}
protected override void OnMouseUp(MouseEventArgs e)
{
ReverseFrame();
_start = null;
base.OnMouseUp(e);
}
private void ReverseFrame()
{
ControlPaint.DrawReversibleFrame(_previousBounds, Color.Red, FrameStyle.Dashed);
}
private void DrawFrame(Point end)
{
ReverseFrame();
var size = new Size(end.X - _start.Value.X, end.Y - _start.Value.Y);
_previousBounds = new Rectangle(_start.Value, size);
_previousBounds = this.RectangleToScreen(_previousBounds);
ControlPaint.DrawReversibleFrame(_previousBounds, Color.Red, FrameStyle.Dashed);
}