Skip to main content

​
Overview

The TTreeTopBottomAlignChild class arranges child nodes vertically below their parent, with siblings distributed horizontally and centered under the parent node.

​
Class Reference

​
TTreeTopBottomAlignChild

Positions children vertically below parent nodes, with horizontal centering.
This class is defined in the TreeChildManagers unit.

​
Properties

​
HorizMargin
Integer
default:"8"
Horizontal spacing between sibling nodes in pixels.
​
VertMargin
Integer
default:"32"
Vertical spacing between parent and child nodes in pixels.
​
CrossMargin
Integer
default:"8"
Vertical margin for the cross-box (expand/collapse control) in pixels.
​
ToShapeOffset
Integer
default:"-4"
Connection offset from the target shape in pixels.

​
Layout Behavior

The vertical layout algorithm:
  1. Y Position - Children are positioned VertMargin pixels below parent’s bottom edge
  2. X Position - Siblings are centered horizontally under parent’s X center
  3. Spacing - Siblings separated by HorizMargin pixels
  4. Connections - Vertical connector with horizontal distribution to children

​
Visual Description

       Root
        │
    ┌───┴───┐
    │       │
 Child 1  Child 2
    │
 ┌──┴──┐
 │     │
GC1   GC2
With full tree: 
           CEO
            │
    ┌───────┼───────┐
    │       │       │
   CTO     CFO     COO
    │               │
 ┌──┴──┐         ┌──┴──┐
 │     │         │     │
Dev  QA        Ops  Sales

​
Usage

​
Setting Vertical Layout

uses TreeChildManagers;

// Replace default child manager
Tree1.GlobalFormat.ChildManager.Free;
Tree1.GlobalFormat.ChildManager := TTreeTopBottomAlignChild.Create;

​
Customizing Spacing

var
  Manager: TTreeTopBottomAlignChild;
begin
  Manager := TTreeTopBottomAlignChild.Create;
  Manager.VertMargin := 50;    // More vertical space
  Manager.HorizMargin := 20;   // Wider horizontal spacing
  Manager.CrossMargin := 10;
  
  Tree1.GlobalFormat.ChildManager := Manager;
end;

​
Creating an Organization Chart

var
  CEO, CTO, CFO: TTreeNodeShape;
begin
  // Set vertical layout
  Tree1.GlobalFormat.ChildManager.Free;
  Tree1.GlobalFormat.ChildManager := TTreeTopBottomAlignChild.Create;
  
  // Create top-level node
  CEO := Tree1.AddRoot('Chief Executive Officer');
  CEO.Expanded := True;
  CEO.X0 := 300;
  CEO.Y0 := 50;
  
  // Children will be centered below
  CTO := CEO.AddChild('Chief Technology Officer');
  CFO := CEO.AddChild('Chief Financial Officer');
  
  CTO.Expanded := True;
  
  // Next level
  CTO.AddChild('Engineering Manager');
  CTO.AddChild('QA Manager');
end;

​
Connection Style

The vertical layout draws connections with:
  • Main line - Vertical from parent’s bottom edge
  • Branch point - Midpoint between parent and children
  • Horizontal distribution - Lines extend horizontally to each child
  • Entry point - Connects to top edge of child nodes

​
Connection Points

The layout automatically creates connection points:
  1. Start at parent’s bottom edge, horizontally centered
  2. Extend vertically by VertMargin / 2
  3. Branch horizontally to each child’s X center
  4. Extend to child’s top edge with ToShapeOffset

​
Common Use Cases

Organization Charts

Classic top-down company and team hierarchies.

Family Trees

Genealogical charts with parent-child relationships.

Tournament Brackets

Sports tournaments and competition structures.

Classification Trees

Taxonomies and categorization hierarchies.

​
Centering Algorithm

The vertical layout calculates child positions to center them under the parent: 
// Simplified algorithm
1. Calculate total width needed for all children:
   TotalWidth := Sum(Child.Width) + (Count-1) * HorizMargin

2. Find starting X position:
   StartX := Parent.XCenter - (TotalWidth / 2)

3. Position each child:
   For each child:
     Child.X := StartX + offset
     offset += Child.Width + HorizMargin

​
Tips

For wide trees with many siblings, increase HorizMargin or reduce node widths to prevent horizontal overlap.
Set root node position high on the canvas (small Y0 value) to allow room for vertical expansion.
Very wide trees may extend beyond the visible canvas. Consider using Tree1.Zoom property to fit entire tree in view.

​
Comparison with Other Layouts

FeatureVerticalHorizontalExplorer
Expansion DirectionDownwardRightwardRightward
Child AlignmentCenteredCenteredSequential
Default VertMargin3281
Default HorizMargin83219
Best ForOrg chartsFlowsFile trees

Build docs developers (and LLMs) love

Get started for freeTalk to us