ch19.htm

24小时学会vc++

	<LI><I>Disable Drag Drop</I> prevents drag and drop for items contained in the tree
	view control. This item is usually cleared.<BR>
	<BR>
	
	<LI><I>Show Selection Always</I> uses the system highlight colors for selected items.
	This item is usually cleared.
</UL>

<P>Open the Properties dialog box for the tree view control and change the resource
ID to <TT>IDC_TREE</TT>. All other properties should be set to their default values
except for the following items, which should be checked:

<UL>
	<LI>Has Lines
	<LI>Lines at Root
	<LI>Has Buttons
</UL>

<P>Using ClassWizard, associate a <TT>CTreeCtrl</TT> member variable with the new
tree control, using the values from Table 19.1.
<H4><FONT COLOR="#000077">Table 19.1. Values used to add a CTreeCtrl member variable
for CAboutDlg.</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_TREE</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>m_tree</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>Control</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>CTreeCtrl</TT></TD>
	</TR>
</TABLE>

<H2><FONT COLOR="#000077"><B>Creating an Image List Control</B></FONT></H2>
<P>The version of the tree view control contained in the About dialog box displays
two bitmaps next to tree view items:

<UL>
	<LI>A notebook icon for root-level items
	<LI>A document page icon for second-level items
</UL>

<P>As discussed in Hour 17, &quot;Using Image Lists and Bitmaps,&quot; an image list
can consist of a single bitmap that has one or more segments. The bitmap shown in
Figure 19.5 contains both images used by the tree view control.</P>
<P><A NAME="05"></A><A HREF="05.htm"><B>Figure 19.5.</B> </A><I><BR>
Bitmaps displayed in the tree view control.</I></P>
<P>Use the image editor to create the bitmap in Figure 19.5. Use red as a background
color for the bitmap to make it easier to draw the bitmap transparently. Use the
values from Table 19.2 for the bitmap.
<H4><FONT COLOR="#000077">Table 19.2. Attributes for the image list bitmap used in
TreeEx.</FONT></H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Resource ID</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Height</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Item Width</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Total Width</B></TD>
	</TR>
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDB_TREE</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP">14</TD>
		<TD ALIGN="LEFT" VALIGN="TOP">14</TD>
		<TD ALIGN="LEFT" VALIGN="TOP">28</TD>
	</TR>
</TABLE>

<H2><FONT COLOR="#000077"><B>Modifying the Dialog Box Class</B></FONT></H2>
<P>The <TT>CAboutDlg</TT> class must be modified in order to handle the tree view
control. You must add a total of four new member variables to the <TT>CAboutDlg</TT>
class:

<UL>
	<LI>A <TT>CImageList</TT> variable is used to supply the images displayed next to
	each item in the tree control.<BR>
	<BR>
	
	<LI>A <TT>BOOL</TT> flag is used to indicate that a drag-and-drop operation is in
	progress.<BR>
	<BR>
	
	<LI>An <TT>HTREEITEM</TT> variable refers to an item being dragged.<BR>
	<BR>
	
	<LI>Another <TT>HTREEITEM</TT> variable refers to the current drop target.
</UL>

<P>Add the source code provided in Listing 19.3 to the implementation section of
the <TT>CAboutDlg</TT> class declaration.
<H4><FONT COLOR="#000077">TYPE: Listing 19.3. Additions to the CAboutDlg class declaration.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>// Implementation</TT>
<TT>protected:</TT>
<TT>    CImageList  m_imageList;</TT>
<TT>    BOOL        m_bIsDragging;</TT>
<TT>    HTREEITEM   m_dragItem;</TT>
</FONT></PRE>
<P><TT>HTREEITEM m_dragTarget;</TT> The tree control is initialized when the <TT>CAboutDlg</TT>
class receives the <TT>WM_INITDIALOG</TT> message. Using ClassWizard, add a message-handling
function for <TT>WM_INITDIALOG</TT> and accept the suggested name of <TT>OnInitDialog</TT>.
Add the source code in Listing 19.4 to the <TT>OnInitDialog</TT> member function.
A little cut-and-paste editing can save you some typing here because this source
code is similar to the source code used earlier in Listing 19.1.
<H4><FONT COLOR="#000077">TYPE: Listing 19.4. The CAboutDlg::OnInitDialog member
function.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>BOOL CAboutDlg::OnInitDialog()</TT>
<TT>{</TT>
<TT>    CDialog::OnInitDialog();</TT>
<TT>    m_bIsDragging = FALSE;</TT>
<TT>    m_dragTarget = NULL;</TT>
<TT>    m_dragItem = NULL;</TT>
<TT>    m_imageList.Create( IDB_TREE, 14, 1, RGB(255,0,0) );</TT>
<TT>    m_tree.SetImageList( &amp;m_imageList, TVSIL_NORMAL );</TT>
<TT>    HTREEITEM hChapter;</TT>
<TT>    hChapter = m_tree.InsertItem( &quot;Chapter 1&quot;, 0, 0 );</TT>
<TT>    m_tree.InsertItem( &quot;What&quot;, 1, 1, hChapter );</TT>
<TT>    m_tree.InsertItem( &quot;Why&quot;, 1, 1, hChapter );</TT>
<TT>    m_tree.InsertItem( &quot;How&quot;, 1, 1, hChapter );</TT>
<TT>    hChapter = m_tree.InsertItem( &quot;Chapter 2&quot;, 0, 0 );</TT>
<TT>    m_tree.InsertItem( &quot;What&quot;, 1, 1, hChapter );</TT>
<TT>    m_tree.InsertItem( &quot;Why&quot;, 1, 1, hChapter );</TT>
<TT>    m_tree.InsertItem( &quot;How&quot;, 1, 1, hChapter );</TT>
<TT>    return TRUE;</TT>
</FONT></PRE>
<P><TT>}</TT> There are a few small differences between Listing 19.1 and Listing
19.4. In Listing 19.4, an image list is first created and then associated with the
tree view control by calling the <TT>SetImageList</TT> function. In addition, the
<TT>InsertItem</TT> function uses two extra parameters.</P>
<PRE><FONT COLOR="#0066FF">
<TT>m_tree.InsertItem( &quot;How&quot;, 1, 1, hChapter );</TT>
</FONT></PRE>
<P>As in Listing 19.1, the first parameter is the text label associated with the
tree item. The second parameter is the image index associated with the item when
it's not selected; the third parameter is the selected image index. This enables
you to specify different images for selected and non-selected items. As before, the
last parameter is a handle to the item's parent item, or it can be omitted if the
item is added at the root level.</P>
<P>Compile and run the TreeEx project. The modified TreeEx About dialog box is shown
in Figure 19.6.</P>
<P><A NAME="06"></A><A HREF="06.htm"><B>Figure 19.6.</B> </A><I><BR>
The modified About dialog box from TreeEx.</I>
<H2><FONT COLOR="#000077"><B>Deleting Items from a Tree View Control</B></FONT></H2>
<P>Of course, any control that enables items to be inserted must also enable them
to be removed. The <TT>CTreeCtrl::DeleteItem</TT> member function is used to delete
an item from the tree view control:</P>
<PRE><FONT COLOR="#0066FF"><TT>BOOL fResult = m_tree.DeleteItem(hTreeItem);</TT>
</FONT></PRE>


<BLOCKQUOTE>
	<P>
<HR>
<B> </B><FONT COLOR="#000077"><B>CAUTION:</B></FONT><B> </B>When an item is removed
	from the tree control, any child items that are nested below it are also removed.
	
<HR>


</BLOCKQUOTE>

<P>The return value from <TT>DeleteItem</TT> is <TT>FALSE</TT>, or zero, if the item
could not be deleted, or non-zero if the item was deleted successfully.


<BLOCKQUOTE>
	<P>
<HR>
<B> </B><FONT COLOR="#000077"><B>Time Saver:</B></FONT><B> </B>To delete all the
	items in a tree view control, use the <TT>CTreeCtrl::DeleteAllItems</TT> member function:</P>
	<P><FONT COLOR="#0066FF"><TT>BOOL fResult = m_tree.DeleteAllItems();</TT></FONT>
	
<HR>


</BLOCKQUOTE>

