Arranging Components Horizontally or Vertically Using FlowLayout or StackLayout

To arrange components horizontally or vertically using flowLayout or stackLayout:

In the Design Structure Window of the desired file, locate the parent node in which you wish to insert flowLayout children or stackLayout children.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the flowLayout component or stackLayout component to the parent node of your choice.
The flowLayout node or stackLayout node is inserted and highlighted under the expanded parent node.
To insert a child component into flowLayout or stackLayout, drag and drop a component from the Component Palette to the flowLayout node or stackLayout node.
Repeat step 3 to add additional indexed children as desired.

Example (UIX XML)


...
<pageLayout>
  ...  
  <!-- Arrange flowLayout child components (horizontal) -->
  <flowLayout> 
    <contents> 
      <image/> 
      <image/> 
    </contents> 
  </flowLayout> 
  
  <!-- Arrange stackLayout child components (vertical)-->
  
  <stackLayout> 
    <contents> 
      <image/> 
      <image/> 
    </contents> 
  </stackLayout> 
  ...
  
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...