Home

Introduction to Bitmaps

 

Introduction

A bitmap is a representation of a picture or another type of graphic on a window. For example, and as mentioned in the previous lesson, it can be used to show a regular picture on a form. Here is an example:

Bitmap

 

     

A bitmap can be used as a background for a window or a web page. A bitmap can also be used for an aesthetic purpose to decorate a dialog box. That’s how it is used on some dialog boxes. Another regular use of bitmaps is as small graphics on toolbars:

Toolbar

Practical LearningPractical Learning: Introducing Bitmaps

  1. Start Microsoft Visual Basic and create a new Windows Application named PictureViewer1
  2. From the Common Controls section of the Toolbox, click Button and click the form
  3. While the button is still selected on the form, in the Properties window, change its characteristics as follows:
    Text: Open a Picture
    (Name): btnOpenPicture
     
    Picture Viewer
  4. Right-click the form and click View Code
  5. Declare two global variables as follows:
    Public Class Form1
    
        Dim PictureIsLoaded As Boolean
        Private strPicture As String
    
    End Class

The Bitmap Class

To support bitmaps, the GDI+ library provides the Bitmap class. In the .NET Framework, the bitmap is represented by a class called Bitmap. The Bitmap class is derived from the Image abstract class. Both classes are defined in the System.Drawing namespace of the System.Drawing.dll assembly. The Bitmap class is serializable.

Getting a Bitmap

There are two primary ways you can get a bitmap to use in your application: you can use an already created bitmap or you can design your own. To use an existing bitmap, you can open it as a file. To support this, the Bitmap class provides the following constructor:

Public Sub New(filename As String)

This constructor takes as argument the name of the file or the path to it. Here is an example of using it:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Friend WithEvents btnPicture As Button

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            btnPicture = New Button
            btnPicture.Location = New Point(10, 10)
            btnPicture.Text = "Picture"
            Controls.Add(btnPicture)

        End Sub

        Private Sub btnPictureClicked(ByVal sender As Object, _
                              ByVal e As EventArgs) _
                              Handles btnPicture.Click

            Dim bmpPicture As Bitmap

            bmpPicture = New Bitmap("woman.jpg")

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Besides this constructor, Image, the parent of of the Bitmap class, provides the FromFile() method to its children. This method is overloaded with two versions. The first version uses the following syntax:

Public Shared Function FromFile(filename As String) As Image

As you can see, this is a static method that you call without instantiating the class. The method takes as argument the name of, or the path to, the file. It returns an Image object that you can then cast to a Bitmap. Here is an example:

Private Sub btnPictureClicked(ByVal sender As Object, _
                              ByVal e As EventArgs) _
                              Handles btnPicture.Click

            Dim bmpPicture As Bitmap

            bmpPicture = CType(Image.FromFile("vehicle.png"), Bitmap)

End Sub

Practical LearningPractical Learning: Getting a Picture

  1. Copy the following picture in the PictureView1\PictureViewer1\bin\debug folder of the current project
     
    Horizon
  2. Return to the form and, in the Class Name combo box, select (Form1 Events)
  3. In the Method Name combo box, select Load and implement the event as follows:
    Private Sub Form1_Load(ByVal sender As Object, _
                               ByVal e As System.EventArgs) _
                               Handles Me.Load
            PictureIsLoaded = False
            strPicture = "horizon.jpg"
    End Sub
  4. Save the code

Creating a Graphics From a Bitmap

In our introduction to graphics, we saw various ways of getting a getting a Graphics object, either from the CreateGraphics() method of a Control-derived class or from the handle of the control. Besides these techniques, the Graphics class provides a method named FromImage. Its syntax is:

Public Shared Function FromImage(image As Image) As Graphics

This shared method takes as argument a variable of type Image. Therefore, when calling this method, pass an Image or an Image-based variable to it. After the method has been called, it produces a Graphics object.

Opening a Picture File

In your application, you may also want the user to be able to open a picture as file. To assist you with this, you can use the Open File dialog box. As a reminder, to allow the user to open a picture in your application, add an OpenFileDialog control Open File Dialog to your form or create one programmatically.

There are different types of graphic files with various extensions. The primary type of bitmap you will use in Microsoft Windows has the extension .bmp. There are many more graphic file extensions that Microsoft Windows supports. In our lessons, we cannot review all of them, their differences, advantages, or disadvantages. Simply know that most or all of the types of graphics you can think of are supported.

When providing an Open File dialog box to your application, if you will support various types of graphics, construct a filter accordingly. Here is an example from Microsoft Paint:

Open

 

As you can see, the bitmap file is on top of the list.

Practical LearningPractical Learning: Opening a Picture

  1. In the Dialogs section of the Toolbox, click the OpenFileDialog button Open File Dialog and click the form
  2. Using the Properties window, change the following characteristics:
    (Name): ofdPicture
    DefaultExt: bmp
    Filter: Bitmap Files (*.bmp)|*.bmp|JPEG Files (*.jpg,*.jpeg)|*.jpg|GIF Files (*.gif)|*.gif|PNG Files (*.png)|*.png
    Title: Open a Picture
  3. On the form, double-click the button and implement its event as follows:
    Private Sub btnOpenPicture_Click(ByVal sender As System.Object, _
                                         ByVal e As System.EventArgs) _
                                         Handles btnOpenPicture.Click
            If ofdPicture.ShowDialog() = Windows.Forms.DialogResult.OK Then
                strPicture = ofdPicture.FileName
                PictureIsLoaded = False
                Invalidate()
            End If
    End Sub
  4. Save all

Designing a Bitmap

As opposed to opening an existing picture, you can create your own, using the various classes and accessories of the GDI+ library. You can design a picture inside of Microsoft Visual Basic studio or you can use an external application.

To create a bitmap in Microsoft Visual Basic, on the main menu, you can click Project -> Add New Item... In the Templates section of the Add New Item dialog box, click Bitmap File, accept the suggested name or change the Name, and click Add. You would be presented with a window you can use. You either design a bitmap or you can paste an image from the clipboard. Here is an example:

Bitmap Design 

There are many other more sophisticated applications used to create and manipulate graphics. As long as you can create an save a valid picture, you can use that picture in your application.

Presenting a Bitmap

Once the picture is ready, to present it to the user, for example to display it in your application, you can call the Graphics.DrawImage() method that is overloaded with as many different versions as you can possibly need. One of the versions of this method has the following syntax:

Public Sub DrawImage(image As Image, x As Integer, y As Integer)

The first argument can be a bitmap that you may have previously initialized. The second argument specifies the location where the picture will be drawn.

 

Home Copyright © 2008-2012 FunctionX Next