GDI+ Tutorial for Beginners

GDI+ is next evolution of GDI. Using GDI objects in earlier versions of Visual Studio was a pain. In Visual Studio .NET, Microsoft has taken care of most of the GDI problems and have made it easy to use.

GDI+ resides in System.Drawing.dll assembly. All GDI+ classes are reside in the System.Drawing, System.Text, System.Printing, System.Internal , System.Imaging, System.Drawing2D and System.Design namespaces.

The first class we must discuss is the Graphics class. After the Graphics class, I will discuss other useful GDI+ classes and structures such as Pen, Brush, and Rectangle. The final part of this tutorial are some examples in C#.

The Graphics Class

The Graphics class encapsulates GDI+ drawing surfaces. Before drawing any object (for example circle, or rectangle) we have to create a surface using Graphics class. Generally we use Paint event of a Form to get the reference of the graphics. Another way is to override OnPaint method.

Here is how you get a reference of the Graphics object:

private void form1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
}

OR:

protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
}

Once you have the Graphics reference, you can call any of this class's members to draw various objects. Here are some of Graphics class's methods:

DrawArc	Draws an arc from the specified ellipse.
DrawBezier	Draws a cubic bezier curve.
DrawBeziers	Draws a series of cubic Bezier curves.
DrawClosedCurve	Draws a closed curve defined by an array of points.
DrawCurve	Draws a curve defined by an array of points.
DrawEllipse	Draws an ellipse.
DrawImage	Draws an image.
DrawLine	Draws a line.
DrawPath	Draws the lines and curves defined by a GraphicsPath.
DrawPie	Draws the outline of a pie section.
DrawPolygon	Draws the outline of a polygon.
DrawRectangle	Draws the outline of a rectangle.
DrawString	Draws a string.
FillEllipse	Fills the interior of an ellipse defined by a bounding rectangle.
FillPath	Fills the interior of a path.
FillPie	Fills the interior of a pie section.
FillPolygon	Fills the interior of a polygon defined by an array of points.
FillRectangle	Fills the interior of a rectangle with a Brush.
FillRectangles	Fills the interiors of a series of rectangles with a Brush.
FillRegion	Fills the interior of a Region.

In .NET, GDI+ functionality resides in the System.Drawing.dll. Before you start using GDI+ classes, you must add reference to the System.Drawing.dll and import System.Drawing namespace. If you are using Visual Studio .NET for your development, you can add reference to the GDI+ library using following:

Creating this project is simple. Create a Windows application and add reference to the System.Drawing.dll using Project->Add Reference menu item. See Figure 1.

System.Drawing.dll

Figure 1. Adding reference to System.Drawing.dll

After that add these two lines.

using System.Drawing;
using System.Drawing.Drawing2D;

Note: If you create a Windows application using VS.NET, you only need write only one line.

using System.Drawing.Drawing2D;

After that add a Form_Paint event handler using the Properties Window. See Figure 2.

Form_Paint

Figure 2. Adding Form_Paint event handler.

Note: You can also add Form paint event handler manually described above.

Graphics Objects

After creating a Graphics object, you can use it draw lines, fill shapes, draw text and so on. The major objects are:

Brush	Used to fill enclosed surfaces with patterns,colors, or bitmaps.
Pen	Used to draw lines and polygons, including rectangles, arcs, and pies
Font	Used to describe the font to be used to render text
Color	Used to describe the color used to render a particular object. In GDI+ color can be alpha blended

The Pen Class

A pen draws a line of specified width and style. You always use Pen constructor to create a pen. The constructor initializes a new instance of the Pen class. You can initialize it with a color or brush.

Initializes a new instance of the Pen class with the specified color.

public Pen(Color);

Initializes a new instance of the Pen class with the specified Brush.

public Pen(Brush);

Initializes a new instance of the Pen class with the specified Brush and width.

public Pen(Brush, float);

Initializes a new instance of the Pen class with the specified Color and Width.

public Pen(Color, float);

Here is one example:

Pen pn = new Pen( Color.Blue );

Pen pn = new Pen( Color.Blue, 100 );

Some of its most commonly used properties are:

Alignment	Gets or sets the alignment for objects drawn with this Pen.
Brush	Gets or sets the Brush that determines attributes of this Pen.
Color	Gets or sets the color of this Pen.
Width	Gets or sets the width of this Pen.

The Color Structure

A Color structure represents an ARGB color. Here are ARGB properties of it:

A	Gets the alpha component value for this Color.
B	Gets the blue component value for this Color.
G	Gets the green component value for this Color.
R	Gets the red component value for this Color.

You can call the Color members. Each color name (say Blue) is a member of the Color structure. Here is how to use a Color structure:

Pen pn = new Pen( Color.Blue );

The Font Class

The Font class defines a particular format for text such as font type, size, and style attributes. You use font constructor to create a font.

Initializes a new instance of the Font class with the specified attributes.

public Font(string, float);

Initializes a new instance of the Font class from the specified existing Font and FontStyle.

public Font(Font, FontStyle);

Where FontStyle is an enumeration and here are its members:

Member Name	Description
Bold	Bold text.
Italic	Italic text.
Regular	Normal text.
Strikeout	Text with a line through the middle.
Underline	Underlined text.

Here is one example:

Graphics g ;
Font font = new Font("Times New Roman", 26);

Some of its most commonly used properties are:

Bold	Gets a value indicating whether this Font is bold.
FontFamily	Gets the FontFamily of this Font.
Height	Gets the height of this Font.
Italic	Gets a value indicating whether this Font is Italic.
Name	Gets the face name of this Font.
Size	Gets the size of this Font.
SizeInPoints	Gets the size, in points, of this Font.
Strikeout	Gets a value indicating whether this Font is strikeout (has a line through it).
Style	Gets style information for this Font.
Underline	Gets a value indicating whether this Font is underlined.
Unit	Gets the unit of measure for this Font.

The Brush Class

The Brush class is an abstract base class and cannot be instantiated. We always use its derived classes to instantiate a brush object, such as SolidBrush, TextureBrush, RectangleGradientBrush, and LinearGradientBrush.

Here is one example:

LinearGradientBrush lBrush = new LinearGradientBrush(rect, Color.Red, Color.Yellow, LinearGradientMode.BackwardDiagonal);

Brush brsh = new SolidBrush(Color.Red), 40, 40, 140, 140);

The SolidBrush class defines a brush made up of a single color. Brushes are used to fill graphics shapes such as rectangles, ellipses, pies, polygons, and paths.

The TextureBrush encapsulates a Brush that uses an fills the interior of a shape with an image.

The LinearGradiantBrush encapsulates both two-color gradients and custom multi-color gradients.

The Rectangle Structure

public Rectangle(Point, Size); or public Rectangle(int, int, int, int);

The Rectangle structure is used to draw a rectangle on WinForms. Besides its constructor, the Rectangle structure has following members:

Bottom	Gets the y-coordinate of the lower-right corner of the rectangular region defined by this Rectangle.
Height	Gets or sets the width of the rectangular region defined by this Rectangle.
IsEmpty	Tests whether this Rectangle has a Width or a Height of 0.
Left	Gets the x-coordinate of the upper-left corner of the rectangular region defined by this Rectangle.
Location	Gets or sets the coordinates of the upper-left corner of the rectangular region represented by this Rectangle.
Right	Gets the x-coordinate of the lower-right corner of the rectangular region defined by this Rectangle.
Size	Gets or sets the size of this Rectangle.
Top	Gets the y-coordinate of the upper-left corner of the rectangular region defined by this Rectangle.
Width	Gets or sets the width of the rectangular region defined by this Rectangle.
X	Gets or sets the x-coordinate of the upper-left corner of the rectangular region defined by this Rectangle.
Y	Gets or sets the y-coordinate of the upper-left corner of the rectangular region defined by this Rectangle.

Its constructor initializes a new instance of the Rectangle class. Here is the definition:

public Rectangle(Point, Size); or public Rectangle(int, int, int, int);

The Point Structure

This structure is similar to the POINT structure in C++. It represents an ordered pair of x and y coordinates that define a point in a two-dimensional plane. The member x represents the x coordinates and y represents the y coordinates of the plane.

Here is how to instantiate a point structure:

Point pt1 = new Point( 30, 30);
Point pt2 = new Point( 110, 100);

Some sample Examples:

Drawing a rectangle

You can override OnPaint event of your form to draw an rectangle. The LinearGradientBrush encapsulates a brush and linear gradient.

protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics ;
Rectangle rect = new Rectangle(50, 30, 100, 100);
LinearGradientBrush lBrush = new LinearGradientBrush(rect, Color.Red, Color.Yellow, LinearGradientMode.BackwardDiagonal);
g.FillRectangle(lBrush, rect);
}

The output of the above code looks like Figure 3.

LinearGradientBrush

Figure 3. Drawing a rectangle.

Drawing an Arc

DrawArc function draws an arc. This function takes four arguments.

First is the Pen. You create a pen by using the Pen class. The Pen constructor takes at least one argument, the color or the brush of the pen. Second argument width of the pen or brush is optional.

Pen pn = new Pen( Color.Blue );

Pen pn = new Pen( Color.Blue, 100 );

The second argument is a rectangle. You can create a rectangle by using Rectangle structure. The Rectangle constructor takes four int type arguments and they are left and right corners of the rectangle.

Rectangle rect = new Rectangle(50, 50, 200, 100);
protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics ;
Pen pn = new Pen( Color.Blue );
Rectangle rect = new Rectangle(50, 50, 200, 100);
g.DrawArc( pn, rect, 12, 84 );
}

The output looks like this:

draw arc in c#

Drawing a Line

DrawLine function of the Graphics class draws a line. It takes three parameters, a pen, and two Point class parameters, starting and ending points. Point class constructor takes x, y arguments.

protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics ;
Pen pn = new Pen( Color.Blue );
// Rectangle rect = new Rectangle(50, 50, 200, 100);
Point pt1 = new Point( 30, 30);
Point pt2 = new Point( 110, 100);
g.DrawLine( pn, pt1, pt2 );
}

The output looks like this:

Draw Line in C#

Drawing an Ellipse

An ellipse( or a circle) can be drawn by using DrawEllipse method. This method takes only two parameters, Pen and rectangle.

protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics ;
Pen pn = new Pen( Color.Blue, 100 );
Rectangle rect = new Rectangle(50, 50, 200, 100);
g.DrawEllipse( pn, rect );
}

The output looks like this:

draw Ellipse in c#

The FillPath

Drawing bazier curves is little more complex than other objects.

protected override void OnPaint(PaintEventArgs pe)
{
Graphics g = pe.Graphics;
g.FillRectangle(new SolidBrush(Color.White), ClientRectangle);
GraphicsPath path = new GraphicsPath(new Point[] {
new Point(40, 140), new Point(275, 200),
new Point(105, 225), new Point(190, 300),
new Point(50, 350), new Point(20, 180), },
new byte[] {
(byte)PathPointType.Start,
(byte)PathPointType.Bezier,
(byte)PathPointType.Bezier,
(byte)PathPointType.Bezier,
(byte)PathPointType.Line,
(byte)PathPointType.Line,
});
PathGradientBrush pgb = new PathGradientBrush(path);
pgb.SurroundColors = new Color[] { Color.Green,Color.Yellow,Color.Red, Color.Blue,
Color.Orange, Color.White, };
g.FillPath(pgb, path);
}

The output looks like this:

