Using the Osp.Ui.VerticalBoxLayout or Osp.Ui.HorizontalBoxLayout classes causes the controls in a container to be aligned vertically or horizontally. In case of a vertical box, the directions are TOP_TO_BOTTOM or BOTTOM_TO_TOP, and in case of a horizontal box, LEFT_TO_RIGHT or RIGHT_TO_LEFT.
When a control is added to a container using a box layout, it automatically finds its position inside the container. No explicit method needs to be called as in the case of grid or relative layouts. Depending on the direction mentioned, the first control starts from the top or bottom (in case of vertical box) and from the left or right (in case of horizontal box). The other controls occupy the available space in the same direction.
The following figure illustrates a phonebook of contacts. The red and green lines indicate the horizontal and vertical box layout components, respectively.
Figure: Box layout
When using the box layout, you can also apply the weight property. The weight determines the extra space in the container that the control occupies with respect to its size. The weight property is associated with each control in the box layout. It is a floating point value and has a default weight of 0.0.
For example, consider that a space of 100 pixels is available in a container, and control A is assigned a weight of 3 and control B is assigned a weight of 1. In this case, control A occupies 75 pixels and control B occupies 25 pixels of the remaining available space.