📄 ch16.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Symantec Visual Page Mac 1.1">
<TITLE>Teach Yourself Visual C++® 5 in 24 Hours -- Hour 16 -- Up-Down, Progress, and Slider Controls</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
<H1 ALIGN="CENTER"><IMG SRC="../button/sams.gif" WIDTH="171" HEIGHT="66" ALIGN="BOTTOM"
BORDER="0"><BR>
<FONT COLOR="#000077">Teach Yourself Visual C++® 5 in 24 Hours</FONT></H1>
<CENTER>
<P><A HREF="../ch15/ch15.htm"><IMG SRC="../button/previous.gif" WIDTH="128" HEIGHT="28"
ALIGN="BOTTOM" ALT="Previous chapter" BORDER="0"></A><A HREF="../ch17/ch17.htm"><IMG
SRC="../button/next.gif" WIDTH="128" HEIGHT="28" ALIGN="BOTTOM" ALT="Next chapter"
BORDER="0"></A><A HREF="../index.htm"><IMG SRC="../button/contents.gif" WIDTH="128"
HEIGHT="28" ALIGN="BOTTOM" ALT="Contents" BORDER="0"></A>
<HR>
</CENTER>
<H1 ALIGN="CENTER"><FONT COLOR="#000077">- Hour 16 -<BR>
Up-Down, Progress, and Slider Controls</FONT></H1>
<P>In this hour, you will learn about controls that were first offered in Windows
95:
<UL>
<LI>The up-down or spin control<BR>
<BR>
<LI>The slider control, also known as the trackbar control<BR>
<BR>
<LI>The progress control
</UL>
<P>You will build one sample program in this hour. As each control is discussed,
it will be added to the sample project.
<H2><FONT COLOR="#000077"><B>A Common Control Overview</B></FONT></H2>
<P>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.
<H4><FONT COLOR="#000077">Table 16.1. Some common controls and their MFC classes.</FONT></H4>
<P>
<TABLE BORDER="1">
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><B>Control</B></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><B>Class</B></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">Image List</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CImageList</TT></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">List</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CListCtrl</TT></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">Progress</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CProgressCtrl</TT></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">Slider (Trackbar)</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CSliderCtrl</TT></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">Up-down (Spin)</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CSpinButtonCtrl</TT></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP">Tree</TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CTreeCtrl</TT></TD>
</TR>
</TABLE>
<H2><FONT COLOR="#000077"><B>Using the Up-Down Control</B></FONT></H2>
<P>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.</P>
<P><FONT COLOR="#000077"><B>New Term:</B></FONT><B> </B>The control that is paired
with the up-down control is known as the <I>buddy</I> <I>control</I>. The buddy control
is normally an edit control.</P>
<P>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.</P>
<P>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."</P>
<P>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.</P>
<P>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.
<H3><FONT COLOR="#000077"><B>The Sample Program</B></FONT></H3>
<P>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.</P>
<P>To create the Controls project, use AppWizard to create a new project workspace.
Select a dialog box-based project and click the Finish button.
<H3><FONT COLOR="#000077"><B>Adding an Up-Down Control to a Dialog Box</B></FONT></H3>
<P>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 <TT>IDD_CONTROLS_DIALOG</TT>
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.</P>
<P>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
<TT>IDC_SPIN</TT>. All other properties should be set to their default values.
<H3><FONT COLOR="#000077"><B>Up-Down Control Properties</B></FONT></H3>
<P>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:
<UL>
<LI><I>ID</I> is used for the up-down control's resource ID. A default resource ID,
such as <TT>IDC_SPIN1</TT>, is supplied by Developer Studio.<BR>
<BR>
<LI><I>Visible</I> is used to indicate that the control is initially visible. This
check box is usually checked.<BR>
<BR>
<LI><I>Disabled</I> is used to indicate the control should be initially disabled.
This check box is usually cleared.<BR>
<BR>
<LI><I>Group</I> is used to mark the first control in a group. This check box is
usually cleared.<BR>
<BR>
<LI><I>Tab Stop</I> indicates that this control can be reached by pressing Tab on
the keyboard. This check box is usually left unchecked; this is different from most
controls, due to the fact that the up-down control is typically used to change the
value of the buddy control. Normally the buddy control has the <TT>tabstop</TT> property
enabled.<BR>
<BR>
<LI><I>Help ID</I> indicates that a context-sensitive help ID should be generated
for this control.<BR>
<BR>
<LI><I>Orientation</I> indicates whether the up-down control should be vertical or
horizontal. The default selection is vertical.<BR>
<BR>
<LI><I>Alignment</I> specifies how the buddy control and up-down control are associated
with each other. Possible values are Right, Left, and Unattached. The default value
is Unattached, but in most cases, you should select Left or Right.<BR>
<BR>
<LI><I>Auto Buddy</I> indicates whether the up-down control should use the previous
control in the tab order as its buddy control. This check box is cleared by default
but should be checked in most cases. If this box is not checked, the up-down control
will not be associated with a buddy control. You can still form this association
by command, which is discussed in the next section.<BR>
<BR>
<LI><I>Set Buddy Integer</I> indicates that the up-down control should set the value
of the attached buddy control. This check box is cleared by default but should be
checked in most cases.
<LI><I>No Thousands</I> indicates that no separator should be provided for a value
greater than 1,000 in the up-down control. This check box is usually cleared.<BR>
<BR>
<LI><I>Wrap</I> indicates that the up-down control should "wrap around"
after reaching its minimum or maximum value. If this option is not selected, the
up-down control stops after reaching its minimum or maximum limit. This check box
is usually cleared.<BR>
<BR>
<LI><I>Arrow Key</I> indicates that the keyboard's arrow keys can be used to change
the value of the up-down control. This check box is usually cleared.
</UL>
<H3><FONT COLOR="#000077"><B>Adding a Buddy Control</B></FONT></H3>
<P>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:
<DL>
<DD>1. Add an edit control to the dialog box. Most users expect the up-down control
to be placed against the buddy control; it helps emphasize the connection between
the two controls.<BR>
<BR>
2. Open the properties dialog box for the edit control and change the resource ID
to <TT>IDC_EDIT</TT>. All other properties should be set to their default values.<BR>
<BR>
3. Set the tab order for the edit control so that it is the control immediately before
the up-down control. You can select the tab order by choosing Tab Order from the
Layout menu (or press Ctrl+D). Each control is displayed with a small label that
represents the control tab order. To change the tab order, use the mouse to click
each control in the new tab order sequence.<BR>
<BR>
4. Open the properties dialog box for the up-down control and set the alignment value
to Right. This aligns the up-down control on the right side of the buddy control.<BR>
<BR>
5. Keep the Properties dialog box open and check the Auto Buddy and Set Buddy Integer
check boxes.
</DL>
<P>The <TT>IDD_CONTROLS_DIALOG</TT> with an up-down control and the buddy edit control
is shown in Figure 16.1.</P>
<P><A NAME="04"></A><A HREF="04.htm"><B>Figure 16.1.</B></A> <I><BR>
The main dialog box used in the Controls sample program, including the up-down control
and buddy control.</I></P>
<P>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.
<BLOCKQUOTE>
<P>
<HR>
<B> </B><FONT COLOR="#000077"><B>CAUTION:</B></FONT><B> </B>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.
<HR>
</BLOCKQUOTE>
<P>To set, validate, or retrieve the value of the edit control, use ClassWizard to
associate a <TT>CEdit</TT> object with the edit control or use one of the other techniques
discussed in Chapter 6, "Using Edit Controls."
<BLOCKQUOTE>
<P>
<HR>
<FONT COLOR="#000077"><B>DO/DON'T:</B></FONT><B> <BR>
DO</B> associate a buddy control with the up-down control.<BR>
<B>DO</B> set a limit for the up-down control.<BR>
<B>DO</B> make the buddy control precede the up-down control in the tab order.<BR>
<B>DON'T</B> set the tabstop property for the up-down control.
<HR>
</BLOCKQUOTE>
<H3><FONT COLOR="#000077"><B>Using the <TT>CSpinButtonCtrl</TT> Class</B></FONT></H3>
<P>The MFC class <TT>CSpinButtonCtrl</TT> can be used to manage an up-down control.
Use ClassWizard to associate the <TT>IDC_SPIN</TT> control with a <TT>CSpinButtonCtrl</TT>
object, using the values from Table 16.2.
<H4><FONT COLOR="#000077">Table 16.2. Values used to add a CSpinButtonCtrl member
variable for CControlsDlg.</FONT></H4>
<P>
<TABLE BORDER="1">
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><B>Control ID</B></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><B>Variable Name</B></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><B>Category</B></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><B>Type</B></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDC_SPIN</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>m_spin</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>Control</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><TT>CSpinButtonCtrl</TT></TD>
</TR>
</TABLE>
<H3><FONT COLOR="#000077"><B>Changing the Behavior of the Up-Down Control</B></FONT></H3>
<P>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.</P>
<P>To change the range of an up-down control, use the <TT>CSpinButtonCtrl</TT>'s
<TT>SetRange</TT> function.</P>
<P><TT>SetRange</TT> has two parameters: the first parameter is the lower-limit value
for the control, the second parameter is the upper limit:</P>
<PRE><FONT COLOR="#0066FF"><TT>m_spin.SetRange( 100, 0 );</TT>
</FONT></PRE>
<P>To set a new range for the up-down control, add the source code from Listing 16.1
to the <TT>CControlsDlg::OnInitDialog</TT> member function. This source code should
be added just after the <TT>// TODO</TT> comment.
<H4><FONT COLOR="#000077">TYPE: Listing 16.1. Setting the range for an up-down control.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>// TODO: Add extra initialization here</TT>
</FONT></PRE>
<P><TT>m_spin.SetRange( 0, 100 );</TT> 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.
<H2><FONT COLOR="#000077"><B>Using the Slider Control</B></FONT></H2>
<P><FONT COLOR="#000077"><B>New Term:</B></FONT><B> </B>A <I>slider control</I>,
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.</P>
<P>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.
<H3><FONT COLOR="#000077"><B>Deciding When to Use a Slider Control</B></FONT></H3>
<P>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.</P>
<P>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.</P>
<P>Open the <TT>IDD_CONTROLS_DIALOG</TT> resource and add a slider control by dragging
a slider control from the control palette and dropping it on the dialog box. Figure
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -