Simple Drawing Package

Well if you did the Drawing Tutorial this is even better, which will introduce you to the ComboBox and PictureBox Controls plus Structures, Drawing Methods, Loops, Collections plus image persistence!

Printer Friendly Download Tutorial (150KB) Download Source Code (15KB)

Step 1

Start Microsoft Visual Basic 2005 Express Edition, then select File then New Project... Choose Windows Application from the New Project Window, enter a name for the Project and then click OK, see below:

Step 2

A Blank Form named Form1 should then appear, see below:

Step 3

Then from the Windows Forms components tab select the PictureBox control:

Step 4

Draw a PictureBox on the Form, see below:

Step 5

Then go to the Properties box and change the BackColor property from Control to White, see below:

Step 6

Then from the Windows Forms components tab select the ComboBox control:

Step 7

Draw two ComboBoxes on the Form, see below:

Step 8

Click on ComboBox1 and then go to the Properties box and change the DropDownStyle Property to DropDownList, see below:

Step 9

Do the same with ComboBox2, then Double click on the Form and type the following Declarations just below the Public Class section at the top:

Private DrawBitmap As Bitmap
Private DrawGraphics As Graphics
Private DrawBrush As Brush

Then type in the following into the Form1_Load method:

DrawBitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
PictureBox1.Image = DrawBitmap
With ComboBox1
  .Items.Add(2)
  .Items.Add(4)
  .Items.Add(8)
  .Items.Add(16)
  .Items.Add(32)
  .Items.Add(64)
End With
ComboBox1.SelectedIndex = 0
With ComboBox2
  .Items.Add("Black")
  .Items.Add("Red")
  .Items.Add("Green")
  .Items.Add("Blue")
  .Items.Add("White")
End With
ComboBox2.SelectedIndex = 0

See Below:

Step 10

Right click on the Form and select the view Code option then in the Top Right List select PictureBox1, and then in the Top Left List select MouseMove, then type in the PictureBox1_MouseMove Sub:

If e.Button = Windows.Forms.MouseButtons.Left Then
  Select Case ComboBox2.SelectedIndex
    Case 0
      DrawBrush = Brushes.Black
    Case 1
      DrawBrush = Brushes.Red
    Case 2
      DrawBrush = Brushes.Green
    Case 3
      DrawBrush = Brushes.Blue
    Case 4
      DrawBrush = Brushes.White
    Case Else
      DrawBrush = Brushes.Black
  End Select
  DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
  DrawGraphics.FillEllipse(DrawBrush, e.X, e.Y, _
  CInt(ComboBox1.SelectedItem), CInt(ComboBox1.SelectedItem))
  PictureBox1.Image = DrawBitmap
End If

See Below:

Step 11

Save the Project as you have now finished the application, then click on Start:

When you do the following will appear:

Step 12

Change the Value in the Left ComboBox to 8 and the in the Right ComboBox to Blue, and draw something by holding down the Left mouse button and draw on the White PictureBox, see below:

Step 13

Click on the Close button on the top right of Form1 to end the application.

Great you have just created an improved Drawing Package! Try changing the program so that other Draw Widths are available (add more values to Combobox1) Plus add more colours by adding the new names e.g. Yellow and then in the PictureBox_MouseMove add a line in the Select case e.g. case 5 mycolor = Brushes.Yellow.
Try changing other parts of the code and extending it, you can learn a lot from this simple drawing package for example try changing the size of the FillEllipse to get a Thicker line, or the Brush e.g. Brushes.Green or Brushes.Red!