The value TopToBottomStack results in the children stacking one on top of another, from top to bottom.
The value LeftToRightStack results in the children stacking one beside another, from left to right.
The following shows how to use the ChildrenLayout property to stack objects. It begins with a single NineSlice inside of a container called ContainerInstance. The following actions are performed:
When children in a container are stacked, their position values can be used to separate the objects. For example, on a TopToBottomStack, the Y value of each child can be used to separate it from the previous child.
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.
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.