Sizing

The Size of a drawable indicates how large a Drawable should be when drawn on the screen. By default, this is directly translated to pixels on the screen, if Parents have no scaling.

AutoSizeAxes

For composite and container drawables, this indicates that the size of the drawable is automatically calculated based on the size of children. In practice, this means that the Width/Height of a CompositeDrawable/Container is calculated to fit all its children.

Calculation goes roughly like this:

  1. Loop over every drawable in InternalChildren
  2. If the child has matching BypassAutoSizeAxes set, ignore it (e.g. parent has AutoSizeAxes=Both and child has BypassAutoSizeAxes=X, then it is not included for Width calculations)
  3. If the child has matching RelativePositionAxes or RelativeSizeAxes, ignore it.
  4. Take the maximum value for Child.X + Child.Width or Child.Y + Child.Height, and use that for Width or Height.
    • Margin and Padding are also taken into account, but have been omitted here for clarity.

Auto-size calculations as of 2021/7/11 can be found here.

It is worth noting that the parent will not become smaller than 0x0, i.e. it will not get a negative size if all drawables are positioned under 0,0.

The effect of BypassAutoSizeAxes looks like this:

Both Boxes BypassAutoSizeAxes=NoneBlue Box BypassAutoSizeAxes=BothGreen Box BypassAutoSizeAxes=Both

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

The AutoSizeAxes property is only present on CompositeDrawable and Container, not on Drawable. BypassAutoSizeAxes is present on every Drawable.

RelativeSizeAxes

This property indicates how the Size (Width/Height) properties are interpreted. If an axis is not a relative size axis, its Size component is interpreted as a value in pixels (assuming no Scaling of parents). If an axis is a relative size axis, its Size component is interpreted as a fraction of the Size of its Parent.

In practice, this means that if a Drawable has a RelativeSizeAxes of Both and a Size of 1x1, it will grow to fit its parent. If it has a RelativeSizeAxes of X and its Width is 0.5, it will grow to be exactly half the size of its Parent. If the size of the parent updates, the size of the child will automatically update too.