DesktopLayoutManager - Xojo Flex Layout Library

A layout manager for Xojo Desktop applications that implements a subset of CSS Flexbox, enabling responsive and adaptive UI design with minimal code.

Overview

DesktopFlexLayoutManager is a custom Xojo class (inheriting DesktopRectangle) that brings flexbox layout capabilities to desktop applications. It automatically positions and sizes UI controls based on configurable layout rules, eliminating manual positioning and complex resize logic.

Key Features

• Flex Direction: Horizontal (Row) and vertical (Column) layouts
• Flex Grow: Proportional dynamic sizing to fill available space
• Justify Content: Main axis alignment (FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, Stretch)
• Align Items: Cross axis alignment (FlexStart, FlexEnd, Center, Stretch)
• Spacing: Configurable gaps and per-side padding
• Visual Designer Support: All properties configurable in the Xojo Inspector
• Pixel-Perfect Rounding: Last grow control absorbs rounding errors for exact fit

Quick Start

// In Window.Opening:
FlexManager.Direction = FlexDirection.Row
FlexManager.Justify = JustifyContent.SpaceBetween
FlexManager.Align = AlignItems.Center
FlexManager.Gap = 10
FlexManager.PaddingLeft = 20
FlexManager.PaddingRight = 20

FlexManager.AddControl(Button1, 0)   // Fixed size (keeps original width)
FlexManager.AddControl(Button2, 1)   // Gets 1/3 of remaining space
FlexManager.AddControl(Button3, 2)   // Gets 2/3 of remaining space
FlexManager.ApplyLayout()

// In Window.Resized / Window.Resizing:
FlexManager.ApplyLayout()

Architecture

DesktopFlexLayoutManager (inherits DesktopRectangle)
+-- Properties
|   +-- Direction (FlexDirection)
|   +-- Justify (JustifyContent)
|   +-- Align (AlignItems)
|   +-- Gap (Integer)
|   +-- PaddingLeft/Top/Right/Bottom (Integer)
+-- Methods
|   +-- AddControl(control, growFactor)
|   +-- SetFlexGrow(control, growFactor)
|   +-- ApplyLayout()
+-- Internal
    +-- ManagedControls() As DesktopUIControl
    +-- FlexGrowMap As Dictionary

Layout Algorithm

The ApplyLayout() method follows a 5-step process:

1. Gather Metrics - Collect visible controls, sum fixed space (grow=0 controls) and total flex grow
2. Calculate Available Space - Determine usable space after subtracting padding and gaps
3. Distribute Flex Grow - Allocate remaining space proportionally to growing controls, with rounding correction on the last grow control to guarantee pixel-exact totals
4. Apply Justify Content - Compute starting offset and dynamic gap (only when no grow is active)
5. Apply Positions & Align Items - Set each control's position on the main axis and alignment on the cross axis

Usage Examples

Horizontal Navigation Bar

navLayout.Direction = FlexDirection.Row
navLayout.Justify = JustifyContent.SpaceBetween
navLayout.Align = AlignItems.Center
navLayout.AddControl(homeButton, 0)
navLayout.AddControl(searchField, 1)   // Grows to fill available space
navLayout.AddControl(userMenu, 0)

Vertical Settings Panel

settingsLayout.Direction = FlexDirection.Column
settingsLayout.Justify = JustifyContent.FlexStart
settingsLayout.Align = AlignItems.Stretch
settingsLayout.AddControl(titleSection, 0)
settingsLayout.AddControl(optionsGroup, 1)   // Grows vertically
settingsLayout.AddControl(buttonBar, 0)

Responsive Direction Switch

If Self.Width > 800 Then
    mainLayout.Direction = FlexDirection.Row
Else
    mainLayout.Direction = FlexDirection.Column
End If
mainLayout.ApplyLayout()

Change Log

Version 1.0.1

• Fixed: Floating-point rounding bug in flex grow distribution. When mixing grow=0 and grow>0 controls, independent Round() calls on each grow control could produce a total that overflowed or underflowed the remaining space by 1+ pixels. The last grow control now absorbs any rounding error to guarantee pixel-exact layout.

Version 1.0.0 - Initial Release

• Flex layout engine with Row/Column directions
• Flex Grow for dynamic proportional sizing
• All Justify Content modes (FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, Stretch)
• All Align Items modes (FlexStart, FlexEnd, Center, Stretch)
• Configurable gaps and padding
• Xojo Inspector integration for visual property editing

Suggested Future Features

• Flex Shrink: Control how items shrink when space is limited
• Min/Max Sizes: Per-control size constraints
• Wrap Support: Multi-line/multi-column layouts on overflow
• Nested Layouts: Layout managers within layout managers
• Align Self: Individual control alignment overrides

Requirements

• Xojo Version: 2025r3.1 or later
• Target Platform: Desktop (macOS, Windows, Linux)
• Dependencies: None (pure Xojo implementation)

License

MIT License. See LICENSE.md for details.