<PRE></PRE>
<P>To show how these functions are used in a real application, add two buttons to
the About dialog box. Figure 19.7 shows the About dialog box after adding Remove
and Remove All buttons.</P>
<P><A NAME="07"></A><A HREF="07.htm"><B>Figure 19.7.</B> </A><I><BR>
The About dialog box after adding new push- button controls.</I></P>
<P>Use the values from Table 19.3 to assign properties to the new controls added
to the About dialog box.
<H4><FONT COLOR="#000077">Table 19.3. Property values for controls added to the About
dialog box.</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>Resource ID</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Caption</B></TD>
	</TR>
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP">Remove button</TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDC_REMOVE</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP">&amp;Remove</TD>
	</TR>
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP">Remove All button</TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDC_REMOVEALL</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP">Remove &amp;All</TD>
	</TR>
</TABLE>
</P>
<P>Use ClassWizard to add message-handling functions for the new controls, as shown
in Table 19.4.
<H4><FONT COLOR="#000077">Table 19.4. Message-handling functions used for the new
controls.</FONT></H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Class Name</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Object ID</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Message</B></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Function</B></TD>
	</TR>
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>CAboutDlg</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDC_REMOVE</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>BN_CLICKED</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>OnRemove</TT></TD>
	</TR>
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>CAboutDlg</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDC_REMOVEALL</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>BN_CLICKED</TT></TD>
		<TD ALIGN="LEFT" VALIGN="TOP"><TT>OnRemoveall</TT></TD>
	</TR>
</TABLE>
</P>
<P>The source code used to implement the <TT>Remove</TT> and <TT>Removeall</TT> functions
is provided in Listing 19.5. Add this source code to the <TT>CAboutDlg::Remove</TT>
and <TT>CAboutDlg::Removeall</TT> functions found in <TT>TreeEx.cpp</TT>.
<H4><FONT COLOR="#000077">TYPE: Listing 19.5. Deleting items from the About TreeEx
dialog box.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>void CAboutDlg::OnRemove()</TT>
<TT>{</TT>
<TT>    HTREEITEM hItem = m_tree.GetSelectedItem();</TT>
<TT>    if(hItem != NULL)</TT>
<TT>    {</TT>
<TT>        VERIFY(m_tree.DeleteItem(hItem));</TT>
<TT>    }</TT>
<TT>    else</TT>
<TT>    {</TT>
<TT>        AfxMessageBox(&quot;Please select an item first&quot;);</TT>
<TT>    }</TT>
<TT>}</TT>

<TT>void CAboutDlg::OnRemoveall()</TT>
<TT>{</TT>
<TT>    m_tree.DeleteAllItems();</TT>
</FONT></PRE>
<P><TT>}</TT> Compile and run the TreeEx project. The modified About TreeEx dialog
box is shown in Figure 19.8. Experiment with removing items from the dialog box.
Note that removing a node at the root level also removes all of its children.
<H2><FONT COLOR="#000077"><B>Tree View Control Notifications</B></FONT></H2>
<P>Like the list view control discussed in Hour 18, tree view controls communicate
with their parent windows using notification messages. In the next section, you learn
about <TT>TVN_BEGINDRAG</TT>, the message used to start a drag-and-drop process.</P>
<P><A NAME="08"></A><A HREF="08.htm"><B>Figure 19.8.</B> </A><I><BR>
The modified About dialog box from TreeEx.</I>
<H3><FONT COLOR="#000077"><B>Adding Drag-and-Drop Functionality to a Tree View Control</B></FONT></H3>
<P>In order to handle drag-and-drop functionality inside a tree view control, you
must handle the following three messages:

<UL>
	<LI><TT>TVN_BEGINDRAG</TT> notifies the tree view control's parent that a drag has
	been started. For this example, you will allow only second-level items to be dragged.<BR>
	<BR>
	
	<LI><TT>WM_MOUSEMOVE</TT> is sent as the mouse is moved. If a drag is in progress,
	the drag image is moved to the new cursor position.<BR>
	<BR>
	
	<LI><TT>WM_LBUTTONUP</TT> is sent as the left mouse button is released. If a drag
	is in progress, the drag is completed by moving the drag item into the new position.
</UL>

<P>Using ClassWizard, add message-handling functions for these messages to the <TT>CAboutDlg</TT>
class, using the values from Table 19.5.
<H4><FONT COLOR="#000077">Table 19.5. Message-handling functions used for drag-and-drop
processes.</FONT></H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" rowspan="1">
		<TD ALIGN="LEFT" VALIGN="TOP"><B>Object ID</B></TD>