ch06.htm

delphi自学的好教材！特别适合刚刚起步学习delphi的人员！同样对使用者具有参考价值！

</DL>



<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> After a paste operation, the component just pasted will be selected.
	
<HR>
</P>

</BLOCKQUOTE>


<DL>
	<DT></DT>
	<DD><B>5. </B>Double-click the Brush property in the Object Inspector and change
	its Color property to clBlack. The new shape is now black, but it is on top of the
	original shape. Can't have that!
	<P>
	<DT></DT>
	<DD><B>6. </B>Click the secondary mouse button and choose Send to Back from the context
	menu (you can also choose Edit | Send to Back from the main menu). The black shape
	is moved behind the white shape. You now have a box with a shadow. (As an alternative,
	you could have clicked on the white shape and used Bring to Front to move it on top
	of the black shape.)
	<P>
</DL>

<P>This exercise illustrates two features of the Form Designer. It shows how you
can change the stacking order of controls and how you can use Copy and Paste to copy
components. The original component's properties are copied exactly and pasted in
as part of the pasting process. Each time you paste a component, it is placed below
and to the right of the previous component you pasted.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> If a component that can serve as a container is selected when you
	perform Paste, the component in the Clipboard will be pasted as the container component's
	child. For example, you might want to move a button from the main form to a panel.
	You can select the button and choose Edit | Cut from the main menu to remove the
	button from the form and place it in the Clipboard. Then you can select the panel
	and choose Edit | Paste from the main menu to paste the button onto the panel. 
<HR>


</BLOCKQUOTE>

