Positioning

By default, every drawable is positioned in the coordinate system of its parent, using absolute coordinates. This means that if a container is positioned at (100,100) and its child at (50,50), its absolute coordinate will be (150,150).

It is perfectly fine to set a position outside the parent, e.g. position (150,150) if the parent has size (100,100).

Anchor and Origin

Anchor and Origin are used to determine where to place a drawable relative to its Parent. The default value for Anchor and Origin are TopLeft, which means that if a drawable is positioned at (0,0), it's top-left corner will be aligned to the top-left corner of its Parent.

The Origin of a drawable indicates which point to position the Drawable with. The Anchor of a drawable indicates where to attach that point to the Parent. The Position of a drawable is an offset to that point, in the coordinate system of the parent.

Some examples:

• Origin=TopLeft and Anchor=TopLeft: The top left of the drawable is attached to the top left of its parent. This is the default, and means the child is inside the parent.
• Origin=Centre and Anchor=Centre: The center of the drawable is attached to the center of its parent. The drawable is perfectly centered in the middle of its parent.
• Origin=CentreLeft and Anchor=CentreRight: The right of the drawable is attached to the left of the parent. This means the drawable is outside the parent, on the left side.

More examples, in image form:

settings	image
Anchor=TopLeft, Origin=Centre
Anchor=CentreRight, Origin=CentreRight
Anchor=BottomRight, Origin=CentreRight

There is an interactive example in the FrameworkExamples project in the GitHub repository.

RelativePositionAxes

The RelativePositionAxes controls the coordinate system for the Position of a CompositeDrawable/Container's Children. By default, its value is Axes.None, implying an absolute coordinate system. It can be set to Axes.X, Axes.Y and Axes.Both, indicating the axes to convert to a relative coordinate system. Under the relative coordinate system, Position indicates the position in the parent relatively, where 1 indicates the Parent's full width/height for X and Y respectively.

As an example, a drawable with Anchor=TopLeft, RelativeSizeAxes=Both and Position=(0.5,0.5) is functionally equivalent to a drawable with Anchor=Centre, RelativeSizeAxes=None and Position=(0,0): both are positioned at the center of their parent.

RelativeChildSize

Contrary to what the name suggests, this property indicates the scale/size of the relative coordinate system and does not influence the draw size of the children. If it is set to 2x2, then the (1,1) position will be where (0.5,0.5) was previously. You are essentially changing the relative coordinate system from 1 by 1 to that value.

RelativeChildSize 1x1, Position (1,0)	RelativeChildSize 0.5x1, Position (0.5,0)	RelativeChildSize 2x1, Position (1,0)

Together with RelativeChildOffset, this can be used to create completely arbitrary coordinate systems.

RelativeChildOffset

If a child has RelativePositionAxes set, then RelativeChildOffset indicates an offset to the (0,0) position. The value set in RelativeChildOffset indicates the new coordinate at the previous (0,0) point.

RelativeChildOffset (0,0)	RelativeChildOffset (-0.2,0.1)	RelativeChildOffset (-1,-1)

Together with RelativeChildPosition, this can be used to create completely arbitrary coordinate systems.