Children Layout
Last updated
Last updated
The Children Layout property determines how a container positions its children. The default value is "Regular" which means that children are positioned according to their X Units and Y Units.
Top to Bottom Stack results in the children stacking one on top of another, from top to bottom.
Left to Right Stack results in the children stacking one beside another, from left to right.
Auto Grid Horizontal results in the children being placed in a grid, filling in horizontally first before wrapping to the next row.
Auto Grid Vertical results in the children being placed in a grid, filling in vertically first before wrapping to a new column.
The following shows how to use the ChildrenLayout property to change the default position of a Container's children. The following animation shows the different Children Layouts being set:
Regular layout positions each child independent of every other child. The position of one child does not affect the position other children. This is the default layout for containers.
Top to Bottom Stack results in each child being positioned after its previous sibling vertically. This can be used to create horizontal stacks.
Left to Right Stack results in each child being positioned after its previous sibling horizontally. This can be used to create vertical stacks.
When children stack, each child's X or Y depends on the boundary of its previous sibling. When stacking vertically, the child's Y value begins at the bottom side of the previous item. Similarly, when stacking horizontally, the child's X value begins at the right side of the previous item.
For example, the following image shows a Text object with a Y value of 20. Notice that it is positioned 20 units below the item above it.
This effect is easy to notice when dragging an object inside a stack, as shown in the following animation:
If instances are stacked in a container, the stacking controls the instance values based on the direction of the stack. Containers with a Top to Bottom Stack control the Y value of their children. Similarly, Containers with a Left to Right Stack control the X value of their children. The position value which is not controlled by the stack can be changed freely without any impact on the stacking.
For example, if a container stacks its children using a Top to Bottom Stack, the children in the stack are free to change their X values. The following animation shows how children can be left, center, or right anchored (which changes their X Units and X Origin) without affecting the other children in the stack.
An object will stack only if its position unit values are top or left for vertical or horizontal stacks. For example, if a child is part of a Top to Bottom Stack, it will only stack if its Y Units is set to Pixels from Top. Otherwise it ignores its parents stacking behavior.
In general this behavior can cause unexpected behavior, especially if additional siblings follow the child which is not using the default Pixels from Top or Pixels from Left, so changing this value on the primary stacking direction is not recommended.
Top to Bottom and Left to Right stacks separate their children using the Stack Spacing property. For more information, see the Stack Spacing page.
In most cases children which are stacked should use a Left X Origin if the parent uses a LeftToRightStack and should use a Top Y Origin if the parent uses a Top To Bottom Stack.
For example, consider a parent which contains two children - a blue and a red rectangle.
In the image shown above, the red rectangle is positioned directly to the right of the blue rectangle. Notice that if the red rectangle's X Origin is changed to Center, the red rectangle overlaps the blue rectangle.
If the red rectangle's X Origin is changed to Right, then its right side will align with the right side of the blue rectangle, resulting in the red overlapping the blue completely. In this case the stacking is essentially cancelled out by the X Origin.
This overlapping may not be desirable, so keep this in mind when changing a stacked child's origin.
The Wraps Children property controls how stacking behaves beyond boundaries. For more information, see the Wraps Children page.
Children of a container which uses the TopToBottomStack or LeftToWriteStack will be ordered according to their order in the tree view on the left. By default this is the order in which the children are added to a parent container.
Children can be reordered using the right-click menu on an instance.
Alternatively, children order can be changed by clicking on the item in the tree view, holding down the ALT key, then pressing the up or down arrows.
Auto Grid Horizontal and Auto Grid Vertical layouts result in each child of the container being placed in its own cell. All position and size values are relative to the entire cell, so children can expand to fill their cell or be positioned according to any side or corner.
The following shows a container with an Auto Grid Horizontal and Vertical Cells of 2, resulting in a 2x2 grid. As children are added to the container through copy/paste, each child is placed in its own cell.
The number of cells is controlled by the Auto Grid Horizontal Cells and Auto Grid Vertical Cells. Increasing the number of cells results in the rows or columns adjusting automatically.
Each child occupies one cell, and the order of the children controls the order of the placement in grids. The first child occupies the top-left row. If using Auto Grid Horizontal, each child is placed to the right of its preceding sibling, wrapping to the next line when reaching the end of a row. If using Auto Grid Vertical, each child is placed below its preceding sibling, wrapping to the next column when reaching the end of a column.
Children can be reordered by using the alt+arrow key in the tree view, resulting in reordering just like when using a stacking Children Layout.
Children treat their particular cell in the grid as their parent, so any sizes or positions will be based on their parent cell. In other words, if a child's WidthUnits is set to RelativeToContainer, the container in this case is the cell, not the entire Container instance.
If additional children are added beyond the number of cells in a grid, additional children will spill over the bounds of the grid. The following animation shows a 3x3 grid using Auto Grid Horizontal. As more children are added, additional rows are added below the bounds of the grid.
When using Auto Grid Horizontal, the number of columns is fixed, but additional rows can be added beyond the bounds of the container.
When using Auto Grid Vertical, the number of rows is fixed, but additional columns can be added beyond the bounds of the container.