<P>I don't need to go into much detail on the cut operation. When you cut a component,
the component disappears from the form and is placed in the Clipboard. Later, you
can paste the component onto the form or onto another component such as a Panel component.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> You can also copy a component and paste it into your source code.
	The results will be something like this:</P>
	<PRE>object Edit1: TEdit
  Left = 24
  Top = 16
  Width = 457
  Height = 21
  TabOrder = 0
  Text = `Edit1'
</PRE>
	<PRE>end</PRE>

</BLOCKQUOTE>

<PRE></PRE>


<BLOCKQUOTE>
	<P>This is not code that will compile, but this technique will give you a component's
	size and position as it appears on the form. This information comes in handy when
	you create components on-the-fly at runtime rather than at design time. You can place
	a dummy component visually on the form, get its size and position using Copy and
	Paste, and then delete the component. Then you can write code to create the component
	at runtime and know that it will be properly sized and positioned. 
<HR>


</BLOCKQUOTE>

<P>
<H3><A NAME="Heading9"></A>Sizing Components</H3>
<P>With some components, you drop them on a form and accept the default size. Buttons
are a good example. A standard button has a height of 25 pixels and a width of 75
pixels. For many situations, the default button size is exactly what you want. With
some components, however, the default size is rarely exactly what you need. A Memo
component, for example, nearly always has to be sized to fit the specific form on
which you are working.</P>
<P>
<H4>Sizing by Dragging</H4>
<P>When you select a control, eight black sizing handles appear around the control.
When you place the mouse cursor over one of the sizing handles, the cursor changes
to a double-headed arrow known as the <I>sizing cursor</I>. When you see the sizing
cursor, you can begin dragging to size the control. How the component is sized depends
on which sizing handle you grab.</P>
<P>The sizing handles centered at the top and bottom of the component size it vertically
(taller or shorter). Likewise, the right and left sizing handles size the component
horizontally (wider or narrower). If you grab one of the sizing handles in the component's
corners, you can size both horizontally and vertically at the same time. As with
moving a component, a sizing rectangle appears as you drag. When the sizing rectangle
is the desired size, let go of the mouse button and the component will be resized.
Figure 6.6 illustrates a memo component being sized by dragging; Figure 6.7 shows
the form after the drag operation.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> Sizing applies to visual components only. Nonvisual components appear
	on the form as an icon that cannot be sized. The sizing handles appear on nonvisual
	components and the handles can be dragged, but the result of the dragging operation
	will be ignored. 
<HR>


</BLOCKQUOTE>

<P><A HREF="javascript:popUp('28670606.gif')"><B>FIGURE 6.6.</B></A><B> </B><I>A
memo component being sized.</I></P>
<P><A HREF="javascript:popUp('28670607.gif')"><B>FIGURE 6.7.</B></A><B> </B><I>The
form after sizing the memo component.</I></P>
<P>Groups of controls cannot be sized by dragging. The sizing handles (black squares)
are replaced by selection indicators (gray squares) when you select more than one
component.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> To size all the components in a group at one time, modify the Width
	or Height property in the Object Inspector or use the Size dialog box (the Size dialog
	box is discussed in the next section). All components in the selection will take
	on the new values. 
<HR>
</P>
	<P>
<HR>
<strong>TIP:</strong> To size a control or group of controls by one pixel at a time, hold
	down the Shift key and press any arrow key on the keyboard. The up and down arrows
	size the control vertically and the right and left arrows size it horizontally. Only
	the component's Width and Height properties are affected. The Top and Left properties
	are not modified. 
<HR>


</BLOCKQUOTE>

<H4><BR>
Sizing with the Size Dialog Box</H4>
<P>Another sizing option is the Size dialog box. You can bring up the Size dialog
box by choosing Edit | Size from the main menu. Figure 6.8 shows the Size dialog
box.</P>
<P><A HREF="javascript:popUp('28670608.gif')"><B>FIGURE 6.8.</B></A><B> </B><I>The
Size dialog box.</I></P>
<P>
<PRE><I></I></PRE>
<P>The Size dialog box is used when you want to force a group of controls to the
same width or height. For instance, let's say you have six edit components on a form,
all with different widths. To make the form appear more balanced, you might want
to make all the edit components the same width. First, select the components and
then invoke the Size dialog box. From there you can choose Shrink to smallest (in
the Width column) to make all the components the width of the shortest edit component,
or Grow to largest to make all the components the width of the longest component
in the group. You can also enter an exact width in the Width box, in which case you
would leave the Height set on No change. When you click OK, the components will all
be the same width.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>TIP:</strong> The Size dialog box can also be invoked from the Form Designer context
	menu. 
<HR>


</BLOCKQUOTE>

<H4><BR>
Sizing with the Scale Dialog Box</H4>
<P>Another sizing tool is the Scale dialog box, shown in Figure 6.9. This dialog
box enables you to specify a scaling percentage. To make the components twice as
large, enter 200 in the Scaling factor box. To reduce the components' size by half,
enter 50 in the Scaling factor box. The Scale dialog box is convenient for quickly
changing the size of all the form's components. You can bring up the Scale dialog
box by choosing Edit | Scale from the main menu or Scale from the Form Designer context
menu.</P>
<P>A control can also be sized and moved by using the various Alignment options.
Let's take a look at those in the next section.</P>
<P><A HREF="javascript:popUp('28670609.gif')"><B>FIGURE 6.9.</B></A><B> </B><I>The
Scale dialog box.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<BR>
	<strong>NOTE:</strong> Remember, components can always be moved by modifying their Left
	and Top properties and sized by modifying their Width and Height properties in the
	Object Inspector. 
<HR>


</BLOCKQUOTE>

<H3></H3>
<H3><A NAME="Heading10"></A>Aligning Components</H3>
<P>Regardless of whether you have the Snap to Grid option turned on, you sometimes
need to align components after placing them. Aligning components could mean aligning
several components along a common edge, centering components on the form, or spacing
components. There are two ways to align components:</P>

<UL>
	<LI>Use the Alignment palette and Alignment dialog box.
	<P>
	<LI>Modify a component's Align property.
</UL>

<P>The following sections explain these two methods.</P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> You might have noticed the Alignment property for some components.
	This property pertains only to the way the component's text is aligned (centered,
	right-justified, or left-justified) and has nothing to do with aligning components
	on a form. 
<HR>


</BLOCKQUOTE>

<P>
<H4>The Alignment Palette and the Alignment Dialog Box</H4>
<P>It is often necessary to move or size components relative to the form or relative
to one another. The Alignment palette contains several buttons that aid in that task.
The Alignment dialog box performs the same operations as the Alignment palette, but
in a different format. To display the Alignment palette, choose View | Alignment
Palette from the main menu. Figure 6.10 shows the Alignment palette and describes
each button. If you pause the mouse cursor over a button on the Alignment palette,
a tooltip describing the button will appear.</P>
<P><A HREF="javascript:popUp('28670610.gif')"><B>FIGURE 6.10.</B></A><B> </B><I>The
Alignment palette.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<BR>
	<strong>TIP:</strong> The Alignment palette can save you a lot of work. Don't spend too
	much time trying to get controls to line up exactly. Place the components on the
	form and then use the Alignment palette to position them. 
<HR>


</BLOCKQUOTE>

<P>The Align Left Edges button is used to line up components on their left edges.
Start with a blank form and then do the following:</P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Place five button components vertically on the form without regard
	to their left edges.
	<P>
	<DT></DT>
	<DD><B>2. </B>Select the buttons by dragging a bounding rectangle around them. The
	selection indicators show that all the buttons are selected. The form will look something
	like the one in Figure 6.11.
	<P>
</DL>

<P><A HREF="javascript:popUp('28670611.gif')"><B>FIGURE 6.11.</B></A><B> </B><I>The
form with the buttons randomly placed.</I></P>

<DL>
	<DT><I></I></DT>
	<P>
	<DT><I></I></DT>
	<DD><B>3. </B>Choose View | Alignment Palette from the main menu. The Alignment palette
	is displayed. Move the Alignment palette, if necessary, so that it doesn't obscure
	the form.
	<P>
	<DT></DT>
	<DD><B>4. </B>Click the Align Left Edges button on the Alignment palette. The buttons
	are all lined up.
	<P>
</DL>

<P>See how easy that is? As long as you have the buttons selected, let's look at
another alignment option. The Space Equally Vertically alignment option can now be
used to space the buttons evenly. The buttons should still be selected, so all you
have to do is click the Space Equally Vertically button on the Alignment palette,
and voil&#224;! The buttons are perfectly spaced. The form will now look like Figure
6.12.</P>
<P><A HREF="javascript:popUp('28670612.gif')"><B>FIGURE 6.12.</B></A><B> </B><I>The
form with the buttons aligned and equally spaced.</I></P>


<BLOCKQUOTE>
	<P>
<HR>
<strong>NOTE:</strong> The Space Equally Vertically alignment option spaces the components
	equally between the first component in the column (the top component) and the last
	component in the column (the bottom component). Be sure to set the first and last
	components where you want them before choosing the Space Equally Vertically alignment
	option. This is true of the Space Equally Horizontally alignment option as well.
	
<HR>


</BLOCKQUOTE>