TeeTree nodes are highly customizable visual components. This guide covers all formatting options to create professional-looking tree diagrams.
Basic Colors Background Color
Border Color
Brush Fill
// Simple color Node.Color := clLightBlue; Node.BackColor := clYellow; // Alternative property // Transparent background Node.Transparent := True ;
Node Styles TeeTree supports various built-in shapes through the Style property.
type TTreeShapeStyle = ( tssRectangle, // Default rectangular node tssCircle, // Circular/ellipse tssVertLine, // Vertical line tssHorizLine, // Horizontal line tssLine, // Diagonal line / tssInvertLine, // Diagonal line \ tssDiamond, // Diamond shape tssTriangleTop, // Triangle pointing up tssTriangleBottom, // Triangle pointing down tssTriangleLeft, // Triangle pointing left tssTriangleRight, // Triangle pointing right tssRoundRectangle, // Rounded corners rectangle tssChamfer, // Chamfered corners tssCustom // Custom drawing );
Using Styles Basic Styles
Rounded Corners
Triangles
// Rectangle (default) Node.Style := tssRectangle; // Circle/Ellipse Node.Style := tssCircle; // Diamond Node.Style := tssDiamond;
Gradients Add depth with gradient fills.
Enable Gradient
Configure the gradient properties: Node.Gradient.Visible := True ; Node.Gradient.StartColor := clWhite; Node.Gradient.EndColor := clBlue;
Set Direction
Choose gradient direction: Node.Gradient.Direction := gdTopBottom; // Top to bottom Node.Gradient.Direction := gdBottomTop; // Bottom to top Node.Gradient.Direction := gdLeftRight; // Left to right Node.Gradient.Direction := gdRightLeft; // Right to left Node.Gradient.Direction := gdRadial; // Radial from center
Advanced Options
Fine-tune gradient appearance: // Gradient clipping Node.GradientClip := True ; // Clip to shape (default) Node.GradientClip := False ; // Fill entire bounds // Balance point Node.Gradient.Balance := 50 ; // 0-100, midpoint position // Transparency Node.Gradient.StartColor := ApplyTransparency(clBlue, 50 );
Shadows Add depth with drop shadows.
// Enable shadow Node.Shadow.Visible := True ; // Configure appearance Node.Shadow.Color := clGray; Node.Shadow.Width := 3 ; Node.Shadow.HorizSize := 4 ; // Horizontal offset Node.Shadow.VertSize := 4 ; // Vertical offset // Smooth shadow Node.Shadow.Smooth := True ; Node.Shadow.SmoothBlur := 2 ;
Shadows add visual depth but may impact rendering performance with many nodes.
Transparency Node Transparency
Text Transparency
// Semi-transparent node (0-100%) Node.Transparency := 50 ; // 50% transparent // Fully transparent background Node.Transparent := True ;
Text Formatting Font Properties // Font configuration Node.Font. Name := 'Arial' ; Node.Font.Size := 10 ; Node.Font.Color := clBlack; Node.Font.Style := [fsBold]; // Text effects Node.Font.Shadow.Visible := True ; Node.Font.Outline.Visible := True ; Node.Font.Outline.Color := clWhite;
Text Alignment Horizontal Alignment
Vertical Alignment
Text Offset
Node.HorizTextAlign := htaCenter; // Center (default) Node.HorizTextAlign := htaLeft; // Left align Node.HorizTextAlign := htaRight; // Right align // Or using Text property Node.Text.HorizAlign := htaLeft;
Text Rotation // Rotate text (0-360 degrees) Node.Text.Angle := 45 ; // 45 degree rotation Node.Text.Angle := 270 ; // Vertical text
Text Clipping // Clip text to node bounds Node.Text.ClipText := True ; // Allow text overflow Node.Text.ClipText := False ; // Default
Images Nodes can display images from multiple sources.
Stock Images TeeTree includes built-in stock images:
type TTreeNodeImageIndex = ( tiNone, tiFolderClose, // Closed folder tiFolderOpen, // Open folder tiDesktop, // Desktop icon tiMyPC, // Computer icon tiNetworkNei, // Network tiFloppy3, // Floppy disk tiRecycleBin, // Recycle bin tiHardDisk, // Hard drive tiNetShare, // Network share tiComputer, // Computer tiWorld, // Globe tiFolderOpenClose, // +/- folder tiFolderCloseChecked, // Checked folder tiFolderCloseUnChecked, // Unchecked folder tiChecked, // Checkbox checked tiUnChecked, // Checkbox unchecked tiRadioChecked, // Radio button checked tiRadioUnChecked // Radio button unchecked ); // Use stock image Node.ImageIndex := tiFolderClose;
Custom Images From File
From ImageList
Programmatic
// Load image from file Node.Image.LoadFromFile( 'icon.bmp' ); // Set image properties Node.Image.Transparent := True ; Node.ImageWidth := 32 ; Node.ImageHeight := 32 ;
Image Alignment type TTreeImageAlignment = ( iaAutomatic, // Auto position based on tree layout iaLeftTop, // Top-left corner iaRightBottom, // Bottom-right corner iaLeftBottom, // Bottom-left corner iaRightTop, // Top-right corner iaLeft, // Left side, vertically centered iaTop, // Top side, horizontally centered iaRight, // Right side, vertically centered iaBottom, // Bottom side, horizontally centered iaCenter // Center of node ); // Set alignment Node.ImageAlignment := iaLeft; // Image on left of text
Create checkbox or radio button nodes:
// Checkbox node Node.ImageIndex := tiUnChecked; Node.Checked := False ; // Unchecked state // Toggle checkbox Node.ToggleCheck; // Changes between checked/unchecked // Radio button Node.ImageIndex := tiRadioUnChecked; // Check if node has checkbox if Node.HasCheckBox then ShowMessage( 'Checked: ' + BoolToStr(Node.Checked));
procedure CreateCheckboxNode ; var CheckNode: TTreeNodeShape; begin CheckNode := Tree1. Add ( 'Enable Feature' ); CheckNode.ImageIndex := tiUnChecked; CheckNode.ImageAlignment := iaLeft; CheckNode.AutoSize := True ; end ; procedure Tree1ClickShape (Sender: TTreeNodeShape; Button: TMouseButton; Shift: TShiftState; X, Y: Integer ); begin if Sender.HasCheckBox then Sender.ToggleCheck; end ;
Control the +/- box for expandable nodes:
// Auto display (only when node has children) Node.ShowCross := scAuto; // Default // Always show Node.ShowCross := scAlways; // Never show Node.ShowCross := scNever;
Cursor Customize mouse cursor when hovering:
// Set node cursor Node.Cursor := crHandPoint; Node.Cursor := crCross; Node.Cursor := crHelp; // Set for all nodes for i := 0 to Tree1.Shapes.Count - 1 do Tree1.Shapes[i].Cursor := crHandPoint;
// Create template node TemplateNode := TTreeNodeShape.Create( nil ); try TemplateNode.Color := clLightBlue; TemplateNode.Border.Width := 2 ; TemplateNode.Font.Style := [fsBold]; TemplateNode.Gradient.Visible := True ; // Apply to other nodes for i := 0 to Tree1.Shapes.Count - 1 do Tree1.Shapes[i].AssignFormat(TemplateNode); finally TemplateNode.Free; end ;
// Set global default for new nodes Tree1.GlobalFormat.Color := clLightYellow; Tree1.GlobalFormat.Border.Color := clNavy; Tree1.GlobalFormat.Font.Size := 10 ; // New nodes inherit these settings NewNode := Tree1. Add ( 'Inherits global format' );
Advanced: Custom Drawing For complete control, use custom drawing:
Node.Style := tssCustom; procedure Tree1DrawShape (Sender: TTreeNodeShape; Canvas: TCanvas3D); var R: TRect; begin R := Sender.Bounds; // Custom drawing code Canvas.Brush.Color := clYellow; Canvas.Ellipse(R); Canvas.Pen.Color := clRed; Canvas.Line(R.Left, R.Top, R.Right, R.Bottom); end ;
Node.ImageIndex := tiFolderClose; Node.ImageAlignment := iaLeft; Node.ShowCross := scAuto; Node.AutoSize := True ; Node.Border.Visible := False ; Node.Transparent := True ;
Node.Style := tssRoundRectangle; Node.RoundSize := 8 ; Node.Color := clWhite; Node.Shadow.Visible := True ; Node.Shadow.Color := clGray; Node.Shadow.HorizSize := 2 ; Node.Shadow.VertSize := 2 ; Node.Border.Color := clSilver; Node.Border.Width := 1 ;
Node.Style := tssRoundRectangle; Node.Color := clLightBlue; Node.Border.Color := clNavy; Node.Border.Width := 2 ; Node.Font.Style := [fsBold]; Node.Font.Color := clNavy; Node.AutoSize := True ;
Next Steps 