This page provides a basic introduction to the PictureBox control. This is the control normally used to display abd edit images. All the examples assume that you have places a PictureBox control called "PictureBox1" on the current form. Be aware that very large pictures can cause problems on older systems (excessive memory usage, huge files etc.) You should also expect a 1,024 megapixel size limit. If you intend to draw your own picture, you may wish to start with a "blank" image in the picturebox

Private Sub BlankCanvasInPictureBox(width1 As Integer, height1 As Integer)
 PictureBox1.Size = New Size(width1, height1)
 PictureBox1.Image = New Bitmap(width1, height1)
End Sub
  

A picture box can be used to display an image that already exists. The following function is suitable for .jpg, .bmp, .gif ....

Private Sub LoadImageIntoPictureBox(ImageFileName As String)
 PictureBox1.Image = System.Drawing.Image.FromFile(ImageFileName)
 PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
End Sub
  

We do not edit the image in a PictureBox directly. Instead we create a "bitmap" version of the image. Once linked to the PictureBox, any changes to the bitmap appear in the PictureBox. Bitmaps can requre a lot of memory (usually 4 bytes per pixel.) In complex applications, there will be many functions requiring access to the main bitmaps. If we create a bitmap within a function, it would not be available to other functions. For this reason, you will often find bitmaps defined at class level. The following function creates a bitmap and links it to out picturebox, ready for editing.

Private bmp As Bitmap
'
Private Sub EditableBitmapInPictureBox(ImageFileName As String)
 PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
 bmp = New Bitmap(ImageFileName)
 PictureBox1.Image = bmp
End Sub
  

At this stage, it is possible to edit the picture by changing the colour of individual pixels using

bmp.SetPixel(x, y, colour)
  

where x, y are integer and indicate location of desired pixel.
colour is the new color for the pixel (e.g.

Color.Red

or

Color.FromARGB(A,R,G,B)

.

• A=integer 0-255 = Opacity (0=transparent 255=opaque)
• R=red 0=255 = 0 = colour contains no red, 255 = colour contains maximum red
• G=green 0=255 = 0 = colour contains no green, 255 = colour contains maximum green
• B=blue 0=255 = 0 = colour contains no blue, 255 = colour contains maximum blue

You can also find the colour for any pixel using

Dim colour1 a Color = bmp.GetPixel(x, y)
  

The colour components can be extracted using

   = colour1.A   = colour1.R    =colour1.G    =colour1.B
  

Trying to draw complex shapes one pixel at a time would be very tedious and slow. Fortunately, dotNet has a wide variety of graphics tools which automate standard tasks e.g. draw a line, draw an eclipse, shade in a rectangle etc. We link "Graphics" to our bitmap to gain access to these features. The Graphics updates the bitmap and the bitmap updates the PictureBox image.
 
We define the thickness and colour of a line using a "Pen" and we describe the line/shape using "Graphics" In this example we will draw a Rectangle.

   Private Sub DrawRectangle(colour1 As Color, lineThickness1 As Integer, x1 As Integer, y1 As Integer, x2 As Integer, y2 As Integer)
 'x1=Left edge of rectangle ... y1=top edge of rectangle
 'x2=right edge of rectangle ... y2=bottom edge of rectangle
 Dim g As Graphics = Graphics.FromImage(bmp)
 Dim pen1 As New Pen(colour1, lineThickness1)
 g.DrawRectangle(pen1, x1, y1, x2, y2)
End Sub
  

There are many other shape and line variations including

g.DrawArc    g.DrawEllipse   g.DrawLine
g.DrawPath   g.DrawPolygon   g.DrawString
  

 
Drawing shapes that are filled with a colour is similar to drawing shape outlines. The main difference is the use of a "brush" instead of a "pen" In this example will will draw a coloured_in rectangle

   Public Sub FillRectangle(colour1 As Color, x1 As Integer, y1 As Integer, x2 As Integer, y2 As Integer)
 'x1=Left edge of rectangle ... y1=top edge of rectangle
 'x2=right edge of rectangle ... y2=bottom edge of rectangle
 Dim g As Graphics = Graphics.FromImage(bmp)
 Dim brush1 As New SolidBrush(colour1)
End Sub
  

Other coloured_in shapes include

g.FillPath    g.FillPolygon   g.FillRegion
g.FillEllipse
  

 
This function returns the point (-1, -1) when mouse is not in the picturebox

   Private Function GetMousePoistionWithinPictureBox() As Point
 Dim screenX As Integer = Me.PointToClient(MousePosition).X
 Dim screenY As Integer = Me.PointToClient(MousePosition).Y
 Dim mouseX As Integer = screenX - PictureBox1.Left
 Dim mouseY As Integer = screenY - PictureBox1.Top
 If mouseX < 0 OrElse mouseX >= PictureBox1.Width OrElse mouseY < 0 OrElse mouseY >= PictureBox1.Height Then
  Return New Point(-1, -1) ' Error = Mouse is not on the picture box
 End If
 Return New Point(mouseX, mouseY)
End Function
  

 
This function returns the point (-1, -1) when mouse is not in the picturebox. The function allows for autoscaling but it assumes the "scaled" bitmap completely fills the picture box.

• bmp is the bitmap containing the picturebox image
• PictureBox1 is the name of a picturebox
• Function returns (-1, -1) when mouse not on picturebox.

    Private Function GetMousePositionWithinBitMap(bmp As Bitmap) As Point
 Dim screenX As Integer = Me.PointToClient(MousePosition).X
 Dim screenY As Integer = Me.PointToClient(MousePosition).Y
 Dim mouseX As Integer = screenX - PictureBox1.Left
 Dim mouseY As Integer = screenY - PictureBox1.Top
 mouseX = CInt(Math.Round(mouseX * (bmp.Width) / (PictureBox1.Width - 1)))
 mouseY = CInt(Math.Round(mouseY * (bmp.Height) / (PictureBox1.Height - 1)))
 If mouseX < 0 OrElse mouseX >= bmp.Width OrElse mouseY < 0 OrElse mouseY >= bmp.Height Then
  Return New Point(-1, -1) ' Error = Mouse is not on the picture box
 End If
 Return New Point(mouseX, mouseY)
End Function
   

DigitalDan.co.uk