Graphics Programming Using C# - Part 2

In this second of two parts, you'll discover the workings of System.Drawing.Drawing2D namespace with the help of examples. In the end, you will learn about how to work with Images by using C#.

Creating Shapes with Dashes, Dots....

You can render shapes with lines, dots, and so forth in all programming languages. You can add these functionalities easily by using Visual Basic 6.0. In .NET, you have to make use of the System.Drawing.Drawing2D namespace to achieve this functionality. This namespace provides advanced techniques for manipulating Pen and Brush objects. For example, you can change the look and feel of lines by applying the values of DashStyle Enumerator like Dash, DashDot, DashDotDot, and so on. We will discuss Brush objects later in this part.

Listing 1 examines the working of Pen objects using various DrawXXX() methods of the System.Drawing.Drawing2D namespace.

Listing 1

using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;

public class Drawgra:Form  {

  public Drawgra()  {
   this.Text = "Illustrating DrawXXX() methods";
   this.Size = new Size(450,400);
   this.Paint += new PaintEventHandler(Draw_Graphics);
  }

  public void Draw_Graphics(object sender,PaintEventArgs e) {
   Graphics g = e.Graphics;
   Pen penline = new Pen(Color.Red,5);
   Pen penellipse = new Pen(Color.Blue,5);
   Pen penpie = new Pen(Color.Tomato,3);
   Pen penpolygon = new Pen(Color.Maroon,4);

   /*DashStyle Enumeration values are Dash,
     DashDot, DashDotDot, Dot, Solid, etc*/

   penline.DashStyle = DashStyle.Dash;
   g.DrawLine(penline,50,50,100,200);

   //Draws an Ellipse
   penellipse.DashStyle = DashStyle.DashDotDot;
   g.DrawEllipse(penellipse,15,15,50,50);

   //Draws a Pie
   penpie.DashStyle = DashStyle.Dot;
   g.DrawPie(penpie,90,80,140,40,120,100);

   //Draws a Polygon
   g.DrawPolygon(penpolygon,new Point[]{
   new Point(30,140),
   new Point(270,250),
   new Point(110,240),
   new Point(200,170),
   new Point(70,350),
   new Point(50,200)});
  }

  public static void Main()  {
   Application.Run(new Drawgra());
  }

}

From the preceding code, you can see that four Pen objects are created with different colors and thicknesses. The code is reproduced here for explanation purposes:

Pen penline    = new Pen(Color.Red,5);
Pen penellipse = new Pen(Color.Blue,5);
Pen penpie     = new Pen(Color.Tomato,3);

The values of the DashStyle enumerator are applied to each of these objects as in the following code fragment:

penline.DashStyle = DashStyle.Dash;

Finally, these objects are called as an argument to various DrawXXX() methods as shown below:

g.DrawLine(penline,50,50,100,200);
g.DrawPie(penpie,90,80,140,40,120,100);

Figure 1 displays the output upon execution of the preceding code. You can see from the preceding code how complex the code for rendering a polygon is. It would be easy for you if you understood the concept and logic behind the above aspects.

Figure 1  Output

Filling the Shapes with Patterns and Colors

The Brush class of the System.Drawing.Drawing2D namespace provides functionalities for creating shapes by filling the inside of them with colors and patterns. By making use of various Brush classes such as Solid Brush, Hatch Style Brush, Gradient Brush and Textured Brush, you can modify the appearance of filled shapes.

For instance, a rectangle can be filled with vertical and horizontal lines by using its FillXXX() methods. Like this, you have to apply the relevant methods for creating various shapes.

Working with Brush Objects

As already examined, the brush class is used to fill the shapes with a given color, pattern, and image. Listing 2 examines the usage of the Solid Brush by applying its object in FillRectangle() method.

Listing 2

using System;
using System.Windows.Forms;
using System.Drawing;

public class Solidbru:Form  {

  public Solidbru()  {
   this.Text = "Using Solid Brushes";
   this.Paint += new PaintEventHandler(Fill_Graph);
  }

  public void Fill_Graph(object sender,PaintEventArgs e)
  {
   Graphics g = e.Graphics;

   //Creates a SolidBrush and fills the rectangle

   SolidBrush sb = new SolidBrush(Color.Pink);
   g.FillRectangle(sb,50,50,150,150);
  }

  public static void Main() {
   Application.Run(new Solidbru());
  }

}

The preceding code creates a Solid Brush object named sb:

SolidBrush sb = new SolidBrush(Color.Pink);

This object is then applied to the FillRectangle() method of the Graphics class, which ultimately fills the rectangle with a Pink color:

g.FillRectangle(sb,50,50,150,150);

