I’ve been playing more and more with the GDI in C# and it’s phenomenal . One could write a book on it, but today I’ll stick with the basics. We all have to start somewhere.
All of my tutorials include additional resources at the end. Check them out. They’ve done me well .
Start up a new form and make sure you are including the drawing System. That would be:
Using System.Drawing;
One important thing to remember with graphics: Anything you draw erases when the form is minimized, moved off the screen, etc…It is not permanent. There are two basic ways to keep them permanent. I will discuss them both.
The first way is by using the Paint Event. It’s very basic and easy to do. You merely summon the event and write all your code inside it. (Summon, hehe…I am in a geeky mood tonight. Bare with me)
To use the Paint Event:
1. Left click on the form
2. Click on the Properties toolbar
3. Click on the lightning bolt button (also called the event button)
4. Find the appearance tab and double click on Paint. The program will switch to code view and your event has already been formed for you. Just write all the code in there.
Ok, now we’re ready to do some coding! My tutorial will now show up as comments in between the code as that will be easier to write.
//Let’s create our graphic object
Graphics newgraphic;
newgraphic = this.CreateGraphics();
//Now, we need to create a pen to work with. We set the color to red and the width to 5.
Pen myPen = new Pen(Color.Red, 5);
//And now we draw the line. We tell it what pen to use, the starting point of x and y, and the ending point of x and y
newgraphic.DrawLine(myPen, 10, 10, 200, 200);
Ok, go ahead and test it now. You should see a red line on your new form. Move the form around a bit if you’d like. Your line is there to stay. There are other shapes you can draw; an entire mess of them. I’ll give you the code of one, but there are plenty more to explore.
// Draw a rectangle…rectangle coordinates are x, y, width, height
Graphics graphicsRect;
graphicsRect = this.CreateGraphics();
Pen mypen= new Pen(Color.Blue, 3);
Rectangle myRectangle = new Rectangle(10, 25, 150, 150);
graphicsRect.DrawRectangle(mypen, myRectangle);
Other tools are DrawEllipse for a circle and DrawText for text. Check my resources for more on those.
Now, onto Bitmaps. The paint event is all fine and dandy, but it doesn’t do well for more complicated images. When you create a bitmap, you create a space to store your image and then you can call it when you need it.
Here we go!
//make sure you add Graphics to your resources
Using System.Graphics;
//In the partial class of your form (that’s the very top of the code, directly underpublic partial class Form2 : Form),
//you’ll want to declare your bitmap space
private Bitmap mybitmap;
Now go back to the design space and create a picturebox. You can find that under your tool bar. Set the size to 200, 200. Position it where you’d like.
Double click on the form. This will add a Form1_Load event. The rest of your code goes inside there.
//Create your graphic object and call upon your bitmap. The 200/200 are the width and height of your bitmap
Graphics newgraphic;
mybitmap = new bitmap(200, 200);
//Create your pen
Pen myPen = new Pen(Color.Plum, 3);
//Let’s draw an ellipse this time…parameters are x,y, width, height
newgraphic.DrawEllipse(myPen, 0, 50, 30, 20);
//Add your bitmap to your picture box.
pictureBox1.Image = myBitmap;
//And last, but not least, free up your resources. This is very important!!!
newgraphic.Dispose();
Ok, now take a deep breath and give it a run. You should be pleasantly surprised. I hope this has been helpful in getting you started. I know I absolutely loved using the graphics tool and look forward to learning more about it in the near future.
And, as promised, my resources:
http://www.dreamincode.net/forums/showtopic67275.htm
http://www.techotopia.com/index.php/Drawing_Graphics_in_C_Sharp
http://www.xtremedotnettalk.com/showthread.php?t=72975
http://www.csharptalk.com/2009/10/graphics-multimedia-and-printing.htm
Oh, and one more thing you should know. The graph that you’re drawing on is upside down. Let’s say your bitmap is 200x by 200y. X reads left to right. so it’s 0-200, 0 being on the left and 200 being on the right. Y reads from top to bottom, so 0 is on the top and 200 is on the bottom. I’m sure it’s standard programming, but it’s new to me so I thought I’d throw that in there.
Good night everyone! Happy coding!
