Using Stack Layout


Stack is a very useful Layout to pile Blocks on top of each other. Sizing is automatically calculated making it easier to build especially for the phone form factor.



  • Drag & Drop the Blocks to top of the Stack Layout.
  • Select the Unit for each Block so they fill up empty space or have specific sizes.
  • Right Click to access additional Settings, including Deleting a Block.


The Stack Layout allows you to display a sequence of Blocks, stacked vertically, with a variety of ways to specify relative or absolute heights of the individual Blocks. You can add any number of Blocks to the Stack Layout and control the height of each Block independently. The Stack Layout can take up the entire height of the device or just a section of it.

With the Stack Layout there are 4 different ways of specifying length (Length Units) if the "Scrollable" option is not selected. These are Fixed, Percentage, Flexible and Wrap Content. If you make the Block "scrollable" you can only use Fixed and Wrap Content types in the Length Settings. The heights of Blocks in the Stack Layout are determined in the following order:

  • Fixed and Percentage areas are calculated out first.

  • Then Wrap Content, and then the remainder of the height is split among the Blocks that have Flexible selected as their Length Unit.

  • The Blocks on Top are displayed first. If you stack too many Blocks only the Blocks which fit within the size of your Stack Layout will be showing in your View.

Length and Setting

There are 4 ways to set the coordinate of a component in the Stack Layout.

As the name implies, the number given for Length will be used for the number of pixels in height of the Block. The total number of Pixels available is defined by the device screen size. If you enter a fixed number which is too large, the rule above will apply.

The height of the Block is calculated as a percentage of the height of the Stack Layout. If the Layout fills up the entire screen then percentage of the layout equals percentage of the screen.

For example, if the Stack Layout’s height is set to be 200px, a Length of 10% would cause the Block to be 20px. If the height of the Stack Layout is not know to the builder, the Block would be 10% of the height of the Layout at runtime.

The height of the Block is determined dynamically by dividing the remaining height of the Stack Layout among all Blocks with Flex Remainder set as their Length Units after all other Blocks’ heights have been determined. The Length value will determine the specific Block’s effective ratio or weight relative to other Flex Remainder Blocks. If there is no more space remaining in the Layout, then any Blocks using Flex Remainder will not be displayed.

Wrap Content
The height of the Block is determined dynamically based on its contents. For example, the height of a Text Block would vary depending on the number of lines of text it contains. Since the height is being determined dynamically, the value of the Length field is ignored. Not all Blocks can use Flex Content. Currently the HTML Block, Text Block, and any Ad Blocks are supported.


  • If total height of all Blocks exceeds the height of the Stack Layout out then any Blocks that do not fit in the Layout will not be displayed. The Stack Layout will only scroll to display Blocks that are out of bounds if the "Scrollable" checkbox is selected. The Blocks on Top will be displayed first until the length reaches the length of your Stack Layout. If the "Scrollable" checkbox is not selected the Blocks which don't fit will not be shown on the screen.

  • If a “Length” value is not entered, a default value of 10 will be used.