Drawing

This Tutorial will show you how to make a simple Drawing Package using a PictureBox on a Form

Printer Friendly Download Tutorial (79.4KB) Download Source Code (7KB)

Step 1

Load Microsoft Visual Studio.NET then select Visual Basic Projects, Windows Application, enter a name for the Project and then click OK, see below:

New Project

Step 2

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

Form1

Step 3

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

PictureBox Component

Step 4

Draw a PictureBox on the Form, see below:

PictureBox on Form

Step 5

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

PictureBox Property

Step 6

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

Then type in the following into the Form1_Load method:

DrawBitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
PictureBox1.Image = DrawBitmap

See Below:

Declarations and Form Load

Step 7

While still in code view select from the Listbox on the top left PictureBox and from the list on the top right MouseMove, then type the following into the PictureBox1_MouseMove method:

If e.Button = Windows.Forms.MouseButtons.Left Then
  DrawGraphics.FillEllipse(Brushes.Blue, e.X, e.Y, 8, 8)
  PictureBox1.Image = DrawBitmap
End If

See Below:

Form PictureBox Move Event

Step 8

Save the Project as you have now finished the application, select Release and Click on Start:

Start (Release)

When you do the following will appear:

Application Running

Step 9

Now hold down the Left mouse button and draw on the White PictureBox, it will appear as a Blue trail!

Drawing Application

Step 10

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

This is a very simple Drawing Package, Try changing the size of the FillEllipse to get a Thicker line, or the Brush e.g. Brushes.Green or Brushes.Red!

Copyright Comentsys © 1997 - 2009, All rights reserved. About | Contact | Link to Page
Valid XHTML 1.1! Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 This website is ICRA rated