Lesson 27: Mastering Rectangle Drawing in VB2022

Learn GDI+ rectangle drawing techniques with practical VB.NET examples for borders, fills, and custom shapes

Key Takeaway

VB2022 provides powerful GDI+ tools to create custom rectangles with various borders, fills, and styles through code.

Welcome to Lesson 27 of our Visual Basic 2022 Tutorial! In this lesson, you'll master the techniques of drawing rectangles in VB2022. While basic shapes are easy to create, VB.NET provides advanced capabilities for creating professional-looking graphics.

27.1 Rectangle Drawing Methods

Creating rectangles in VB2022 follows these patterns:

1. Direct Drawing

Draw using coordinates and dimensions

2. Rectangle Object

Create a Rectangle object first

3. Filled Rectangles

Use FillRectangle for solid shapes

Pro Tip: Resource Management

Always dispose of Graphics, Pen, and Brush objects using the Dispose() method to free resources.

27.2 Basic Rectangle Drawing

Create simple rectangles with border and fill options:

Example 27.1: Simple Rectangle

This example demonstrates how to draw a basic rectangle:

SimpleRectangle.vb
Private Sub BtnDrawRectangle_Click(sender As Object, e As EventArgs) Handles BtnDrawRectangle.Click
    ' Create graphics object
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a blue pen for border
    Dim borderPen As New Pen(Color.Blue, 3)
    
    ' Create a red brush for fill
    Dim fillBrush As New SolidBrush(Color.Red)
    
    ' Define rectangle position and size
    Dim rect As New Rectangle(50, 50, 200, 150)
    
    ' Draw the rectangle border
    g.DrawRectangle(borderPen, rect)
    
    ' Fill the rectangle
    g.FillRectangle(fillBrush, rect)
    
    ' Clean up resources
    borderPen.Dispose()
    fillBrush.Dispose()
    g.Dispose()
End Sub

Rectangle Drawing Result

Rectangle with blue border and red fill
Figure 27.1: Rectangle with blue border and red fill

27.3 Customizing Rectangle Styles

VB2022 allows extensive customization of rectangle appearance:

1 Border Styles

Dashed, dotted, and custom dash patterns

2 Gradient Fills

Linear and radial gradient fills

3 Rounded Corners

Creating rectangles with rounded corners

Example 27.2: Styled Rectangle

Create a rectangle with custom border style and gradient fill:

StyledRectangle.vb
Private Sub BtnStyledRectangle_Click(sender As Object, e As EventArgs) Handles BtnStyledRectangle.Click
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a custom pen
    Dim myPen As New Pen(Color.Purple, 4)
    myPen.DashStyle = Drawing.Drawing2D.DashStyle.DashDotDot
    
    ' Create gradient brush
    Dim gradBrush As New Drawing2D.LinearGradientBrush(
        New Point(50, 50),
        New Point(250, 200),
        Color.Yellow,
        Color.Orange)
    
    ' Define rectangle
    Dim rect As New Rectangle(50, 50, 200, 150)
    
    ' Draw filled rectangle
    g.FillRectangle(gradBrush, rect)
    
    ' Draw border
    g.DrawRectangle(myPen, rect)
    
    ' Clean up
    myPen.Dispose()
    gradBrush.Dispose()
    g.Dispose()
End Sub

Styled Rectangle Result

Styled rectangle with gradient fill and custom border
Figure 27.2: Rectangle with gradient fill and custom border

27.4 Advanced Rectangle Techniques

Create more complex rectangle-based graphics:

Example 27.3: Rounded Rectangle

Create a rectangle with rounded corners using GraphicsPath:

