The function implementation of the dialog box
A dialog box is like a container in which you can interact with a dialog box only if you add some controls to the container. Below we will design the previous dialog as shown in Figure 13, which is designed to allow the user to adjust the background color of the view client area, and the effect can be previewed in the rectangular box below.
Figure 13 Design of the Settings dialog box
1. The skills of interface implementation
The controls that are used in the dialog box shown in Figure 13 are: Group boxes, static text, edit boxes, rotate controls, and picture controls.
What needs to be stated is:
① static text, group boxes, and picture controls are static controls that generally do not receive user input or event mappings, where the group box control can artificially divide some controls into a group to make the interface clearer. static text and picture controls are used to display text content and image resources (such as icons, bitmaps, and so on), respectively.
The ② "edit box" is a rectangular window that lets users enter and edit text from the keyboard, allowing users to enter various text, numbers, or passwords, or use it to edit and modify simple text content. When the edit box is active and has the input focus, a flashing caret appears indicating the position of the current insertion point.
③ the "Rotate Control" (also called the Up-down Control) is a pair of arrow buttons that the user clicks to increase or decrease a value. A "rotating control" is usually attached to another control, and the attached control is called the "partner window." Typically, the rotate control and the edit box form a digital edit box for numeric input.
The techniques for implementing the interface are described below:
(1) Almost every control must set its own title (Caption) content. For example, the background color of the group box in Figure 13, the "Red color component (R)" of the static text, and so on. Click the control you want to set, and modify its Caption property contents in the Properties window.
(2) To make the Rotate control and edit box grouped together to become a partner control, you must keep the tab order of the two controls contiguous, and the tab order of the edit box is in front. In the dialog box, the TAB key moves the input focus from one control to another in a sequential order, called the tab order. Because the default Control tab order is the same as the control you add, we add the above control by adding an "edit box" before adding a "rotate control". In addition, you need to set its alignment (attached) property to right-aligned in the Properties window of the rotation control to set the auto Buddy and set Buddy integer properties to True. The alignment (attached) property is used to specify how the rotated control is attached to the partner window in three ways: "Remove attachment", "left" and "right". When the Auto Buddy (auto Partner) property is true, the control that rotates the control automatically before the tab order is its own partner control. When the set Buddy Integer (integer value in the Set Partner window) property is true, clicking the up or down button on the rotated control changes the integer value in the partner window.
(3) In order to be able to preview the display effect, we need a control that can draw graphics. You typically use static text, but the static Edge property is set to true or the sunken property is set to true, which looks like a sinking icing. Of course we can also set the other look.
(4) There is a horizontal line above the Cancel button, which is set with a picture control. To do this, add a picture control, adjust its position and size. In its Properties window, select its Type property as horizontal etching.
(5) for the ID number of the control, although we can use the default identifier, for the sake of easy identification, we reassign the ID number of the control that needs to be manipulated in the program. The following table is the ID number and Caption property of each control that needs to be specified in this example.
| |
id Properties |
| |
idc_ Edit_r |
| |
|
idc_ edit_g |
| |
idc_spin_g | /tr>
| edit box for blue color component |
idc_ Edit_b |
| |
idc_spin_b |
| static text |
idc_draw |
(6) Click the Test button on the Dialog Editor toolbar to eject the actual effect of the dialog box, as shown in Figure 14. Press the ESC key or click OK, Cancel, and so on in the dialog box to exit the dialog box test. It is necessary to note that this dialog box is more effective than the test when running the program in Windows XP.
Figure 14 The effect of the Setup dialog box test