Control Sizing and Layout

Every control is contained in some other control, except the top level control, which is owned by the "page" (and is sized explicitly to the available page size automatically)

Containers:

• Single: ScrollView, Border, ListView (item)
• Multiple: StackPanel, Canvas (ignores margins, alignment), Grid (to be implemented)

!!! Document top level control logic (Depends on whether your top level "elements" attribute has more than one child? Always get the scroller?)

Size

Every control has a size, as specified in its height and width attributes.

• If a dimension is unspecified, the control will size to the minimum size possible to contain its contents ("wrap contents" sizing), whether that contents is its own intrinsic contents, such as the text in a text control, or that contents consists of other controls, such as the child controls in a stack panel.
• If dimension is star ("*"), then the control will expand to fill its container ("fill parent" sizing). Note that this will not cause a parent container to expand to accommodate content that could grow larger than the parent; it will only allocate an amount of space (limited to the size of the parent) that the child can use. This is true even if the parent size is unspecified ("wrap content") - A "fill parent" child will not cause a "wrap content" parent to grow to contain it.

Alignment

Every control is aligned to its parent

• horizontalAlginment: Left, Center, Right - default: Left
• verticalAlignment: Top, Center, Bottom - default: Top

Note: A star size (fill parent) can be considered the equivalent of a "stretch" alignment

!!! Control min/max size (do we even need this concept? - not currently supported on all platforms)

Margins

Every control may have margins (in all four directions), which must be obeyed by parent

• Note: Case of margins and flexible sizing in scroll control is complex (currently margins not obeyed)

Flexible space allocation

For containers that can contain multiple controls (stack panel only, for now), any extra space is divided between any "star sized" children based on their specified weight.

A dimension specified as "*" will have a weight of 1. If a quantity precedes the star size, then that quantity specifies the weight. For example, "3*" specifies a weight of 3. Each control gets a proportion of the space equal to the proportion of their specified weight to the total of all specified weights.

Alignment in stack panel

For stack panel, alignment makes sense in the opposite dimension as orientation.

For example, in a vertical stack panel each item may be horizontally aligned left, center, or right, or might have a width of "*" to indicate that it should stretch to fill the panel horizontally.

But in the vertical dimension (the dimension in which the items are "stacked"), alignment makes no sense (the whole point is to stack the items vertically with no space between them, other than any item margins). The exception to this would be for star sizing (where you aren't using alignment to specify where the control should fit within the available space, you're just indicating that you want to consume the extra space, and the control is going to consume all of it). Similar logic applies to things like list views, where items are arranged vertically and thus vertical alignment and/or star height do not make sense.

Sample:

{ control: "stackpanel", width: "*", height: "*", margin: { top: 10, left: 10, right: 10 }, orientation: "Vertical", contents: [
    { control: "text", value: "Caption", fontsize: 10, foreground: "Red" },
    { control: "rectangle", height: "*", width: "*", fill: "Green" },
    ]
},