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:
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
Dim myDownImage As
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
myUpImage = Value
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.
Me.Image = myDownImage
Me.Image = myUpImage
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
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