Grid Layout

Note

Only Columns property is supported on Tizen 5.5.

GridLayout is a grid box for the two dimensional layout. It constraints the x and y position, width, and height of the child actors. It positions the children in a grid form, where the size of each column and row is set to the largest size of the cells belonging to their axis.

Two types of properties affect the GridLayout. One is the property for the grid layout and the other is the property that affects the specified child.

The following table describes the properties of GridLayout:

Columns and rows

The Columns and the Rows properties specify the maximum number of cells on a horizontal or vertical axis.

When the Column or Row of child is automatically set without a specified value, the value cannot exceed the number of main-axis cell which is the Columns value on horizontal orientation, or the Rows value on vertical orientation. However, it can be assigned a value that exceeds the number of cross-axis cell.

The following figure shows how to set the Columns and the Rows properties. Since the GridOrientation is set to horizontal, the row index of last item can be 2 that exceeds the Rows property.

                
C#
                

                    
Copy
                    

                
            
View layoutView = new View();
var gridLayout = new GridLayout();
gridLayout.GridOrientation = GridLayout.Orientation.Horizontal;
gridLayout.Columns = 2;
gridLayout.Rows = 1;
layoutView.Layout = gridLayout;

                
pgsql
                

                    
Copy
                    

                
            
<View>
    <View.Layout>
        <GridLayout Columns="2" Rows="1" />
    </View.Layout>
</View>

Grid orientation

The GridOrientation only works when a child is added without the specified Row or Column property.

• On horizontal orientation, the children will automatically occupy empty cells from left to right.
• On vertical orientation, the children will automatically occupy empty cells from top to bottom.

The following figure shows how the GridOrientation property works:

Column spacing and row spacing

The ColumnSpacing and RowSpacing properties are the distance between columns or rows. In order to set the same space between the child, you can use ColumnSpacing and RowSpacing properties instead of setting the same margin for each child.

The following figure shows how the ColumnSpacing and RowSpacing properties work:

The following table describes the properties that affect the specified child:

Column and row

The Column and Row properties specify the cell index of the child. If these properties aren’t assigned, they are automatically set depending on GridOrientation, Columns and Rows.

The following figure shows how to position child on the grid using Column and Row properties:

Column span and row span

The ColumnSpan and RowSpan properties specify the number of cells that the child can occupy. The sum of cell index and cell span should be less than the maximum number of cells specified by Columns or Rows properties.

The following figure shows how to position child on the grid using Column and ColumnSpan properties:

Horizontal stretch and vertical stretch

The HorizontalStretch and VerticalStretch properties define how a child is resized within the space of the cell. The values can be specified as Stretchflags enum:

Horizontal alignment and vertical alignment

The HorizontalAlignment and VerticalAlignment properties specify the alignment for the child within its cells:

Related information

• Dependencies
  • Tizen 5.5 and Higher