Creating a Row Using RowLayout

This topic describes the steps for creating a row outside a table. To insert a row in a table, see Inserting a Table and Row Using TableLayout and RowLayout.

To insert a row using rowLayout:

In the Design Structure Window of the desired file, locate the parent node in which you wish to insert a row.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the rowLayout component to the parent node.
The rowLayout node is inserted and highlighted under the expanded parent node.
Repeat step 2 to add the number of rows you desire.
To set attributes for a row, do the following:
1. In the Design Structure Window, select a rowLayout node.
2. In the Property Inspector, set the following attributes for the row:
  - hAlign - Enter the default horizontal alignment of cells in this row. The options are center, left, right, start, and end.
  - vAlign - Enter the default vertical alignment of cells in this row. The options are middle, top, and bottom.
  - width - Enter the preferred total width of the row layout. This attribute is ignored when the row layout is inside a table layout.

Tip: You can use rowLayout components in a stackLayout, and then use the stackLayout named child, separator, to add vertical spacing or a dotted line between each row.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Insert rowLayout outside a table -->
  
  <contents>
    <header text="Here are three rows">
      <contents>
        <rowLayout width="60%">
          <contents>
            First Row 
            Second Column
            Third Column 
          </contents>
        </rowLayout>
        <rowLayout width="30%">
          <contents>
            Second Row 
            Second Column
            Third Column 
          </contents>
        </rowLayout>
        <rowLayout width="10%">
          <contents>
            Third Row 
            Second Column
            Third Column 
          </contents>
        </rowLayout> 
      </contents>
    </header>
  </contents>
  
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...