View Single Post
 
Old 02-24-2004, 04:27 PM
MikeJ's Avatar
MikeJ MikeJ is offline
Retread

Retired Moderator
* Expert *
 
Join Date: Sep 2002
Location: Austin, Texas
Posts: 6,747
Default GDI+ - What's That?

GDI/GDI+ in Visual Basic .Net - Part 1

Introduction
Well, if you are like me, you’ve wondered what the heck is GDI and what does it have to do with me? Personally, I’ve spent more than my fair share of time staring at MSDN going huh? Well, hopefully this tutorial will explain the basics of GDI, and how to use it in your VB.Net applications.

Some basic assumptions before starting this tutorial:
  • Basic knowledge of VB.Net syntax
  • Some knowledge of graphics in VB6 (as in enough to know what a line/shape control was) because I will be making some comparisons with them.
  • An open mind to .Net concepts

Well, I guess the first question is What Is GDI+? GDI+ stands for Graphic Device Interface. This is fancy-talk for a way to draw directly to forms or windows. (For the sake of this tutorial, we will be working with forms.)

Now how is GDI+ in .Net different than GDI in VB6? In .Net, it is much, much easier to work with GDI+. In VB6, GDI was a pain. Just looking at GDI tutorials can tell you this. I personally shied away from GDI in VB6, just out of fear. But with the advent of .Net, we programmers have a much easier way to deal with GDI, in the form of GDI+. I also should add that GDI+ is only available natively in .Net, as it is the System.Drawing.dll, but if you haven’t made the upgrade, you can use OnErr0r’s class wrappers, which you can find here and here. Also, you can also use GDI in .Net as well as GDI+. (But why would you want to? ).

The Namespaces Involved
Well, you can’t use GDI+ without declaring the namespaces. So, at the very top of the code window, you need to include the namespaces that you will need. They are:
  • System.Drawing – This contains the basic GDI classes. This part of the tutorial will focus on this.
  • System.Drawing.Design – This class extends drawing functionality and adds classes for tailoring toolboxes/editors.
  • System.Drawing.Drawing2D - This namespace consists of classes and enumerations for advanced 2D and vector graphics functionality.
  • System.Drawing.Imaging - This namespace provides advanced GDI+ imaging functionality. This is where metafiles live, and encoding for practically any file types.
  • System.Drawing.Printing – As the name of the namespace says, this deals with printing.
  • System.Drawing.Text – Since most of the text functionality is contained System.Drawing, this one stumped me. As far as I can figure out, this is mostly for collection of fonts.

Making the Graphics Object
Now, we’ve decided which namespaces we need, but now what? We need to get us a graphics object for us to paint on. For this, we will use the OnPaint event.
Code:
Imports System.Drawing Public Class Form1 Inherits System.Windows.Forms.Form 'The windows generated form code region is here Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) 'This is the declare of the Graphics object Dim g As Graphics = e.Graphics End Sub End Class
Now we have our graphics object! We can do any thing we want such as use fonts, make pens/lines/paths/polygons, draw images and ellipses and so on! Here are some of the more common methods that we can use (don’t worry, most are really apparent):
Code:
DrawArc
DrawCurve
DrawEllipse 
DrawImage 
DrawLine 
DrawPath 
DrawPie 
DrawPolygon 
DrawRectangle 
DrawString 
FillEllipse 
FillPath 
FillPie 
FillPolygon 
FillRectangle 
FillRectangles 
FillRegion
Pens, DrawLine, Rectangles, Brushes, DrawRectangle, and FillRectangle
What is a Pen? A pen draws a line of specified width and style. I declare them as separate variables, but they can also be declared inside a line of code.
Code:
Dim pPen As Pen = New Pen(Color.Black, 4)
The first parameter is the color, you can change it by typing Color. The intellisense will pick up, and you will see a combo-box listing all the colors that you have available. The other thing you will probably use here is Color.FromARGB. This function will let you take an RGB value and use it as your color. The second parameter is the width of the pen. Simple enough, isn’t it?

The DrawLine method is as straightforward as it appears, but is really easy to use. Since .Net doesn’t include a line control as VB6 did, we have to draw our lines the same way. MSDN even recommends that we use a Label control to achieve the same effect (full article). However, this will only work with horizontal and vertical lines, and really isn’t a good method to start with. Well, here’s how to use it (I’m using the basic code from above, but only will include the OnPaint event:
Code:
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) 'This is the declare of the Graphics object Dim g As Graphics = e.Graphics 'Declare the pen Dim pPen As Pen = New Pen(Color.Maroon, 4) 'Let's draw us a line g.DrawLine(pPen, 10, 10, 110, 110) End Sub
The parameters here are again pretty explanatory. The first one is referencing our pen that we declared, while the last four are just the positions of the points of the line. They are X1, X2, Y1, Y2 respectively.

What is a Rectangle? In VB6 we had RECT, and it’s not that different in .Net. A Rectangle can be used for almost all of the System.Drawing methods, and I’ll just use Draw/Fill Rectangle in this tutorial. To declare a Rectangle:
Code:
'Declare the Rectangle, the parameters are X, Y, Width, Height Dim rRect As Rectangle = New Rectangle(150, 150, 100, 100)
Notice that the declare for it is similar to the declare for a pen; we have to declare it, then use the New sub to make it an object that we can use. Now that we have our rectangle what do we do? We can use the DrawRectangle to draw the outline of the rectangle.
Code:
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) 'Declare the Rectangle Dim rRect As Rectangle = New Rectangle(150, 150, 100, 100) 'Let's draw us a rectangle! g.DrawRectangle(pPen, rRect) End Sub
We now have the outline of the rectangle. Our declare includes the pen (which is the color maroon), and the rectangle that we have just declared. You don’t need to declare the rectangle like this, but in my opinion, it just makes it easier to read.

What happens though, if we want to draw a filled rectangle? We can use the FillRectangle.
Code:
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) 'Let's draw us a rectangle! g.DrawRectangle(pPen, rRect) 'Fill it! g.FillRectangle(New SolidBrush(Color.Blue), rRect) End Sub
Woah! What’s this SolidBrush? If you read the parameter information provided by Intellisense/MSDN, you will see that we need a Brush. Well, what are brushes? Brushes are what we use to make fills. The ones we can get just from System.Drawing are SolidBrush and TextureBrush. The SolidBrush does what it says, it makes a solid brush of the color specified. The TextureBrush, however, uses a bitmap. Well now, it’s almost covered up our rectangle’s outline! What should we do to fix it? Just flip them, like so:
Code:
'Fill it! g.FillRectangle(New SolidBrush(Color.Blue), rRect) 'Let's draw us a rectangle! g.DrawRectangle(pPen, rRect)
MSDN references for this section:
DrawString and the Font Class
Well, we can draw a string, but what do we do without fonts? This is where the Font Class comes into place. So:
Code:
'Declare the font Dim fFont As Font = New Font("Verdana", 10, FontStyle.Bold)
We now have a font called ‘fFont’ that is Verdana, size 10pt, and bold. We can use the DrawString method now, to make a nice little caption for our form:
Code:
'Draw some text g.DrawString("Hello World! I'm GDI!", fFont, New SolidBrush(Color.Orange), 30, 10)
MSDN references for this section:
Attached Files
File Type: zip GDIPlus_in_DotNet.zip (6.6 KB, 210 views)
__________________
{ Lex Fori } { Locus Classicus } { Rutilus Scrinium }
Osculare pultem meam!

Last edited by PlenoJure; 02-24-2004 at 04:42 PM. Reason: Edit per request
Reply With Quote