RoundedRectangle.vb
Private Sub BtnRoundedRectangle_Click(sender As Object, e As EventArgs) Handles BtnRoundedRectangle.Click
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create pen and brush
    Dim myPen As New Pen(Color.DarkGreen, 3)
    Dim myBrush As New SolidBrush(Color.LightGreen)
    
    ' Define rectangle and corner radius
    Dim rect As New Rectangle(50, 50, 200, 120)
    Dim radius As Integer = 20
    
    ' Create rounded rectangle path
    Dim path As New Drawing2D.GraphicsPath()
    
    ' Calculate diameter
    Dim diameter As Integer = radius * 2
    
    ' Top-left corner
    path.AddArc(rect.X, rect.Y, diameter, diameter, 180, 90)
    
    ' Top-right corner
    path.AddArc(rect.X + rect.Width - diameter, rect.Y, diameter, diameter, 270, 90)
    
    ' Bottom-right corner
    path.AddArc(rect.X + rect.Width - diameter, rect.Y + rect.Height - diameter, diameter, diameter, 0, 90)
    
    ' Bottom-left corner
    path.AddArc(rect.X, rect.Y + rect.Height - diameter, diameter, diameter, 90, 90)
    
    ' Close path
    path.CloseFigure()
    
    ' Draw and fill the rounded rectangle
    g.FillPath(myBrush, path)
    g.DrawPath(myPen, path)
    
    ' Clean up
    myPen.Dispose()
    myBrush.Dispose()
    g.Dispose()
End Sub

Rounded Rectangle Result

Rounded rectangle
Figure 27.3: Rectangle with rounded corners

Example 27.4: Rectangle Grid

Create a grid of rectangles with different styles:

RectangleGrid.vb
Private Sub BtnRectangleGrid_Click(sender As Object, e As EventArgs) Handles BtnRectangleGrid.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim rand As New Random()
    
    ' Clear the form
    g.Clear(Me.BackColor)
    
    ' Draw 4x4 grid of rectangles
    For row As Integer = 0 To 3
        For col As Integer = 0 To 3
            Dim x As Integer = 30 + col * 100
            Dim y As Integer = 30 + row * 100
            Dim width As Integer = 80
            Dim height As Integer = 80
            
            ' Create random color
            Dim color As Color = Color.FromArgb(rand.Next(256), rand.Next(256), rand.Next(256))
            
            ' Create pen and brush
            Dim myPen As New Pen(Color.Black, 2)
            Dim myBrush As New SolidBrush(color)
            
            ' Create rectangle
            Dim rect As New Rectangle(x, y, width, height)
            
            ' Draw filled rectangle
            g.FillRectangle(myBrush, rect)
            
            ' Draw border
            g.DrawRectangle(myPen, rect)
            
            ' Clean up
            myPen.Dispose()
            myBrush.Dispose()
        Next
    Next
    
    g.Dispose()
End Sub

Rectangle Grid Result

Rectangle grid
Figure 27.4: Grid of colored rectangles

Rectangle Drawing Summary

Master these essential rectangle techniques in VB2022:

Concept Description Key Methods
Basic Rectangle Simple rectangle with border DrawRectangle(), Rectangle
Filled Rectangle Rectangle with solid fill FillRectangle(), SolidBrush
Border Styles Custom line patterns Pen.DashStyle
Gradient Fills Color transitions LinearGradientBrush
Rounded Corners Softened rectangle edges GraphicsPath, AddArc()

Best Practices

Always use Using statements for Graphics objects, prefer FillRectangle over DrawRectangle for filled shapes, and use double buffering for animations.

Performance Tips

For complex drawings, create a Bitmap object and draw to it, then render the bitmap to the screen.

Advanced Features

Explore texture brushes, hatch brushes, and custom pen styles for professional graphics.

Practical Exercises

Apply your rectangle drawing knowledge with these hands-on exercises:

Exercise 1: Gradient Rectangles

Create a program that draws a rectangle with a gradient fill instead of a solid border. Use LinearGradientBrush for the gradient effect.

Exercise 2: Interactive Rectangle Drawing

Develop an application where users can draw rectangles by clicking and dragging the mouse.

Exercise 3: Rectangle Animation

Create an animated rectangle that moves across the form and changes size using a Timer control.

Exercise 4: Custom Corner Radius

Create a function that draws rectangles with independently adjustable corner radii.

Exercise 5: Pattern Generator

Generate a complex pattern using nested rectangles of varying sizes and colors.

Challenge Exercise: Drawing Application

Create a simple drawing application where users can add rectangles to a canvas.

Next Lesson

Learn how to create circles and ellipses in Lesson 28: Drawing Ellipses & Circles.

Related Resources

VB6 Tutorial

Mastering VB6 Programming

Explore Tutorials

Visual Basic Examples

Practical VB code samples for real-world applications

View Examples

Excel VBA Tutorial

Learn how to automate Excel by creating VBA macros

Learn More