Summary of Chapter 14. Absolute layout
- PDF for offline use:
- Related Articles:
- Related Samples:
- Related Links:
Let us know how you feel about this.
last updated: 2016-10
AbsoluteLayout derives from
Layout<View> and inherits a
AbsoluteLayout implements a layout system that requires the programmer to specify the positions of its children and, optionally, their size. The position is specified by the upper-left corner of the child relative to the upper-left corner of the
AbsoluteLayout in device-independent units.
AbsoluteLayout also implements a proportional positioning and sizing feature.
AbsoluteLayout should be regarded as a special-purpose layout system to be used only when the programmer can impose a size on the children (for example,
BoxView elements) or when the element's size doesn't affect the positioning of other children. The
VerticalOptions properties have no effect on children of an
This chapter also introduces the important feature of attached bindable properties that allow properties defined in one class (in this case the
AbsoluteLayout) to be attached to another class (a child of the
AbsoluteLayout in code
You can add a child to the
Children collection of an
AbsoluteLayout using the standard
Add method, but
AbsoluteLayout also provides an extended
Add method that lets you specify a
Add method requires only a
Point, in which case the child is unconstrained and sizes itself.
You can create a
Rectangle value with a constructor that requires four values—the first two indicating the position of the upper-left corner of the child relative to its parent, and the second two indicating the child's size. Or you can use a constructor that requires a
Point and a
Add methods are demonstrated in AbsoluteDemo, which positions
BoxView elements using
Rectangle values, and a
Label element using just a
The ChessboardFixed sample uses 32
BoxView elements to create the chessboard pattern. The program gives the
BoxView elements a hard-coded size of 35 units square. The
AbsoluteLayout has its
VerticalOptions set to
LayoutOptions.Center, which causes the
AbsoluteLayout to have a total size of 280 units square.
Attached bindable properties
It is also possible to set the position and, optionally, the size of a child of an
AbsoluteLayout after it has been added to the
Children collection using the static method
AbsoluteLayout.SetLayoutBounds. The first argument is the child; the second is a
Rectangle object. You can specify that the child sizes itself horizontally and/or vertically by setting width and height values to the
The ChessboardDynamic sample puts the
AbsoluteLayout in a
ContentView with a
SizeChanged handler to call
AbsoluteLayout.SetLayoutBounds on all the children to make them as large as possible.
The attached bindable property that
AbsoluteLayout defines is the static read-only field of type
AbsoluteLayout.LayoutBoundsProperty. The static
AbsoluteLayout.SetLayoutBounds method is implemented by calling
SetValue on the child with the
AbsoluteLayout.LayoutBoundsProperty. The child contains a dictionary in which the attached bindable property and its value are stored. During layout, the
AbsoluteLayout can obtain that value by calling
AbsoluteLayout.GetLayoutBounds, which is implemented with a
Proportional sizing and positioning
AbsoluteLayout implements a proportional sizing and positioning feature. The class defines a second attached bindable property,
LayoutFlagsProperty, with the related static methods
The argument to
AbsoluteLayout.SetLayoutFlags and the return value of
AbsoluteLayout.GetLayoutFlags is a value of type
AbsoluteLayoutFlags, an enumeration with the following members:
None(equal to 0)
You can combine these with the C# bitwise OR operator.
With these flags set, certain properties of the
Rectangle layout bounds structure used to position and size the child are interpreted proportionally.
WidthProportional flag is set, a
Width value of 1 means that the child is the same width as the
AbsoluteLayout. A similar approach is used for the height.
The proportional positioning takes the size into account. When the
XProportional flag is set, the
X property of the
Rectangle layout bounds is proportional. A value of 0 means that the child's left edge is positioned at the left edge of the
AbsoluteLayout, but a position of 1 means that the child's right edge is positioned at the right edge of the
AbsoluteLayout, not beyond the right edge of the
AbsoluteLayout as you might expect. An
X property of 0.5 centers the child horizontally in the
The ChessboardProportional sample demonstrates the use of proportional sizing and positioning.
Working with proportional coordinates
Sometimes, it's easier to think of proportional positioning differently than how it's implemented in the
AbsoluteLayout. You might prefer to work with proportional coordinates where an
X property of 1 positions the child's left edge (rather than the right edge) against the right edge of the
This alternative positioning scheme can be called "fractional child coordinates." You can convert from fractional child coordinates to the layout bounds required for
AbsoluteLayout using the following formulas:
layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width))
layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))
The ProportionalCoordinateCalc sample demonstrates this.
AbsoluteLayout and XAML
You can use an
AbsoluteLayout in XAML and set the attached bindable properties on the children of an
AbsoluteLayout using attribute values of
AbsoluteLayout.LayoutFlags. This is demonstrated in the AbsoluteXamlDemo and the ChessboardXaml samples. The latter program contains 32
BoxView elements but uses an implicit
Style that includes the
AbsoluteLayout.LayoutFlags property to keep the markup down to a minimum.
An attribute in XAML that consists of a class name, a dot, and a property name is always an attached bindable property.
You can use
AbsoluteLayout to construct an overlay, which covers the page with other controls, perhaps to protect the user from interacting with the normal controls on the page. This program also demonstrates the
ProgressBar, which displays the extent to which a program has completed a task.
The SimpleOverlay sample demonstrates this technique.
The DotMatrixClock sample displays the current time with a simulated 5x7 dot matrix display. Each dot is a
BoxView (there are 228 of them) sized and positioned on the
The BouncingText program animates two
Label objects to bounce horizontally and vertically across the screen.