Fundamentals of GDI+

To draw something, you need a platform on which to draw and one or a few tools to draw with. The most common platform on which to draw is probably a piece of paper. Besides such a platform, you may need a pen or a brush that would show the evolution of the drawing work on the platform. Since a pen can have or use only one color, depending on your goal, one pen may not be sufficient, in which case you would end up with quite a few of them.

A device context is an ensemble of the platform you draw on and the tools you need to draw with. It also includes the dimensioning of the platform, the orientation and other variations of your drawing, the colors, and various other accessories that can complete your imagination.

When using a computer, you certainly cannot position tools on the table or desktop for use as needed. To help with drawing on the Windows operating system, Microsoft created the Graphical Device Interface, abbreviated as GDI. It is a set of classes, functions, variables, and constants that group all or most of everything you need to draw on an application. The GDI is provided as a library called Gdi.dll and is already installed on your computer.

GDI+ is the system used to perform drawing and other related graphics operations for the Microsoft Windows family of operating system. Its predecessor was the Graphical Device Interface (GDI), which has therefore been replaced, namely with the new operating systems such as Windows XP and Windows Server 2003. The + in GDI+ indicates that it provides a significant improvement to GDI and adds new features that were not available in GDI and were therefore difficult to produce. GDI+ allows you to create device-independent applications without worrying about the hardware on which the application would run.

GDI+ is inherently installed in Microsoft Windows XP and Windows Server 2003. To use it on previous operating systems, it must be explicitly distributed. GDI+ provides its functionality through three fronts:

• Vector Graphics
  

  This is the area that consists of drawing and manipulating geometric-based and related figures including lines, combinations of lines, round and quadrilateral shapes. These are treated as sets of points on a screen or other device. To perform these types of operations, the GDI+ system provides various classes that perform different assignments. For example, one class can be in charge of creating or preparing tools used to draw. Another class can be used to perform the actual drawing, using the provided tools.

• Imaging
  

  While it may appear easy to create vector graphics that are made of easily recognizable colors, advanced pictures present a challenge to display or draw them on a device. For these reasons, imaging is the area used to deal with such complex operations.

• Typography
   

  Typography consists of creating, manipulating or making fonts available to an application.

In GDI, to draw, you had to obtain a handle to the device context. This was done by declaring a variable or a pointer to HDC then calling a function such as BeginPaint() to initialize the device context. You also had to create the tools needed to draw. For example, you had to create a pen and/or a brush. Once the tools were ready, you had to select them into the device context to make them available. After drawing, it was suggested that you release the device context.

In GDI+, to draw, you use a class called Graphics. This class is equipped with various methods used to perform its drawing assignments. Other classes work with it to complement it with the necessary operations. Based on this, before drawing, you must first obtain a Graphics variable and there are various ways you can get it:

• If you are using any event of your object, you can declare a variable of type Graphics. Here is an example:
   

  private void button1_Click(object sender, System.EventArgs e) { Graphics graph; }

• If you are using the Paint event of a window, it provides a readily available Graphics pointer. The event is structured as follows:
   

  private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { e.Graphics . . . }

   
  In this  case, the e argument, which is of a PaintEventArgs type, is equipped with a Graphics member variable you can use as you see fit

• You can call the CreateGraphics() method of the control on which you are drawing. This is possible because the Control class, which is the ancestor of all Windows controls of the .Net Framework, provides the CreateGraphics() method to its children. Calling the CreateGraphics() method can be done as follows:
   

  private void button1_Click(object sender, System.EventArgs e) { Graphics graph = this.CreateGraphics(); }

The color is one the most fundamental objects that enhances the aesthetic appearance of an object. The color is a non-spatial object that is added to an object to modify some of its visual aspects. To support colors, the GDI+ library provides the Color structure.

A color is created as a combination of four 8-bit values. The first value is referred to as alpha. The second is called red. The third is called green. The fourth is called blue:

Converted to decimal, each one of these numbers would produce:

2⁷ + 2⁶ + 2⁵ + 2⁴ + 2³ + 2² + 2¹ + 2⁰ 

= 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1

= 255

Therefore, each number can have a value that ranges from 0 to 255 in the decimal system. The alpha section is reserved for the operating system. The other three numbers are combined to produce a single value as follows:

Converted to decimal, this number has a value of 255 * 255 * 255 = 16581375. This means that we can have approximately 16 million colors available. The question that comes to mind is how we use these colors, to produce what effect.

You computer monitor has a surface that resembles a series of tinny horizontal and vertical lines. The intersection of a one horizontal line and a vertical line is called a pixel. This pixel holds, carries, or displays one color.

