2.2 Adding Controls to the Form

In section 2.1, we have learned how to build an UI by customizing the default form. Next, we shall continue to build the UI by adding some controls to the form. The controls are objects that consist of three elements, namely properties, methods, and events. We can add them to the form from the Toolbox. Among the controls, the most used ones are button, label, textbox, list box, combo box, picture box, check box, radio button and more. These controls can be made visible or invisible at runtime. However, some controls will only run in the background and never be seen at runtime, one such control is the timer.

The Toolbox is usually hidden when you start Visual Basic 2022 IDE, you must click View on the menu bar and then select Toolbox to reveal the toolbox, as shown in Figure 2.6. You can also use shortcut keys Ctrl+w+x to bring out the toolbox.

Figure 2.6: Toolbox

You can position the Toolbox by dragging it anywhere you like while its status is set to float. You can also dock the toolbox by right-clicking on the toolbox and choose dock from the pop-up menu. The docked Toolbox appears side by side with the Solution Explorer, or as one of the tabbed windows together with the Form Design window and the code window, as shown in Figure 2.7.

Figure 2.7 Toolbox

You can also dock the toolbox at the bottom, below the default form, as shown in Figure 2.8. Further, you may also pin the toolbox to the side bar or the bottom bar by clicking on the pin icon on the menu bar of the toolbox.

How and where you want to position your toolbox is entirely up to you, but we strongly suggest that you place the toolbox alongside or at the bottom of the default form for ease of use. You should never cover the form with the toolbox because it will be difficult to add controls to the form.

Figure 2.8

Adding a control to the form is an easy task, what you must do is double click it or drag it onto the form. You can drag the control around the form and resize it.

To demonstrate how to add the controls and then change their properties, we shall design a picture viewer. First, change the title of the default form to Picture Viewer in its properties window. Next, insert a picture box on the form and change its background color to white. To do this, right click the picture box and select properties in the popup menu, then look for the BackColor Property as shown in the properties window in Figure 2.9.

Finally, add two buttons to the form and change the text to View and Close in their respective properties’ windows. The picture viewer is not functional yet until we write code for responding to events triggered by the user. We will deal with the programming part in the coming chapters.

Figure 2.9

Summary

● In section 2.1, you have learned how to customize the form by changing the values of its properties.

● In section 2.2, you have learned how to add controls to the form and change their properties at design phase and at runtime.

2.2 Adding Controls to the Form