In Focus

Graphics Programming In C#

The new improved version of GDI is called GDI+. The .NET framework provides a rich set of classes, methods and events for developing applications with graphical capabilities.

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
  1. using System;  
  2. using System.Windows.Forms;  
  3. using System.Drawing;  
  4. public class Hello: Form {  
  5.     public Hello() {  
  6.         this.Paint += new PaintEventHandler(f1_paint);  
  7.     }  
  8.     private void f1_paint(object sender, PaintEventArgs e) {  
  9.         Graphics g = e.Graphics;  
  10.         g.DrawString("Hello C#"new Font("Verdana", 20), new SolidBrush(Color.Tomato), 40, 40);  
  11.         g.DrawRectangle(new Pen(Color.Pink, 3), 20, 20, 150, 100);  
  12.     }  
  13.     public static void Main() {  
  14.         Application.Run(new Hello());  
  15.     }  
  16.     // End of class  
  17. }  
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,
  1. Graphics g = e.Graphics;  
  2. 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,
  1. 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
  1. using System;  
  2. using System.Drawing;  
  3. using System.Windows.Forms;  
  4. public class Clr: Form {  
  5.     Button b1 = new Button();  
  6.     TextBox tb = new TextBox();  
  7.     ColorDialog clg = new ColorDialog();  
  8.     public Clr() {  
  9.         b1.Click += new EventHandler(b1_click);  
  10.         b1.Text = "OK";  
  11.         tb.Location = new Point(50, 50);  
  12.         this.Controls.Add(b1);  
  13.         this.Controls.Add(tb);  
  14.     }  
  15.     public void b1_click(object sender, EventArgs e) {  
  16.         clg.ShowDialog();  
  17.         tb.BackColor = clg.Color;  
  18.     }  
  19.     public static void Main() {  
  20.         Application.Run(new Clr());  
  21.     }  
  22.     // 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
  1. using System;  
  2. using System.Drawing;  
  3. using System.Windows.Forms;  
  4. public class Fonts: Form {  
  5.     Button b1 = new Button();  
  6.     TextBox tb = new TextBox();  
  7.     FontDialog flg = new FontDialog();  
  8.     public Fonts() {  
  9.         b1.Click += new EventHandler(b1_click);  
  10.         b1.Text = "OK";  
  11.         tb.Location = new Point(50, 50);  
  12.         this.Controls.Add(b1);  
  13.         this.Controls.Add(tb);  
  14.     }  
  15.     public void b1_click(object sender, EventArgs e) {  
  16.         clg.ShowDialog();  
  17.         tb.FontName = flg.Font;  
  18.     }  
  19.     public static void Main() {  
  20.         Application.Run(new Fonts());  
  21.     }  
  22.     // End of class  
  23. }  

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
  1. using System;  
  2. using System.Windows.Forms;  
  3. using System.Drawing;  
  4. using System.Drawing.Drawing2D;  
  5. public class Drawgra: Form {  
  6.     public Drawgra() {  
  7.         this.Text = "Illustrating DrawXXX() methods";  
  8.         this.Size = new Size(450, 400);  
  9.         this.Paint += new PaintEventHandler(Draw_Graphics);  
  10.     }  
  11.     public void Draw_Graphics(object sender, PaintEventArgs e) {  
  12.         Graphics g = e.Graphics;  
  13.         Pen penline = new Pen(Color.Red, 5);  
  14.         Pen penellipse = new Pen(Color.Blue, 5);  
  15.         Pen penpie = new Pen(Color.Tomato, 3);  
  16.         Pen penpolygon = new Pen(Color.Maroon, 4);  
  17.         /*DashStyle Enumeration values are Dash, 
  18.         DashDot,DashDotDot,Dot,Solid etc*/  
  19.         penline.DashStyle = DashStyle.Dash;  
  20.         g.DrawLine(penline, 50, 50, 100, 200);  
  21.         //Draws an Ellipse  
  22.         penellipse.DashStyle = DashStyle.DashDotDot;  
  23.         g.DrawEllipse(penellipse, 15, 15, 50, 50);  
  24.         //Draws a Pie  
  25.         penpie.DashStyle = DashStyle.Dot;  
  26.         g.DrawPie(penpie, 90, 80, 140, 40, 120, 100);  
  27.         //Draws a Polygon  
  28.         g.DrawPolygon(penpolygon, new Point[] {  
  29.             new Point(30, 140),  
  30.                 new Point(270, 250),  
  31.                 new Point(110, 240),  
  32.                 new Point(200, 170),  
  33.                 new Point(70, 350),  
  34.                 new Point(50, 200)  
  35.         });  
  36.     }  
  37.     public static void Main() {  
  38.         Application.Run(new Drawgra());  
  39.     }  
  40.     // End of class  
  41. }  

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
  1. using System;  
  2. using System.Windows.Forms;  
  3. using System.Drawing;  
  4. public class Solidbru: Form {  
  5.     public Solidbru() {  
  6.         this.Text = "Using Solid Brushes";  
  7.         this.Paint += new PaintEventHandler(Fill_Graph);  
  8.     }  
  9.     public void Fill_Graph(object sender, PaintEventArgs e) {  
  10.         Graphics g = e.Graphics;  
  11.         //Creates a SolidBrush and fills the rectangle  
  12.         SolidBrush sb = new SolidBrush(Color.Pink);  
  13.         g.FillRectangle(sb, 50, 50, 150, 150);  
  14.     }  
  15.     public static void Main() {  
  16.         Application.Run(new Solidbru());  
  17.     }  
  18.     // End of class  
  19. }  

Using HatchBrush

 
Listing 6
  1. using System;  
  2. using System.Windows.Forms;  
  3. using System.Drawing;  
  4. using System.Drawing.Drawing2D;  
  5. public class Hatchbru: Form {  
  6.     public Hatchbru() {  
  7.         this.Text = "Using Solid Brushes";  
  8.         this.Paint += new PaintEventHandler(Fill_Graph);  
  9.     }  
  10.     public void Fill_Graph(object sender, PaintEventArgs e) {  
  11.         Graphics g = e.Graphics;  
  12.         //Creates a Hatch Style,Brush and fills the rectangle  
  13.         /*Various HatchStyle values are DiagonalCross,ForwardDiagonal, 
  14.         Horizontal, Vertical, Solid etc. */  
  15.         HatchStyle hs = HatchStyle.Cross;  
  16.         HatchBrush sb = new HatchBrush(hs, Color.Blue, Color.Red);  
  17.         g.FillRectangle(sb, 50, 50, 150, 150);  
  18.     }  
  19.     public static void Main() {  
  20.         Application.Run(new Hatchbru());  
  21.     }  
  22.     // End of class  
  23. }  

Using GradientBrush

 
Listing 7
  1. using System;  
  2. using System.Windows.Forms;  
  3. using System.Drawing;  
  4. using System.Drawing.Drawing2D;  
  5. public class Texturedbru: Form {  
  6.     Brush bgbrush;  
  7.     public Texturedbru() {  
  8.         Image bgimage = new Bitmap("dotnet.gif");  
  9.         bgbrush = new TextureBrush(bgimage);  
  10.         this.Paint += new PaintEventHandler(Text_bru);  
  11.     }  
  12.     public void Text_bru(object sender, PaintEventArgs e) {  
  13.         Graphics g = e.Graphics;  
  14.         g.FillEllipse(bgbrush, 50, 50, 500, 300);  
  15.     }  
  16.     public static void Main() {  
  17.         Application.Run(new Texturedbru());  
  18.     }  
  19.     // End of class  
  20. }  

Working with Images

 
You can easily insert images by following the procedure given below,
  1. Create an object of Bitmap class as shown below,
    1. Image img = new Bitmap("image1.bmp"); 
  2. Apply the above object in DrawImage() method,
    1. 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.