GDI+ stands for Graphics Device Interface +. It is the part of the .NET library that is used for drawing. Fortunately, there are many functions built-in to allow us to work with graphics.
In all aspects of .NET programming, the top left hand corner of the item you are drawing on is (0, 0). X values increase as you move the right, y values increase as you move downwards.
Start by creating a form that looks like the one in the screenshot. On the left of the form is a picture box called picShapes. The control on the right is a list box called lstShapes. The background of the picture box has been set to black. The items entered into the list box were done at design time - you will need to type these things in.
When the user clicks on an item in the list box, we will clear the picture box and draw the selected item. There will be a procedure for each of the operations listed. The following event procedure will be used.
private void lstShapes_SelectedIndexChanged(object sender, EventArgs e)
{
switch (lstShapes.SelectedIndex)
{
case 0:
DrawSquare();
break;
case 1:
DrawRectangle();
break;
case 2:
DrawCircle();
break;
case 3:
DrawEllipse();
break;
case 4:
DrawPie();
break;
case 5:
DrawLine();
break;
case 6:
DrawText();
break;
case 7:
FillGradient();
break;
}
}
All GDI drawing is based on a graphics object drawn from the context in which you want to draw. In this case, we make our graphics object from the picture box where we want to draw.
A square is a rectangle where the sides are all equal - the procedures are very similar.
private void DrawSquare()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle mySquare = new Rectangle(10, 10, 480, 480);
g.DrawRectangle(Pens.White, mySquare);
}
private void DrawRectangle()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle myRect = new Rectangle(10, 10, 480, 280);
g.DrawRectangle(Pens.White, myRect);
}
An circle is an ellipse where the height and width is the same. The procedure for circle and ellipse is very similar.
private void DrawCircle()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle myRect = new Rectangle(10, 10, 480, 480);
g.DrawEllipse(Pens.White, myRect);
}
private void DrawEllipse()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle myRect = new Rectangle(10, 10, 480, 280);
g.DrawEllipse(Pens.White, myRect);
}
The DrawPie() method allows us to draw a slice of a circle choosing exactly which part of the circle we want to slice. The format for this method is,
DrawPie(Pen, Rectangle, Start Angle, Sweep Angle)
The full procedure looks as follows,
private void DrawPie()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle myRect = new Rectangle(10, 10, 480, 480);
g.DrawPie(Pens.White, myRect, 0, 90);
}
Other than the pen colour, you need 4 pieces of information to draw a line. These are the x and y co-ordinates of the start and end of the line.
private void DrawLine()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
g.DrawLine(Pens.White, 10, 10, 400, 400);
}
private void DrawText()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Font f = new Font(FontFamily.GenericSansSerif, 12, FontStyle.Bold);
g.DrawString("Writing", f, Brushes.White, new Point(10, 100));
}
All of the methods used so far are drawing methods. For each drawing method there is a corresponding Fill method (FillRectangle, FillEllipse etc). When we draw a shape, we use a pen - when we fill a shape, we use a brush. You can specify brush colours in a simlar way to that used to specifiy a pen colour - Brushes.White. You can also make some fancy gradient style brushes too.
The LinearGradientBrush type is available when you add another using statement to the top of the form's code window - using System.Drawing.Drawing2D;.
private void FillGradient()
{
picShapes.Refresh();
Graphics g = picShapes.CreateGraphics();
Rectangle myRect = new Rectangle(10, 10, 480, 280);
LinearGradientBrush lb = new LinearGradientBrush(myRect, Color.Gold, Color.Silver, LinearGradientMode.Horizontal);
g.FillRectangle(lb, myRect);
}