Graphics Programming in C#

Like Java, C# provides us with a rich set of classes, methods and events for developing applications with graphical capabilities. Since there is not much theory involved, we can straight away jump to an interesting example (Listing - 1), which prints "Welcome to C#" on a form. Relevant explanations are shown as comments:

Listing - 1

using System;
using System.Windows.Forms;
using System.Drawing;
public class Hello:Form
{
public Hello()
{
this.Paint += new PaintEventHandler(f1_paint);
}
private void f1_paint(object sender,PaintEventArgs e)
{
Graphics g = e.Graphics;
g.DrawString("Hello C#",new Font("Verdana",20),
new SolidBrush(Color.Tomato),40,40);
g.DrawRectangle(new Pen(Color.Pink,3),20,20,150,100);
}
public static void Main()
{
Application.Run(new Hello());
}
// End of class
}

The method DrawString() takes four arguments as shown in the above example. Every method in the Graphics class have to be accessed by creating an object of that class. You can easily update the above program to render other graphical shapes like Rectangle, Ellipse etc. All you have to do is to apply the relevant methods appropriately.

Changing the Unit of Measurement

As you may know the default Graphics unit is Pixel. By applying the PageUnit property, you can change the unit of measurement to Inch, Millimeter etc as shown below:

Graphics g = e.Graphics;
g.PageUnit = GraphicsUnit.Inch

Working with ColorDialog Box

If you have ever done Visual Basic Programming, you should be aware of predefined dialog boxes like ColorDialog, FontDialog etc. In C#, you or your user can choose a color by applying the ColorDialog class appropriately. Firstly you have to create an object of ColorDialog class as shown below:

ColorDialog cd = new ColorDialog();

Using the above object call ShowDialog() method to display the color dialog box. Finally invoke the Color property and apply it appropriately as shown in Listing - 2:

Listing - 2

using System;
using System.Drawing;
using System.Windows.Forms;
public class Clr:Form
{
Button b1 = new Button();
TextBox tb = new TextBox();
ColorDialog clg = new ColorDialog();
public Clr()
{
b1.Click += new EventHandler(b1_click);
b1.Text = "OK";
tb.Location = new Point(50,50);
this.Controls.Add(b1);
this.Controls.Add(tb);
}
public void b1_click(object sender, EventArgs e)
{
clg.ShowDialog();
tb.BackColor = clg.Color;
}
public static void Main()
{
Application.Run(new Clr());
}
// End of class
}

Here the background color of the form will change as you select a color from the dialog box.

Working with FontDialog Box

You can easily create a Font selection dialog box by following the same steps as in the previous listing and by affecting some minor changes. Listing - 3 shown below examines the usage of this useful tool:

Listing - 3

using System;
using System.Drawing;
using System.Windows.Forms;
public class Fonts:Form
{
Button b1 = new Button();
TextBox tb = new TextBox();
FontDialog flg = new FontDialog();
public Fonts()
{
b1.Click += new EventHandler(b1_click);
b1.Text = "OK";
tb.Location = new Point(50,50);
this.Controls.Add(b1);
this.Controls.Add(tb);
}
public void b1_click(object sender, EventArgs e)
{
clg.ShowDialog();
tb.FontName = flg.Font;
}
public static void Main()
{
Application.Run(new Fonts());
}
// End of class
}

Using System.Drawing.Drawing2D Namespace

The System.Drawing.Drawing2D 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 etc).

Also by making use of various Brush classes like SolidBrush, HatchStyleBrush etc you can modify the appearance of filled shapes. For instance, a rectangle can be filled with Vertical and Horizontal lines. As already examined a normal shape (Using DrawXXX() method) accepts a Pen class argument besides the floating point values while a filled shape (Using FillXXX() methods) accepts a Brush class argument.

Working with Pen objects

Listing - 4 given below examines the usage of various DrawXXX() methods by making use of some properties in the System.Drawing.Drawing2D namespace:

Listing - 4

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());
}
// End of class
}

Working with Brush objects

Brush class is used to fill the shapes with a given color, pattern or Image. There are four types of Brushes like SolidBrush (Default Brush), HatchStyleBrush, GradientBrush and TexturedBrush. The listings given below show the usage of each of these brushes by applying them in a FillXXX() method:

Using SolidBrush

Listing - 5

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());
}
// End of class
}

Using HatchBrush

Listing - 6

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());
}
// End of class
}

Using GradientBrush

Listing - 7

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());
}
// End of class
}

Working with Images

You can easily insert images by following the procedure given below

1) Create an object of Bitmap class as shown below:

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

2) Apply the above object in DrawImage() method

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

Conclusion

In this article, I've examined two core namespaces System.Drawing and System.Drawing.Drawing2D by showing the usage of various methods and properties with the help of numerous listings.