Having seen the working of the Solid Brush, let's see the usage of another Brush class called Hatch Brush, which fills the shapes with patterns such as DiagonalCross, horizontal and vertical lines, and so forth. Listing 3 examines the usage of the Brush class:

Listing 3

using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;

public class Hatchbru:Form  {

  public Hatchbru()  {
   this.Text = "Using Solid Brushes";
   this.Paint += new PaintEventHandler(Fill_Graph);
  }

  public void Fill_Graph(object sender,PaintEventArgs e)
  {
   Graphics g = e.Graphics;

   //Creates a Hatch Style,Brush and fills the rectangle
   /*Various HatchStyle values are
     DiagonalCross,ForwardDiagonal,
     Horizontal, Vertical, Solid etc. */

   HatchStyle hs = HatchStyle.Cross;
   HatchBrush sb = new 
   HatchBrush(hs,Color.Blue,Color.Red);
   g.FillRectangle(sb,50,50,150,150);
  }

  public static void Main() {
   Application.Run(new Hatchbru());
  }
}

From Listing 3, you can see that the first of the values of the HatchStyle enumerator is applied by using the HatchStyle class. Then this object is called to create an object of Hatch Brush class. Finally, this object is applied to the FillRectangle() method as shown above. The output is shown in Figure 2.

Figure 2  Output

Using Advanced Brushes

In this session, we will examine the Linear Gradient Brush and Textured Brush classes.

Using LinearGradientBrush

With the help of the Linear Gradient Brush class, you can render advanced shapes as shown in Listing 4:

Listing 4

using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;

  public class Gradientbru:Form  {

   public Gradientbru()  {
   this.Text = "Using Solid Brushes";
   this.Paint += new PaintEventHandler(Fill_Graph);
  }

  public void Fill_Graph(object sender,PaintEventArgs e)
  {
   Graphics g = e.Graphics;

   //Creates a Gradient Mode,Brush and fills the rectangle
   /*Various GradientMode values are ForwardDiagonal,
   BackwardDiagonal, Horizontal, Vertical etc. */

   Rectangle r = new Rectangle(3,3,10,10);
   LinearGradientMode lgm =
   LinearGradientMode.ForwardDiagonal;
   LinearGradientBrush lgb = new 
   LinearGradientBrush(r,Color.Blue,Color.Red,lgm);
   g.FillRectangle(lgb,50,50,150,150);
  }

  public static void Main() {
   Application.Run(new Gradientbru());
  }
}

Upon execution, you can view a display as shown in Figure 3.

Figure 3  Output

Using TexturedBrush

Listing 5 examines the usage of Textured Brush. With the help of this Brush class, you can render images instead of patterns as shown below:

Listing 5

using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;

public class Texturedbru:Form  {
  Brush bgbrush;

  public Texturedbru()  {
   Image bgimage = new Bitmap("dotnet.gif");
   bgbrush = new TextureBrush(bgimage);
   this.Paint+=new PaintEventHandler(Text_bru);
  }

  public void Text_bru(object sender,PaintEventArgs e) {
   Graphics g = e.Graphics;
   g.FillEllipse(bgbrush,50,50,500,300);
  }

  public static void Main() {
   Application.Run(new Texturedbru());
  }
}

First, an image named dotnet.gif is referred in the object bgimage:

Image bgimage = new Bitmap("dotnet.gif");

Make sure to change the image name if you are choosing your own image.

This object is passed on to create a TextureBrush as shown below:

bgbrush = new TextureBrush(bgimage);

Finally, the object created from it is passed as an argument to the FillEllipse() method:

g.FillEllipse(bgbrush,50,50,500,300);

Figure 4 displays the final output as a result of executing the preceding code.

Figure 4  Output

Working with Images

You can easily render images on a WinForm by using the DrawImage() method of the Graphics class. First, you have to create an object from the image you are going to use as shown below:

Image img = new Bitmap("Image1.bmp");

Finally, you have to apply the above object as shown in the following code fragment:

g.DrawImage(img,20,20,100,90);

Summary

With the help of an example, you have now learned about the application of Pen objects in various DrawXXX() methods. We also looked into a detailed explanation of the code. You also examined the working of two Brush classes—Solid Brush and Hatch Brush. Further, the working of Linear Gradient Brush and Textured Brush were explained in detail. We have also seen the application of Images in C#.

Code Download

You can download the entire code used in this part of the article by clicking here.

About the Author

Anand Narayanaswamy works as a freelance Web developer and technical writer. He also runs and maintains learnxpress.com, and provides free technical support to users worldwide. He can be reached at anand@learnxpress.com.

# # #