Communicating with Your Program's User: The User Interface

  • Article

In this lesson, you will learn what a user interface (UI) is, what controls are, and how to add controls to a UI.

In the early days of personal computers, users interacted with programs primarily through a command line. A program would start and then pause to receive user input before continuing. Most of the programs you use today, however, run in one or more windows. These windows enable the user to communicate, or interface, with the program by typing, clicking buttons, choosing items from preset menus, and so forth. In this and subsequent lessons, you will learn how to build your own Windows-based UIs.

Using Forms

Forms are the basic building blocks for your UI. Each form in your program represents a window that appears to users. When working in the Visual Basic IDE (integrated development environment), a form is the designer that you use to design the UI of your application, much the same as you would use Windows Paint to draw a picture.

Controls are used in the designer to create the look of your UI. A control is an object that has a predefined appearance and behavior. For example, a Button control looks and behaves like a push button—when a user clicks it, its appearance changes to show that it has been pressed.

Each control in Visual Basic has its own purpose. For example, a TextBox control is used for entering text, whereas a PictureBox control is used for displaying pictures. There are more than fifty different controls included in Visual Basic; you can also create your own controls known as user controls. You will learn more about each kind of control in later lessons.

When designing your UI, you drag controls from the Toolbox, drop them onto a form, and then position them and resize them to create the desired look. You can further change the appearance by setting properties of forms and controls in the Properties window. For example, forms and most controls have a BackColor property which is used to set their background color.

Properties are also used to define the behavior of a form or control. For example, the ShowInTaskbar property of a form determines whether the form will appear in the Windowstaskbar when the program is running. By using properties, you can customize the look and behavior of your UI.

Try It!

To change the properties of a form

  1. On the File menu, point to New and then click Project.

  2. In the New Project dialog box, in the Templates pane, click Windows Forms Application.

  3. In the Name box, type FirstForm, and then click OK.

    A new Windows Forms project is created. A new form appears in the main window, and its properties are visible in the Properties window in the lower-right corner of the Visual Basic IDE.

  4. Click the form to select it.

  5. In the Properties window, change the Text property to read "My First Form" and then press ENTER.

    The text at the top of the form changes after you enter the new value.

  6. In the Properties window, change the BackColor property to a different color by selecting a color from the drop-down list.

    Notice that the BackColor property is changed through a special interface. This interface enables you to see the color before selecting it, and enables you to choose between colors currently used by your system, standard Web colors, or a more custom color selection. You can also just type the name of the color (for example, Red) into the box in the Properties window.

    Experiment by changing other properties of the form. When you are ready, continue with the next procedure.

Adding Controls to the Form

In this procedure, you will add controls to the form by selecting the control in the Toolbox window, usually found on the left-hand side of the Visual Basic IDE, and then dragging the control onto the form. You will then adjust the controls' properties.

To add controls to the form

  1. From the Toolbox, drag a Button control, a TextBox control, a Label control, and finally a CheckBox control onto the form.

  2. Select the Button control and drag it around on the form to change its location.

    Notice how guidelines appear when you drag it near the other controls. These guidelines can help you position the controls exactly.

  3. Repeat the process with the other controls until the UI looks the way you want it.

  4. Select the Button control, and then drag the sizing handle in its lower-right corner to change its size.

  5. Spend some time experimenting with control properties. Click each control on the form to select it, and then change some of its properties in the Properties window. Properties you might try changing include Font, BackColor, ForeColor, and Text. For more information, see Closer Look: Understanding Control Layout.

  6. Press F5 to run your program. A window appears with the controls you just added. Notice that you can click the button, select and clear the check box, and type in the text box.

Next Steps

In this lesson, you learned how to create a form and add controls to it. You also learned how to change properties of forms and controls in the Properties window. In the next few lessons, you will take a more in-depth look at some of the controls.

Next Lesson: Interacting with the User: Using Buttons

See Also

Concepts

Closer Look: Understanding Properties, Methods, and Events

Other Resources

Creating the Visual Look of Your Program: Introduction to Windows Forms