Draw bazier curves in C#

Drawing Text and Strings

You can override OnPaint event of your form to draw an rectangle. The LinearGradientBrush encapsulates a brush and linear gradient.

protected override void OnPaint(PaintEventArgs pe)
{
Font fnt = new Font("Verdana", 16);
Graphics g = pe.Graphics;
g.DrawString("GDI+ World", fnt, new SolidBrush(Color.Red), 14,10);
}

The output looks like this:

Draw Text in C#

References:

MSDN and .NET samples.

9 Comments

Join the conversation! Your thoughts help the community grow.

Former member9y ago
It does not look like first article, looks like written by a many years experienced. Thanks to share Mr. Mahesh.
Andy19y ago
Hi, I Have drawn some lines in my c# UI to show mapping between two sets of columns. When I do Alt+tab to another application or do minimize/maximise the lines disappear. Any idea why this happens and possible solution(s) ? Thanks a lot for any assistance Regards Andy
- Kirtan Patel17y ago
  Thank you Verymuch nice tutorial for GDI+ beginners like me
- Mike James17y agoedited
  I know this is a bit late but it might help another user with the same problem. The GDI+ isn't persistent and drawings will vanish if the window gets covered by another window. You have to code in the persistance - to find out how read Using the GDI+
shwetha belame19y ago
I am new to C#. I want to draw polygons whose vertices are -x,-y co-ordinates. I have used the draw polygon function and apparently I can draw polygons with +x,+y vertecies as I understand the 'form' supports ony those co-ordinates. Is there a code available in C# that plots polygon with any combination of x,y co-ordinates? Thanks in advance!
Khalid ELshafie19y ago
Hello, I wan to draw arc in deviceApplication project but there is no (DrawArc) Method in deviceApplication projects , i need help
Khalid ELshafie19y ago
Hello, I wan to draw arc in deviceApplication project but there is no (DrawArc) Method in deviceApplication projects , i need help
John Kindred20y agoedited
Hi, In the middle of last year, my son-in-law needed a custom program for his business, so I decided to teach myself enough SQL, Visual Studio and Crystal Reports, to enable me to help him. It was quite a struggle, maybe, because I am now 65 years of age, however, I had managed to complete a fairly complex and extensive application, when I realised it required the addition of a graphics capability to add the final touch. The graphics consist of simple line drawings, with dimensions, and some text, inside a rectangle. The drawing co-ordinates and text are supplied from SQL tables. In the past month I've managed to create a form, and print out one drawing satisfactorily, but am having problems trying to put multiple drawings and rectangles on one page. The reason for this, it that a page can consist of from one to six drawings, and a number of the drawings can be the same shape, but have different dimensions. My problem arises from trying to set the drawing co-ordinates from the edges of the rectangle. If I can do this, I dont have to have six diferent sets of offsets for each drawing, depending upon its placement on a page. I have used TranslateTransform to position a single rectangle and drawing anywhere on a page by changing just two co-ordinates in my code, but have had no success trying to correctly position multiple drawings on one page. I know this has been due to my lack of knowledge of graphics. My main aim is to keep my code as simple as possible. I would like to use the co-ordinates in my SQL tables, to draw the number of rectangles required, and position the drawing on any of the six rectangles on a page, without having to add calculations for the offsets for each rectangles' position. The one thing I cannot understand is whether I can create a rectangle, and use Regions to let me use the bounds of the rectangle from which to set my drawing co-ordinates. If this is feasible, can I set up six regions on a page, and place the rectangles in the regions, and the drawings in the rectangle in the manner I need.? On occasion there may also be multiple pages, but I believe I can handle that if I can get one page working correctly. Any assistance you could provide would be most appreciated. I apologise if the above is not clearly defined.
- Mahesh Chand20y ago
  When you are getting data of graphics shapes from database, you can simply create a Path object, add all shapes to it and draw the path. That will save you time to calculate the dimensions.