Site Map control

Site Map control

This article was submitted .

The Site Map ActiveX control is a fully functional and complete ActiveX control.

The control depicts a spanning tree. It's sort of the same control that the Microsoft Visual InterDev 6.0 uses to design and maintain the navigation structure for the Web site.
The control can be used to build a site diagram. A site diagram contains a visual representation of the nodes in a web site. You can move nodes around using drag'n'drop and expand/collapse sub-trees. You can grab a sub-tree and place it under a different node.

The control comes with a Microsoft Visual Basic 6 test example.

You can download the control here.

Known Bugs

  • Still some flickering when scrolling. Probably needs an off-screen DC.
  • Changing font not using the Property Page causes errors in VB.

The Source Code

The control is written using the Microsoft ATL library's great support classes for ActiveX controls. A few WTL files are also utilized, just to wrap some of the Windows GDI objects.

The "Bull's-Eye" control presented by Brent Rector & Chris Sells in the "ATL Internals" bible contains many hints and guidelines on how to write ActiveX controls. Some of the Site Map control's code and many of the ATL fixes are based on this book.

The drag'n'drop stuff is handled on a transparent child window, which sits on top of the control. This allows the d&d code to operate freely from the control's device context. It uses the almost undocumented Window style WS_EX_TRANSPARENT to keep the window from repainting the client area.

The tree is internally managed as a STL list. This makes it easy to present to the host application through a VB collection, but probably wasn't a good design decision since it frequently needs to be converted to a more tree-like data-structure.

The graph layout algorithm used is a simple one I found at a German University web site. How very nice that they put their white papers on the web.
It makes the graph look very balanced, but also wider than the one used in the InterDev Site Diagram control. It too suffers from the problem that it moves the parent/root nodes when you expand/collapse one of the children.

Code Features

  • Full ActiveX control.
  • Graph layout.
  • Handling drag'n'drop.
  • Rubber band effects.
  • Managing ActiveX properties correctly.
  • Scrolling.
  • Using ICollectionOnSTLImpl to create VB collections.
  • Property pages.

Source Code Dependencies

Microsoft Visual C++ 6.0
Microsoft ATL Library
Microsoft WTL 3.0 Library
STL Container Library

Installation Guide

  • Copy the OCX to a directory of your choice and register it using the REGSVR32 utility or use VB to browse for it.

Useful Links

Graph layout algorithm
Book: ATL Internals by Brent Rector & Chris Sells
My other Visual Basic components

Download Files  This software is free!

DownloadOCX File (72 Kb)
Source Code (63 Kb)

To the top