The Stack Layer is a container that automatically arranges its child layers in a single row or column. Use it to build lists, card strips, or vertically stacked sections without manually positioning each item.

Overview #

• Stacks place children in order, one after another, based on the Orientation you choose (Horizontal or Vertical).
• The stack can control child alignment on one axis so items line up cleanly.
• Reordering items in the Layers Tree changes their visual order in the Stack.

This Layer can be created with the “Stack Children Vertically or Horizontally” tool in the Tool Select Toolbar.

Properties #

This Layer supports all of the universal Layer properties along with some of its own.

Background #

This property is of the Brush Property type, which allows for color and visual styling of the Layer.

Defines the brush used to fill the area specified by the Width and Height of the Layer.

Opacity Mask #

This property is of the Brush Property type, which allows for color and visual styling of the Layer.

Applies a mask effect over the stack’s rendered content to control how it blends or fades. This can be used to create gradient transparency, fade effects, or highlight shapes.

Horizontal Content Alignment #

How the stack aligns its children horizontally (applied by the stack to rectangle-type children).

When Orientation = Horizontal, the stack controls each child’s Horizontal Alignment and disables that alignment setting in the child.

Vertical Content Alignment #

How the stack aligns its children vertically (applied by the stack to rectangle-type children).

When Orientation = Vertical, the stack controls each child’s Vertical Alignment and disables that alignment setting in the child.

Visible Items #

Maximum number of children to show from the start of the list, per sibling order.

Any children beyond this count will not be visible in the Layout.

Orientation #

Choose how children are laid out:

• Horizontal:
  • Children flow from left to right.
• Vertical:
  • Children flow from top to bottom.

NOTE: Changing this orientation will not automatically re-position child Layers as if a rotation was applied. This setting controls how child Layers are fundamentally ordered, while the size and alignment of the child Layers must be adjusted to work properly with the orientation.

How Stacking Works #

Order & Flow

• Visual order follows the Layers Tree sibling order for the Stack’s children.
• Orientation decides direction (Horizontal or Vertical).

Moving Items

• Dragging/reordering one item in the stack moves it (and its descendants) in the flow.
• Children are only visible within the bounds of their parent.

Automatic Spacing

• Whether the stack performs automatic spacing is tied to its alignment rules.
• If the stack is set to Stretch on the relevant axis, there is no automatic spacing (children are stretched to fill rather than spaced out).
• Otherwise, the stack positions items sequentially with gaps determined by your Layer sizes/margins.

Visibility Control

• The stack can constrain which children are shown via Visible Items (others are not rendered by the stack).

Adding Items #

• Drop position = final position.
  • When you drop a Layer onto a specific child in the stack, the new Layer is inserted at that spot, and the target item is pushed forward in the flow.
• Top-most inserts.
  • Adding at the top level inserts at the start of the stack. An initial offset may be applied; set the item’s Y (vertical) or X (horizontal) to “0” (or any value you prefer) to adjust.
• Each new child inherits the stack’s relevant content alignment and the stack disables that alignment field in the child.

Removing Items #

• Delete within the stack shifts remaining items up to fill the gap (descendants follow their parent).

Tips #

• Use Visible Items to prototype or paginate long lists without duplicating Layouts.
• For even spacing, avoid Stretch on the axis you want spaced; for “fill the rail” Layouts, use Stretch.