Simon - An OOP Project for Visual Basic .NET


The objected oriented nature of Visual Basic .NET opens new ways to solve old problems. The ability to take an existing object, for example the Windows Forms PictureBox, and create a new object with special properties and methods speeds program development and adds to program efficiency. A recent project highlights how this works.

One of the earliest popular hand-held electronic games was a game called “Simon.” This device consisted of four colored buttons that lit up and beeped in random order. The object of the game was to learn the order and press the buttons in the correct sequence. After each round the device would replay the sounds and add a new button press to the sequence. I recently undertook the task of simulating this game in a computer program. I had in mind a form something like the following:

The first problem was how to make the buttons appear to press in time with the beeps. The solution was to have two images for each button. One would represent the button up and the other would represent the button down. Using a procedural programming method one would have to keep track of both images for each button. The program would then have to load the appropriate image into the button object at the correct time.

While possible this seems cumbersome. Because I was using Visual Basic .NET, a truly object oriented language, it made more sense to have the button keep track of its own images. Not only should the object store its own images but it should also know how to make itself beep and appear to depress. The PictureBox control has most of the properties and methods I needed for this project so I decided to use it as a base class for a new, customized class.

The first step was to create a new class file from the IDE. Open the Project menu and select Add New Class. Make sure the Class template is highlighted and enter your class name as the file name for the new file. I called this class colorButton and had it inherit from the Windows PictureBox as follows:

Public Class colorButton

    Inherits System.Windows.Forms.PictureBox

Once the class was created I added two new properties. I created two private variables to hold the images that would be used to simulate the button being pressed and released.

    Dim myUpImage As Image

    Dim myDownImage As Image

By creating property methods, a programmer is able to add images to these variables either from the property box in the IDE or under program control using assignment statements. The property method for both variables uses both a ‘get’ and a ‘set’ operation as follows.

    Property UpImage() As Image


            Return myUpImage

        End Get

        Set(ByVal Value As Image)

            myUpImage = Value

        End Set

    End Property

With the ability to add images to the control in place, the next step is to have the control use those images. For this project we want a control that will change its appearance and make a noise. Visual Basic .NET supports the Beep statement to create a simple beep. A more advanced project could call a Windows API and have each button have a different sound but for this example we will use the Beep statement to keep things simple.

The beepMe method loads the down image into the image property and refreshes the image. This causes the new picture to appear. Two beeps are used to make a longer beep. Following the beeps, the up image is loaded and the object is refreshed again.

    Sub beepMe()

        Me.Image = myDownImage




        Me.Image = myUpImage


    End Sub

The Sleep method of the Threading object can be used to create a longer pause between image changes if desired. The following statement pauses for 100 milliseconds.


Now that our control is competed, it can be built and added to the toolbox. Use the Build Solution option from the Build menu to create an exe file. From the Tools menu select the Customize Toolbox option. Choose the .NET Framework Components tab and press the Browse button to open a file dialogue box. Use this dialogue box to find the exe you have created. This will normally be in the Debug folder inside the Obj folder in your projects folder. Select this exe file and press the Open button. The new control will be added to your Toolbox under the General section. The new control can be added to your project form like any other object.

Once a new object is placed on your form you will set the Image, UpImage, and DownImage properties. The Image and UpImage properties will generally be set to the same image so that the button appears “up” on the form. All events, properties, and methods that are available to the PictureBox control are available to this control. In addition, this control has the beepMe method that simulates the button depressing and the UpImage and DownImage properties that may be manipulated under program control or though the Properties box.

For my sample application I used different colored shapes with the up image being a light color and the down image being a darker version of the same color. Creativity is the key here and there are many ways to get the effect of a button pressing.

The code sample available here includes a complete, though simple, version of the Simon game using the colorButton control described here.




Copyright Alfred C Thompson II 2006