Layout

Layout of the controls is determined by the values of type LayoutDirection. They can be applied to UI action in LINQ expression by using orderby operation or directly by calling OrderBy method. Currently there are following layouts available as static members of LayoutDirection:
  • FromLeft
  • FromRight
  • FromTop
  • FromBottom
  • RowMajorTable(int columns)
  • ColumnMajourTable(int rows)

Table layouts use the argument as one of their dimensions, while the other one is determined by the count of controls being generated. For the first four basic layouts, UI<A> has corresponding methods, e.g. ui.FromLeft().
After layout has been applied to a group of controls, the result is treated as a single control. Therefore the following piece of code:

from c1 in UIM.Button("1")
from c2 in UIM.Button("2")
orderby LayoutDirection.FromTop
from c3 in UIM.Button("3")
orderby LayoutDirection.FromLeft 
...

will produce a row in which first two buttons will have the same total height as the third one.
Size of the controls is calculated based on two properties: minimal size and stretching priority. For basic UI actions the minimal size is usually determined automatically, while stretching priorities can be passed as arguments xStretch and yStretch.
In order to further cuztomize the layout, Linquid provides an action named EmptySpace. It doesn't create any controls but can nevertheless be useful in some cases. For example, here's a way to horizontally align a control to the center of its container:

from _ in UIM.EmptySpace(1.0f, 0.0f)
from c in UIM.Button("1")
from __ in UIM.EmptySpace(1.0f, 0.0f)
orderby LayoutDirection.FromLeft
...

Also note that if a control with zero horizontal stretching priority is placed alone in a column's cell it will be stretched up to the column's width anyway. If the control's width should be kept constant an EmptySpace with nonzero stretching priority placed next to it will help.

Last edited Nov 24, 2008 at 9:55 PM by Yuuki, version 2

Comments

No comments yet.