As the pixels close to each other have different colors, the effect is a wonderful distortion that creates an aesthetic picture. It is by changing the colors of pixels that you produce the effect of color variances seen on pictures and other graphics.

To make color selection easier, the Color structure is equipped with various properties that each represents a name for a color. All the popular names of colors are recognized. These include Red, Green, Blue, Black, White, Yellow, Fuchsia, Silver, Gray, Brown, Khaki, LightBlue. There are many others that are not necessarily popular. These properties are static. Therefore, to use any of these colors, call the Color structure followed by a period and the desired color. Here is an example:

private void button1_Click(object sender, System.EventArgs e)
{
	this.BackColor = Color.Turquoise;
}

If none of the pre-defined colors suits you, you can define your own as a combination of red, green, and blue value. Based on this, to create a color, you can declare a variable of type Color. To specify the characters of the color, the Color structure provides the FromArgb() method overloaded in four versions as follows:

public static Color FromArgb(int argb);
public static Color FromArgb(int alpha, Color baseColor);
public static Color FromArgb(int red, int green, int blue);
public static Color FromArgb(int alpha, int red, int green, int blue);

The third version, which is the most used allows you to specify three value that each ranges from 0 to 255. Here is an example:

private void button1_Click(object sender, System.EventArgs e)
{
	this.BackColor = Color.FromArgb(26, 69, 174);
}

This would produce:

Whether a color was initialized with one of the Color pre-defined color properties or using the FromArgb() methods, if you want to retrieve the red, green, and blue values of a color, you can use the R, the G, or the B properties to extract the value of each. Each one of these properties is of a byte type. Alternatively, you can call the Color.ToArgb() method. Its syntax is:

public int ToArgb();

This method returns an integer.

While the Graphics class provides the platform to draw on, you need a tool to draw with. The most basic tool you can use is the pen. The GDI+ library provides the pen through the Pen class. To obtain a pen, you can declare a variable of type Pen. The most basic piece of information you must specify about a pen is its color. To do this, you can use the following constructor: 

public Pen(Color color);

Here is an example:

private void button1_Click(object sender, System.EventArgs e)
{
	Color clrBlue = Color.Blue;
	Pen penRed = new Pen(clrBlue);
	Graphics graph = this.CreateGraphics();
}

The Pen class provides more details about a pen than that. For now, we can use a pen as simple as this one.

As mentioned above, before drawing, make sure you have a Graphics object, which depends on your approach to drawing. To actually perform the drawing, the Graphics class provides various methods adapted from different shapes. Each method used to draw something has a name that starts with Draw... Also, each method that is used to draw a known shape requires a Pen argument. Therefore, when drawing, your first decision will be based on the shape or type of figure you want to draw. Probably the second decision will consist on specifying the color of the border.

Two other pieces of information are particularly important with regards to any figure or shape you will need to draw: the location and dimensions.

To keep track of the various drawings, the object on which you draw uses a coordinate system that has its origin (0, 0) on its top-left corner. If you are drawing on a form, this origin is position just under the title bar to the left:

How you specify the values of the starting point of a shape or figure depends on the shape.

or now, we can use a pen as simple as this one.

The main object on which you will perform most drawings is called a graphic. In most cases, this object is not readily available when you need: you must request it from the object on which you want to draw or you must create it.

In GDI+, a graphic object is based on a class called Graphics. Therefore, before drawing, you should obtain a graphic object. Fortunately, every Windows control, that is, every class based on the Control class automatically inherits a method called CreateGraphics, which gives you access to the graphic part of a control. The syntax of the Control.Graphics() method is:

public Graphics CreateGraphics();

As you can see, the CreateGraphics() method returns the Graphics object of the variable you call it from. Here is an example of getting the Graphics object of a form:

private void button1_Click(object sender, System.EventArgs e)
{
	Graphics graph = this.CreateGraphics();
}

Another technique you can use to get the Graphics object of a control is to call the Control.FromHwnd() static method. Its syntax is:

public static Graphics FromHwnd(IntPtr hwnd);

Remember that this method is static. The argument passed to it must be a handle to the object whose Graphics object you want to access. We saw already that every Windows control has a handle called Handle. Here is an example of using it to get the Graphics part of a form:

private void button1_Click(object sender, System.EventArgs e)
{
	Graphics graph = Graphics.FromHwnd(this.Handle);
}

If you are using the Paint event of a window, it provides a readily available Graphics object from its PaintEventArgs argument. You can access the Graphics object as follows:
 

private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
	e.Graphics . . .
}