In this hour, you will learn about controls that were first offered in Windows 95:
You will build one sample program in this hour. As each control is discussed, it will be added to the sample project.
When Windows 95 was released, it included a number of brand-new controls. These controls, known collectively as the common controls, added exciting features to the Windows user interface. The controls covered in this book, along with their associated MFC classes, are shown in Table 16.1.
Control | Class |
Image List | CImageList |
List | CListCtrl |
Progress | CProgressCtrl |
Slider (Trackbar) | CSliderCtrl |
Up-down (Spin) | CSpinButtonCtrl |
Tree | CTreeCtrl |
The up-down control, often called the spin control, is a pair of small arrows that resemble the ends of a scrollbar but are smaller. Up-down controls are often used to adjust the value of another control that is associated with the up-down control.
New Term: The control that is paired with the up-down control is known as the buddy control. The buddy control is normally an edit control.
An up-down control can also be aligned horizontally. A horizontal up-down control is not called a left-right control; it keeps its original name.
By default, clicking the up arrow decreases the value of the buddy control, and clicking the down arrow increases the value contained in the buddy control. The up and down arrows work a lot like a scrollbar in a word-processing document--clicking the up arrow moves you to a lower-numbered page, clicking the down arrow moves you to a higher-numbered page. This behavior is confusing to most people; fortunately, it's easy to change, as you see in the section "Changing the Behavior of the Up-Down Control."
Up-down controls are ideal for situations where a set of values can be scrolled by a user. If the user needs to adjust the values by only a few units, an up-down control is perfect because it enables the user to select a new value with only a few mouse clicks.
An up-down control is very easy to use. To use the default functionality of the up-down control, you need to write exactly zero lines of source code! Even the most advanced uses for up-down controls require just a few lines of source code; most of the code is written by ClassWizard.
For the examples created in this hour, you use a dialog box-based project named Controls. This project starts with an up-down control; later in the chapter, you add a slider and a progress control.
To create the Controls project, use AppWizard to create a new project workspace. Select a dialog box-based project and click the Finish button.
Adding an up-down control to the Controls dialog box is just like adding other controls. Open the main dialog box in the dialog box editor by selecting the ResourceView tab in the project workspace and opening the Dialog folder. Open the IDD_CONTROLS_DIALOG by double-clicking the dialog box icon or by right-clicking the icon and selecting Open from the pop-up menu. To place the up-down control, you can either drag and drop the control from the control palette to the main dialog box, or you can select the up-down control on the tool palette using the mouse and then click the desired position in the main dialog box.
Open the Properties dialog box for the up-down control by right-clicking the control and selecting Properties from the pop-up menu. Change the control's resource ID to IDC_SPIN. All other properties should be set to their default values.
As with other controls, up-down controls have properties that you can change using the Developer Studio resource editor. The properties available for an up-down control include the following:
The easiest way to add a buddy control to an up-down control requires no source code; instead, you use the dialog box editor. Follow these steps to associate an edit control with an up-down control:
The IDD_CONTROLS_DIALOG with an up-down control and the buddy edit control is shown in Figure 16.1.
Figure 16.1.
The main dialog box used in the Controls sample program, including the up-down control
and buddy control.
Believe it or not, that's all there is to using an up-down control. If you compile and execute the Controls project, you can use the up-down control to change the value contained in the edit control.
CAUTION: Assigning a tab stop to an up-down control tends to confuse the user. The focus feedback given to the user is very subtle and easily overlooked. Also, the buddy control and up-down button are normally paired into a single logical control. For these reasons, you should not set the tab stop property for the up-down control in most cases.
To set, validate, or retrieve the value of the edit control, use ClassWizard to associate a CEdit object with the edit control or use one of the other techniques discussed in Chapter 6, "Using Edit Controls."
DO/DON'T:
DO associate a buddy control with the up-down control.
DO set a limit for the up-down control.
DO make the buddy control precede the up-down control in the tab order.
DON'T set the tabstop property for the up-down control.
The MFC class CSpinButtonCtrl can be used to manage an up-down control. Use ClassWizard to associate the IDC_SPIN control with a CSpinButtonCtrl object, using the values from Table 16.2.
Control ID | Variable Name | Category | Type |
IDC_SPIN | m_spin | Control | CSpinButtonCtrl |
As discussed earlier, the default behavior for an up-down control is to increment the control if the down arrow is clicked and decrement the control if the up arrow is clicked. You can change this behavior by reversing the range of the up-down control.
To change the range of an up-down control, use the CSpinButtonCtrl's SetRange function.
SetRange has two parameters: the first parameter is the lower-limit value for the control, the second parameter is the upper limit:
m_spin.SetRange( 100, 0 );
To set a new range for the up-down control, add the source code from Listing 16.1 to the CControlsDlg::OnInitDialog member function. This source code should be added just after the // TODO comment.
// TODO: Add extra initialization here
m_spin.SetRange( 0, 100 ); Compile and execute the Controls project. The up-down control increments the edit control when its up arrow is clicked and decrements the edit control when the down arrow is clicked.
New Term: A slider control, also known as a trackbar control, is a control that contains a slide bar that you can move between two points. A slider is used in the Display applet that is part of the Windows Control Panel. The Settings property page uses a slider to set the screen resolution.
The user moves the slide bar by dragging it with the mouse or by setting the keyboard focus to the slider and using the arrow keys on the keyboard. You can create sliders with optional tick marks that help the user to judge the position of the slide bar.
Sliders are useful when a user is asked to select a value within a certain range. A slider gives the user immediate feedback about the control's current value, as well as the value's relationship to the high and low ranges.
Sliders are added to dialog boxes just like other controls; just drag and drop the control from the controls palette to the dialog box. Although you can create a slider from scratch, it's much easier to add one in the Developer Studio dialog box editor.
Open the IDD_CONTROLS_DIALOG resource and add a slider control by dragging a slider control from the control palette and dropping it on the dialog box. Figure 16.2 shows the Controls dialog box after you add the slider control.
Figure 16.2.
The main dialog box from the Controls project after you add a slider.
Open the properties dialog box for the slider control and change the resource ID to IDC_SLIDER. All other properties can remain set to their default values for now. In the next section, you learn about the properties offered for slider controls.
The Properties dialog box for a slider control contains many of the same options offered for up-down controls, as well as a few that are exclusive to slider controls. The available options include the following:
In the next section, you use a slider to control a progress control. To prepare for that example, open the properties dialog box and make sure the following slider properties are selected:
A progress control, also known as a progress bar, is commonly used to indicate the progress of an operation and is usually filled from left to right as the operation is completed. You can also use progress controls to indicate temperature, water level, or similar measurements. In fact, an early term for this type of control was "Gas Gauge," back in the old days when programmers had mules and most Windows programs were written in C.
Progress controls are used in Developer Studio to indicate the progress of saving or loading a project workspace. Progress controls are also used by the Windows Explorer when copying or moving files.
Just a Minute: Progress controls are an easy way to give feedback to the user about the status of a task. Instead of waiting an unknown length of time, the user can see what portion of a job has yet to be completed.
A progress control is added to a dialog box in the same way as the up-down and slider controls discussed earlier. Using the Developer Studio dialog box editor, add a progress control to the Controls project main dialog box. Figure 16.3 shows the main dialog box from the Controls project after the progress control has been added.
Figure 16.3.
The Controls dialog box after adding the progress control.
After you add the control, open the properties dialog box and change the resource ID to IDC_PROGRESS. A progress control doesn't have optional properties other than those available on all controls:
For this example, you can set the progress control properties to their default values.
In this section, you use the IDC_SLIDER slider control to change the value displayed by the progress control. Using ClassWizard, add two new member variables associated with the slider and progress controls to the CControlsDlg class. Use the values from Table 16.3 for the new controls.
Control ID | Variable Name | Category | Type |
IDC_SLIDER | m_slider | Control | CSliderCtrl |
IDC_PROGRESS | m_progress | Control | CProgressCtrl |
The slider and progress controls must be initialized before you can use them. The CProgressCtrl and CSliderCtrl classes each provide a SetRange function that is used to set minimum and maximum values for their respective controls.
m_slider.SetRange( 0, 100 );
The slider also enables tick marks to be placed along the slider control if the Autoticks check box has been selected. Use the SetTicFreq function to specify the distance between each tick mark. To add tick marks every 10 positions, pass a value of 10 to SetTicFreq.
m_slider.SetTicFreq( 10 );
Listing 16.2 contains new source code for the initialization section of OnInitDialog. Add this source code just after the // TODO comment.
// TODO: Add extra initialization here m_spin.SetRange( 0, 100 ); m_slider.SetRange( 0, 100 ); m_slider.SetTicFreq( 10 );
m_progress.SetRange( 0, 100 );
When a slider is moved, it notifies its parent using WM_SCROLL and WM_HSCROLL messages. Because the slider in this example is a horizontal slider, it sends WM_HSCROLL messages to the main dialog box. Using ClassWizard, add a message-handling function to the CControlsDlg class for the WM_HSCROLL message. The source code for the OnHScroll function is provided in Listing 16.3.
void CControlsDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar ) { int nSliderPos = m_slider.GetPos(); m_progress.SetPos( nSliderPos );
} The code in Listing 16.3 is called whenever the trackbar position is changed. The CSliderCtrl::GetPos function is used to collect the current slider position, which is then used to update the progress control using the CProgressCtrl::SetPos function.
Just a Minute: There are many ways to use the progress control. Many times, you will update the progress control after receiving events that you don't have direct control over. For example, when copying a large number of files, your program might update a progress control after copying each file. During an installation, you might want to update a progress control after each phase of the installation is complete.
Compile and run the Controls project. You can adjust the value displayed in the progress control by moving the slider control. The completed project is shown in Figure 16.4.
Figure 16.4.
The finished Controls project.
In this hour, you looked at up-down, slider, and progress controls, three of the simpler controls offered by Windows. You examined the uses for each control and the MFC classes used to interact with them and created a small dialog box-based project that used all three controls.
void CMyDlg::OnBump() { m_progress.OffsetPos(5); }
The Workshop is designed to help you anticipate possible questions, review what you've learned, and begin thinking ahead to putting your knowledge into practice. The answers to the quiz are in Appendix B, "Quiz Answers."
© Copyright, Macmillan Computer Publishing. All rights reserved.