Drawing Package

Another common task is Drawing, and what better way to do this than with a Drawing Package using PictureBox, Open/Save/Colour Dialogs, plus Draw Width selection!

Printer Friendly Download Tutorial (307KB) Download Source Code (13KB)

Step 1

Start Microsoft Visual Basic 2008 Express Edition, then select File then New Project... Choose Windows Forms 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

With Form1 selected goto the Properties box and change the Name from Form1 to frmMain

Step 4

Then from the Common Controls tab on the Toolbox select the PictureBox component:

Step 5

Draw a PictureBox on the Form, see below:

Step 6

Then goto the Properties box and change the Name to picDraw, BackColor to White and Dock to Fill, see Below:

Step 7

Then from the Menus & Toolbars tab on the Toolbox select the MenuStrip Control, see Below:

Step 8

Either double-click on the MenuStrip Control entry in the Menu & Toolbars tab on the Toolbox or keep the MenuStrip Component Clicked and then move it over the Form then let go. Change the Name of the MenuStrip in the properties to mnuDraw The Form will then look as below:

Step 9

Click or select where the MenuStrip says "Type Here", an editable Textbox will appear type in "File" without the quotes in this Box, then in the Box below that type in "New", below that "Open...", then "Save..." and finally "Exit". The MenuStrip should look as below:

Step 10

Click or select next to "File" where the MenuStrip says "Type Here", and type in "Edit" without the quotes in this Box, then in the Box below that type in "Cut", below that "Copy", then "Paste" and finally "Delete". The MenuStrip should look as below:

Step 11

Click or select next to "Edit" where the MenuStrip says "Type Here", and type in "Draw" without the quotes in this Box, then in the Box below that type in "Width" and below that "Colour". The MenuStrip should look as below:

Step 12

Right Click on the Form or the entry of the Form in Solution Explorer and choose the "View Code" option then below the "Public Class frmMain" type the following:

Private DrawBitmap As Bitmap
Private DrawGraphics As Graphics
Private DrawColour As Color = Color.Blue
Private DrawWidth As Integer = 5

See Below:

Step 13

Return to the Design view by selecting the [Design] tab or Right Click on the "View Designer" option in Solution Explorer for frmMain.
Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "New" (NewToolStripMenuItem) and type the following in the NewToolStripMenuItem_Click() Sub:

Dim Response As MsgBoxResult
Response = MsgBox("Are you sure you want to start a New Drawing?", _
                  MsgBoxStyle.Question + MsgBoxStyle.YesNo, _
                  "Drawing Package")
If Response = MsgBoxResult.Yes Then
  picDraw.Image = Nothing
  Me.Text = "Drawing Package - Untitled"
End If

See Below:

Step 14

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Open..." (OpenToolStripMenuItem) and type the following in the OpenToolStripMenuItem_Click() Sub:

Dim Open As New OpenFileDialog()
Open.Filter = "Bitmap Image (*.bmp)|*.bmp|All files (*.*)|*.*"
Open.CheckFileExists = True
If Open.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
  Try
    Open.OpenFile()
    picDraw.Image = Image.FromFile(Open.FileName)
    Me.Text = "Drawing Package - " & Open.FileName
  Catch ex As Exception
    ' Do nothing on Exception
  End Try
End If

See Below:

Step 15

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Save..." (SaveToolStripMenuItem) and type the following in the SaveToolStripMenuItem_Click() Sub

Dim Save As New SaveFileDialog()
Save.Filter = "Bitmap Image (*.bmp)|*.bmp|All files (*.*)|*.*"
Save.CheckPathExists = True
If Save.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
  Try
    picDraw.Image.Save(Save.FileName)
    Me.Text = "Drawing Package - " & Save.FileName
  Catch ex As Exception
    ' Do nothing on Exception
  End Try
End If

See Below:

Step 16

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Exit" (ExitToolStripMenuItem) and type the following in the ExitToolStripMenuItem_Click() Sub

Dim Response As MsgBoxResult
Response = MsgBox("Are you sure you want to Exit Drawing Package?", _
                  MsgBoxStyle.Question + MsgBoxStyle.YesNo, _
                  "Drawing Package")
If Response = MsgBoxResult.Yes Then
   End
End If

See Below:

Step 17

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Cut" (CutToolStripMenuItem) and type the following in the CutToolStripMenuItem_Click() Sub

