NextLayout6 is one of most powerful and versatile component from NextSuite6. With it users can easily and quickly build an UI found in many popular applications such as Blender3D, Figma, 3DSMax, Unity3d. This kind of UI is usually used in applications that are fairly complex but powerful, and with this UI paradigm they can make complex things easier and faster to work with.

NextLayout6 is also used internally inside our other components for example Columns and Views editors for NextGrid6.

In many ways NextLayout6 expands our other component NextInspector6, but with more flexibility and with more flexible layout.

Purpose

Developers are usually attempting to produce similar UI by nesting dozens of TPanel components. But after some time thr user interface will become slow and hard to maintain, especially when there is a lot of panels and child controls involved.

Reading data (every item can bind to a property), property binding can be harder too.

NextLayout6 is still only one component (one Handle), it’s faster to render and the styling is done on one place. Keyboard support is already built-in and you don't need to set up TabOrder and similar properties.

Items (nodes) hierarchy

Items inside NextLayout6 are organised in a form of hierarchy, similar as how standard TTreeView component does it.

NextLayout6 gives way richer display such as displaying different items in different way, user can also interact with items in different way, not just typing etc.

Elements of a node

Every node consist of the following elements.

1. Toggle button
2. The before area
3. Content
4. The after area

Toggle button

Click on Toggle button changes Expanded property of a node. If the node had children nodes, when set to False they will be hidden.

The before area

Area between toggle and content can display an image and/or text.

The text is specified by TextBefore property and an icon is specified by a ImageIndex property.

Content

Different node types displays content area in own unique way.

The after area

Same as the before area, an icon and/or TextAfter can be placed after the content.

Continue to the design-time tutorial.