RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Using GDI+ in ASP.NET Web Applications, Part I

GDI+ is generally considered a Windows technology. However, some of the new GDI+ features make this technology an excellent choice even for Web applications, enabling developers to generate images, graphs, dynamic buttons, banners, and much more on-the-fly.


DI+ is a technology that developers generally associate with Windows Forms applications because they use it to draw anything on the screen from custom controls to diagrams. However, you can also use GDI+ in ASP.NET Web applications whenever you want to serve up dynamic images. You can use GDI+ to create dynamic banners, photo albums, graphs, diagrams, and more.

GDI+ is the .NET Framework wrapper assembly for Microsoft's GDI (Graphics Device Interface) technology. In simple terms, you use GDI+ to draw on a drawing surface such as a Window, Control (technically just a window), or Bitmap, among others. Drawing with GDI+ is rather straightforward. You just need a Graphics object that links you to a drawing surface and off you go.

GDI+ uses a Graphics object as the main means to draw on a surface. The Graphics object has methods including DrawLine() or DrawArc() to draw line-based graphics, and FillEllipse() and FillPath() to fill areas with color. If you've used GDI (without the "+") in the past, this is a little different. In conventional GDI, drawing and filling happens in one step, while GDI+ separates the two tasks into individual method calls. In GDI+ you draw with Pens. A Pen is an object that exposes properties such as line color, line thickness, drawing patterns, and end-points such as arrows. You can create your own pens, but for most scenarios the .NET Framework provides all the pens you will ever need. If you want to fill an area, you use a Brush. Brushes are similar to Pens in the sense that they define colors and patterns for the area to fill. However, Brushes come in much more complex configurations. For instance, there are gradient brushes, texture brushes, and brushes based on bitmap images.

You use the Graphics object to draw text strings and you use it to draw and manipulate images. And much, much more. I won't use this article to introduce the intricacies of GDI+. I will simply discuss the functionality in my examples. If you're new to GDI+, I encourage you to read my article, "The Basics of GDI+" in this issue. Assuming that you understand the basics, this article will show you how to apply GDI+ functionality to Web applications.

Let's explore some basic GDI+ features using a Windows application. To follow along with my example, create a new C# Windows Form application in Visual Studio .NET.

When you create a new C# Windows Form application, you start out with a default Form class. As I mentioned above, GDI+ operates through a Graphics object, which the .NET Framework defines in the System.Drawing namespace. This is the namespace that represents GDI+. When you create a Windows Forms application you don't have to worry about using that namespace because all Windows Forms use GDI+ and the namespace is therefore imported by default.

So how do you get access to a Graphics object that allows you to draw on the form? Well, you can create an event handler for the Paint event, which your application will raise every time the operating system asks the form to re-draw itself. The event arguments that you pass to this event handler have a reference to the form's Graphics object. The following sample code uses the Paint event to draw an ellipse on the form:

   private void Form1_Paint(object sender, 
   System.Windows.Forms.PaintEventArgs e)
      Graphics g = e.Graphics;
      g.DrawEllipse(Pens.Red,      10,10,150,100);

In this code I simply call the DrawEllipse() method and pass a red pen as well as the position and the size of the ellipse. The red pen is a default pen defined in the .NET Framework. As you can imagine, the result is not spectacular (Figure 1).

Thanks for your registration, follow us on our social networks to keep up-to-date