Clipboard.SetImage(picDraw.Image) ' Copy
' Delete
DrawBitmap = New Bitmap(picDraw.Width, picDraw.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
picDraw.Image = DrawBitmap

See Below:

Step 18

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Copy" (CopyToolStripMenuItem) and type the following in the CopyToolStripMenuItem_Click() Sub

Clipboard.SetImage(picDraw.Image) ' Copy

See Below:

Step 19

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Paste" (PasteToolStripMenuItem) and type the following in the PasteToolStripMenuItem_Click() Sub

picDraw.Image = Clipboard.GetImage ' Paste

See Below:

Step 20

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Delete" (DeleteToolStripMenuItem) and type the following in the DeleteToolStripMenuItem_Click() Sub

' Delete
DrawBitmap = New Bitmap(picDraw.Width, picDraw.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
picDraw.Image = DrawBitmap

See Below:

Step 21

Click on the [Design] Tab to view the form again, then Click on "Draw" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Width" (WidthToolStripMenuItem) and type the following in the WidthToolStripMenuItem_Click() Sub

Dim Value As String
Value = InputBox("Enter a Width (between 1-200)", _
                 "Drawing Package", DrawWidth)
If IsNumeric(Value) Then
  If CInt(Value) > 0 And CInt(Value) <= 200 Then
    DrawWidth = CInt(Value)
  End If
End If
Value = Nothing

See Below:

Step 22

Click on the [Design] Tab to view the form again, then Click on "Draw" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Colour..." (ColourToolStripMenuItem) and type the following in the ColourToolStripMenuItem_Click() Sub

Dim Colour As New ColorDialog
Colour.Color = DrawColour
If Colour.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
  Try
    DrawColour = Colour.Color
  Catch ex As Exception
    ' Do nothing on Exception
  End Try
End If

See Below:

Step 23

Click on the [Design] Tab to view the form again, then Double Click on the Form (frmMain) and type the following in the frmMain_Load() Sub

DrawBitmap = New Bitmap(picDraw.Width, picDraw.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
picDraw.Image = DrawBitmap
Me.Text = "Drawing Package - Untitled"

See Below:

Step 24

While Still in the Code View, if not double click on the Form, the Window Area of the Form will work, this will show the frmMain_Load Sub from the previous step, on this screen at the top are two Drop-down boxes one labeled (frmMain Events) and the other is Load. Click on the drop-down box with "Load" in it to show the list of events for frmMain click on Resize, and type the following in the frmMain_Resize() Sub

If picDraw.Width > picDraw.Image.Width Or _
picDraw.Height > picDraw.Image.Height Then
  DrawBitmap = New Bitmap(picDraw.Width, picDraw.Height)
  DrawGraphics = Graphics.FromImage(DrawBitmap)
  DrawGraphics.DrawImage(picDraw.Image, 0, 0)
  picDraw.Image = DrawBitmap
End If

See Below:

Step 25

With the Code View shown, click on the Drop-down labelled (frmMain Events), or the Left large Drop-down with (General) at the top, then look down this list and click on "picDraw", then from the Drop-Down list next to this select "MouseMove", and type the following in the picDraw_MouseMove() Sub

If e.Button = Windows.Forms.MouseButtons.Left Then
  DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
  DrawGraphics.FillEllipse(New SolidBrush(DrawColour), _
                           e.X, e.Y, DrawWidth, DrawWidth)
  picDraw.Image = DrawBitmap
End If

See Below:

Step 26

Steps 26-30 are optional and just add Keyboard Shortcuts to the MenuItems, you don't have to do these if you don't want to!
Return to the Design view of the Form by selecting the [Design] tab for the Form, or double click on the Form's name in Solution Explorer.
Click on "File" on the Menu Strip to select the Menu Strip and show the File Menu then mouse over the "Type Here" box.
Click on the Drop Down arrow inside the "Type Here" box to show the following options: MenuItem, ComboBox, Separator and TextBox, see below:

File Menu with Type Here options displayed at bottom of menu

Step 27

Click on the "Separator" option to place a Menu Separator in this menu, then click on it an move it so it goes above the "Exit" option in the file menu, do this by clicking on the separator (the horizontal line which has appeared) then whilst keeping clicked move it up, it should appear as below:

File Menu with Divider above Exit MenuItem

Step 28

With the "File" Menu still being displayed click on "New" then in the Properties box look for the "Shortcut Key" option and click on the Drop Down arrow where "None" appears. Check the "Ctrl" Checkbox in "Modifiers" and then in the "Key" dropdown list select "N", see below:

Step 29

Set the rest of the "File" MenuItem "Shortcut Key" Properties except the "Exit" Menu Item, "Open" should be set to "Ctrl" and "O", "Save" to "Ctrl" and "S", the File Menu should appear as below:

Step 30

Click on or select the "Edit" Menu and set the "Shortcut Keys" Properties, "Cut" should be set to "Ctrl" and "X", "Copy" to "Ctrl" and "C", "Paste" to "Ctrl" and "V" finally "Delete" should be just "Del" in the Keys drop-down list, The Edit Menu should appear as below:

Step 31

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

When you do the following will appear:

Step 32

You can draw on the PictureBox, by holding down the left-mouse button and moving the cursor to draw use the Draw menu to change the Width and Colour plus you can then Save your image to Open later if you want, see below:

Step 33

Click File then Exit or click on the Close button on the top right of the window to end the application.

This Drawing package uses a PictureBox plus the capabilities of GDI+ to draw the dot that allows you to create the drawing, try changing the code to add more features such as alternative shapes and more!