DotNet Tutorials

Server Intellect

Navigator : Home > Tutorials > Graphics Tutorials > ...

 Drawing with Graphics in WinForms using C#

This tutorial will show you how to draw various shapes in a Window Form Application using the Graphics namespace. C# version.

Creating graphics in .NET can be very easy. In this tutorial, you will learn how to make a Windows Form Application draw different shapes using built-in methods of System.Drawing.Graphics

We will be creating a form with a PictureBox control and several buttons. These buttons will draw pre-defined shapes using all built-in methods. We will first design our form with one large Picture Box (size: 570, 300), and then add eight buttons to do the following: draw a line, ellipse, rectangle, arc, pie, polygon and bezier, and a button to clear the canvas.

Once we have these controls added to the form, we can begin adding the functionality. Double-click each button on the design view to create the click event handlers for them. First we will instantiate our graphics and pen, then draw a line:

private System.Drawing.Graphics g;
private System.Drawing.Pen pen1 = new System.Drawing.Pen(Color.Blue, 2F);

private void butLine_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawLine(pen1, 250, 50, 400, 200);
}

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

The usage of the majority of the methods are similar, so we assign our graphics variable to the CreateGraphics method on each button click and then use the graphics methods to create the shapes. The usage of the majority of the methods are similar in principle:

private void butEllipse_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawEllipse(pen1, 50, 50, 100, 150);
}

private void butRectangle_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawRectangle(pen1, 30, 30, 50, 60);
}

private void butArc_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawArc(pen1, 150, 100, 150, 200, 150, 160);
}

private void butPie_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawPie(pen1, 50, 50, 150, 150, 0, 170);
}

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

The Polygon is slightly different in that we are required to plot the points of each corner before we draw:

private void butPolygon_Click(object sender, EventArgs e) {
System.Drawing.Point[] p = new System.Drawing.Point[6];
p[0].X = 0;
p[0].Y = 0;
p[1].X = 53;
p[1].Y = 111;
p[2].X = 114;
p[2].Y = 86;
p[3].X = 34;
p[3].Y = 34;
p[4].X = 165;
p[4].Y = 7;
g = PictureBox1.CreateGraphics();
g.DrawPolygon(pen1, p);
}

The bezier is similar in that we plot the points as well, but we can do it in fewer steps than the polygon. The values in the bezier are the x and y coordinates of the control points.
We can simply code the clear button by calling the Refresh method of the PictureBox:

private void butBezier_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawBezier(pen1, 100, 200, 240, 250, 100, 200, 150, 30);
}

private void butClear_Click(object sender, EventArgs e)
{
PictureBox1.Refresh();
}

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

The entire code-behind is as follows:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WinForms_Drawing_cs
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private System.Drawing.Graphics g;
private System.Drawing.Pen pen1 = new System.Drawing.Pen(Color.Blue, 2F);

private void butLine_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawLine(pen1, 250, 50, 400, 200);
}

private void butEllipse_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawEllipse(pen1, 50, 50, 100, 150);
}

private void butRectangle_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawRectangle(pen1, 30, 30, 50, 60);
}

private void butArc_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawArc(pen1, 150, 100, 150, 200, 150, 160);
}

private void butPie_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawPie(pen1, 50, 50, 150, 150, 0, 170);
}

private void butPolygon_Click(object sender, EventArgs e)
{
System.Drawing.Point[] p = new System.Drawing.Point[6];
p[0].X = 0;
p[0].Y = 0;
p[1].X = 53;
p[1].Y = 111;
p[2].X = 114;
p[2].Y = 86;
p[3].X = 34;
p[3].Y = 34;
p[4].X = 165;
p[4].Y = 7;
g = PictureBox1.CreateGraphics();
g.DrawPolygon(pen1, p);
}

private void butBezier_Click(object sender, EventArgs e)
{
g = PictureBox1.CreateGraphics();
g.DrawBezier(pen1, 100, 200, 240, 250, 100, 200, 150, 30);
}

private void butClear_Click(object sender, EventArgs e)
{
PictureBox1.Refresh();
}
}
}

Now when we run this application, we will be able to click each button and see the different shapes appear on the form.

Looking for the VB.NET Version? Click Here!

Looking for more .NET Tutorials? Click Here!
Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!
 
123 ASP

411 ASP

Dot Net Freaks

Server Intellect