Anchors

Anchors (left, right, top and bottom) represent the distance between the object and its parent margins. When one of the anchors is present, the dock key can not be used. Depending on the combination of anchors used, other keys may be unusable.

Corner anchors

Corner anchors are cases when the following combinations of anchors are used toghether (left and top), (left and bottom), (right and top) and (right and bottom). When this combinations are used, x and y keys can not be used. Using them will reject the layout. If width or height are not specified , they will be defaulted to 1 character (unless there is a minimum width or minumum height specified for that controls - in which case that limit will be applied).

The combination of anchors also decides how (top,left) and (right,bottom) corners of a control are computed, as follows:

CombinationTop-Left cornerBottom-Right corner
top and left(left, top)(left+width, top+height)
top and right(parentWidth-right-width, top)(parentWidth-right, top+height)
bottom and left(left, parentHeight-bottom-height)(left+width, parentHeight-bottom)
bottom and right(parentWidth-right-width, parentHeight-bottom-height)(parentWidth-right, parentHeight-bottom)

where:

  • parentWidth is the width of the parent control
  • parentHeight the height of the parent control

Examples

LayoutResult
t:10,r:20,w:50,h:20
b:10,r:20,w:33%,h:10
b:10%,l:50%,w:25%,h:10

Using Left-Right anchors

When Left and right anchors are used together, there are several restrictions. First of all, width and x parameters can not be specified. Width is deduced as the difference between parents width and the sum of left and right anchors. Left anchor will also be considered as the "x" coordonate. However, height parameter should be specified (if not specified it will be defaulted to 1 character (unless a minimum height is specified for that controls - in which case that limit will be applied). align paramter can also be specified , but only with the following values: top, center or bottom. If not specified it will be defaulted to center.

Examples

LayoutResult
l:10,r:20,h:20,y:80%,a:b
l:10,r:20,h:100%,y:50%,a:c
l:10,r:20,h:50%,y:0,a:t

Using Top-Bottom anchors

When top and bottom anchors are used together, there are several restrictions. First of all, height and y parameters can not be specified. Height is deduced as the difference between parents height and the sum of top and bottom anchors. Top anchor will also be considered as the "y" coordonate. However, width parameter should be specified (if not specified it will be defaulted to 1 character (unless a minimum width is specified for that controls - in which case that limit will be applied). align paramter can also be specified , but only with the following values: left, center or right. If not specified it will be defaulted to center.

Examples

LayoutResult
t:10,b:20,w:90,x:80%,a:r
t:10,b:20,w:100%,x:50%,a:c
t:10,b:20,w:50%,x:0,a:l

3-margin anchors

When using 3 of the 4 anchors, the following keys can not be used: x, y, align and dock. Using them will reject the layout. The following table reflects these dependencies:

CombinationResult
left and top and right
or
left and bottom and right
height optional (see remarks)

width = parentWidth - (left+right)
top and left and bottom
or
top and right and bottom
width optional (see remarks)

height = parentHeight - (top+bottom)

Remarks

  • if height or width are not present and can not be computed as a difference between two margins, they are defaulted to value 1. If limits are present (min Width or min Height) those limits are applied. This is usually usefull for controls that have a fixed width or height (e.g. a button, a combobox).

The position of the control is also computed based on the combination of the 3 anchors selectd, as shown in the next table:

CombinationTop-Left cornerBottom-Right corner
left and top and right(left, top)(parentWidth-right, top+height)
left and bottom and right(left, parentHeight-bottom-height)(parentWidth-right, parentHeight-bottom)
top and left and bottom(left, top)(left+width, parentHeight-bottom)
top and right and bottom(parentWidth-right-width, top)(parentWidth-right, parentHeight-bottom)

where:

  • parentWidth is the width of the parent control
  • parentHeight the height of the parent control

Examples

LayoutResult
l:10,t:8,r:20,h:33%
l:20,b:5,r:10,h:33%
l:10,t:8,b:15,w:80%
r:30,t:8,b:20%,w:50%%

4-margin anchors

When all of the 4 anchors, the rest of the keys ( x, y, width, height, align and dock) can not be used. Using them will reject the layout.

Example

LayoutResult
l:20,t:7,r:10,b:10