Home and Learn: Intermediate Programming
Drawing Rectangles
Graphics Tutorials: For C# and VB NET Students
Rectangles, like lines, can be drawn with the Graphics object. First, though, you need to create a Rectangle object.
Add a new button to your form from the previous lessons, and double click to get at the coding window. To set up a rectangle, add the following lines to the top of the coding window, just below the pen1 line:
VB Net
Dim rectangle1 As Rectangle
C#
Rectangle rectangle1;
This sets up a variable of type Rectangle. We now need to create a Rectangle object.
Click back inside of your new button code stub, and add the following:
VB
rectangle1 = New Rectangle(10, 10, 100, 300)
C#
rectangle1 = new Rectangle(10, 10, 100, 300);
The numbers between the round brackets of Rectangle are for the x position, the y position, the width of the rectangle, and the height. The x and y position are where you want to start drawing the upper right-hand corner of the rectangle. In our code, we're saying "Have the upper right-hand corner at position 10, 10. The width will be 100, and the height will be 300".
If you prefer, you can set up your rectangle like this:
rectangle1 = New Rectangle( )
rectangle1.X = 10
rectangle1.Y = 10
rectangle1.Width = 100
rectangle1.Height = 300
Here, we're just accessing the properties of a New Rectangle object and putting values into them.
But that just sets up a Rectangle object. To draw the rectangle, you still need a Pen. We'll use the Pen we have already set up. So add the following line to your button code:
VB
pen1 = New Pen(Color.Blue, 1)
C#
pen1 = new Pen(Color.Blue, 1);
You can pick any colour you like for the Pen, but we've gone for Blue, with a line width of 1.
So that we can use our Select Case or switch statement again, add this line (semicolon on the end in C#) to your button:
drawOptions = 2
We haven't got a Case 2 yet, but we'll add it next. The final line for the button code, though, is the Invalidate command (again, semicolon on the end in C#):
Invalidate( )
Your button code should now look something like ours in VB:
And this in C#:
You now need to amend the Select Case or switch statement that is inside of your Paint event. Add a Case 2, and the following in VB Net:
Case 2
e.Graphics.DrawRectangle( pen1, rectangle1 )
And this in C#:
case 2:
e.Graphics.DrawRectangle(pen1, rectangle1);
break;
So you use DrawRectangle, which is a Subroutine/method of the Graphics object, just like DrawLine was. Inside of the round brackets of DrawRectangle you first specify the pen you want to use. The second argument is for the rectangle object you set up.
Your Paint event should now look something like ours in VB Net:
And like this in C#:
Run your programme and try it out. Click your new button, and a blue rectangle should appear on your form:
If you click your "Draw a Line" button, the rectangle will disappear to be replaced by your line.
Filled Rectangle
To draw a rectangle and fill it with a colour of your choice, you need another of the Subs/methods available to the Graphics object – FillRectangle. The rectangle is then filled with a Brush.
Add the following to your Case 2 code, just below the DrawRectangle line:
VB
e.Graphics.FillRectangle(Brushes.Blue, rectangle1)
C#
e.Graphics.FillRectangle(Brushes.Blue, rectangle1);
The first argument between the round brackets of FillRectangle is for the brush colour. The second argument is the rectangle you want to fill.
You can also set up a Brush object and use that, if you prefer. You do it like this in VB:
Dim brush1 As Brush
brush1 = Brushes.Blue
e.Graphics.FillRectangle (brush1, rectangle1 )
And this in C#:
Brush brush1;
brush1 = Brushes.Blue;
e.Graphics.FillRectangle (brush1, rectangle1 );
But whichever method you choose, when the programme is run, your rectangle should look like this, after the button click:
In the next lesson, you'll learn how to draw an ellipse with VB Net and C# code
Back to the Intermediate Programming Contents Page