VB2022 VB2019 VB6 VB Sample Code About Us

Lesson 3 Enhancing the UI


In this lesson, we shall enhance the UI by adding controls from the toolbox to the default Form. Controls are objects that consist of three elements: properties, methods, and events. The most common controls are the button, label, text box, list box, combo box, PictureBox, checkbox, radio and more. We can make the controls visible or invisible at runtime. However, some controls will only run in the background and invisible at runtime, one such control is the timer. To add a control to the Form, just drag the control from the toolbox and drop it onto the Form. You can drag the control around the form and also resize it.

3.1 The Toolbox

The Toolbox is usually is hidden when you start Visual Basic 2022. You can click View on the menu bar and then select Toolbox to reveal the toolbox. Besides that, you can also use shortcut keys Ctrl+Alt+x to bring out the toolbox.  You can drag and dock the Toolbox around the IDE. It is docked at the left of the IDE window, as shown in Figure 3.1.
Figure 3.1: Visual Basic 2022 IDE Toolbox

You can change the position of the toolbox by dragging it to 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 that appears as a tabbed document with the default Form is as shown in Figure 3.2.
Figure 3.2: Toolbox appears as a tabbed document
 

In addition, you may also pin the toolbox to the sidebar 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 in Visual Basic 2022 IDE is entirely up to you but I strongly suggest that you place the toolbox alongside or at the bottom of the default form so that it is easy for you to add controls from the toolbox into the form. You should never cover the form with the toolbox because it will be difficult to add controls to the form.

3.2 Designing the UI of a Picture Viewer

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 change the background color using BackColor Property. 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. The UI is as shown in Figure 3.3.

Figure 3.3: The Picture Viewer UI


❮ Previous lesson Next lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy