Xamarin.Forms Guides | Samples

Xamarin.Forms.AbsoluteLayout Class

Positions child elements at absolute positions.

See Also: AbsoluteLayout

Syntax

public class AbsoluteLayout : Layout<View>

Remarks

Application developers can control the placement of child elements by providing proportional coordinates, device coordinates, or a combination of both, depending on the AbsoluteLayoutFlags values that are passed to AbsoluteLayout.SetLayoutFlags method. When one of the proportional AbsoluteLayoutFlags enumeration values is provided, the corresponding X, or Y arguments that range between 0.0 and 1.0 will always cause the child to be displayed completely on screen. That is, you do not need to subtract or add the height or width of a child in order to display it flush with the left, right, top, or bottom of the AbsoluteLayout. For width, height, X, or Y values that are not specified proportionally, application developers use device-dependent units to locate and size the child element.

The following example shows how to use an AbsoluteLayout with proportional position arguments.

C# Example


    Label header = new Label
    {
        Text = "AbsoluteLayout Demo",
        FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
        HorizontalOptions = LayoutOptions.Center
    };

    AbsoluteLayout simpleLayout = new AbsoluteLayout
    {
        BackgroundColor = Color.Blue.WithLuminosity(0.9),
        VerticalOptions = LayoutOptions.FillAndExpand
    };

    topLeftLabel = new Label
    {
        Text = "Top Left",
        TextColor = Color.Black
    };

    centerLabel = new Label
    {
        Text = "Centered",
        TextColor = Color.Black
    };

    bottomRightLabel = new Label
    {
        Text = "Bottom Right",
        TextColor = Color.Black
    };

    // PositionProportional flag maps the range (0.0, 1.0) to
    // the range "flush [left|top]" to "flush [right|bottom]"
    AbsoluteLayout.SetLayoutFlags(bottomRightLabel,
        AbsoluteLayoutFlags.PositionProportional);

    AbsoluteLayout.SetLayoutBounds(topLeftLabel,
        new Rectangle(0f,
            0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

    AbsoluteLayout.SetLayoutFlags(centerLabel,
        AbsoluteLayoutFlags.PositionProportional);

    AbsoluteLayout.SetLayoutBounds(centerLabel,
        new Rectangle(0.5,
            0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

    AbsoluteLayout.SetLayoutFlags(bottomRightLabel,
        AbsoluteLayoutFlags.PositionProportional);

    AbsoluteLayout.SetLayoutBounds(bottomRightLabel,
        new Rectangle(1f,
            1f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

    simpleLayout.Children.Add(topLeftLabel);
    simpleLayout.Children.Add(centerLabel);
    simpleLayout.Children.Add(bottomRightLabel);

The code sample below shows how to place two labels by specifying device-dependent units.

C# Example


    AbsoluteLayout simpleLayout = new AbsoluteLayout
    {

        BackgroundColor = Color.Blue.WithLuminosity(0.9),
        VerticalOptions = LayoutOptions.FillAndExpand
    };

    Label header = new Label
    {
        Text = "Device Units Demo",
        TextColor = Color.Black,
        FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
    };

    topLeftText = new Label
    {
        Text = "Left",
        TextColor = Color.Black
    };

    AbsoluteLayout.SetLayoutFlags(topLeftText,
        AbsoluteLayoutFlags.None);

    AbsoluteLayout.SetLayoutBounds(topLeftText,
        new Rectangle(0f, 0f, 100f, 50f));

    middleText = new Label
    {
        Text = "Device-dependent location",
        TextColor = Color.Black
    };

    AbsoluteLayout.SetLayoutFlags(middleText,
        AbsoluteLayoutFlags.None);

    AbsoluteLayout.SetLayoutBounds(middleText,
        new Rectangle(100f, 200f, 200f, 50f));

    simpleLayout.Children.Add(topLeftText);
    simpleLayout.Children.Add(middleText);

    }

The following image shows the AbsoluteLayout demo from the FormsGallery sample.

XAML for Xamarin.Forms supports the following attached properties for the AbsoluteLayout class:

Attached PropertyValue
AbsoluteLayout.LayoutBounds

A comma-separated list—possibly with spaces—of four values that specify the bounding rectangle's position and dimensions. The first two values in the list must represent numbers. The latter two values may each either be numbers, or the string "AutoSize". The AbsoluteLayout.LayoutFlags attached property determines how the values in the list are interpreted to create the bounding rectangle.

AbsoluteLayout.LayoutFlags

AbsoluteLayoutFlags enumeration value names: All, None, HeightProportional, WidthProportional, SizeProportional, XProportional, YProportional, or PositionProportional. Application developers can combine any of these flags together by supplying a comma-separated list.

Application developers can use XAML to lay out elements with the AbsoluteLayout class. The example below places a blue BoxView inside an AbsoluteLayout:

XAML Example

<AbsoluteLayout VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand">
        <BoxView    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
                    Color="Blue"
                    AbsoluteLayout.LayoutFlags="All" />
    </AbsoluteLayout>

The AbsoluteLayout class can lay its child elements out in proportional units, device units, or a combination of both. Application developers should remember the following points when specifying a Rectangle structure that will define the layout bounds of a child element:

  • For elements whose height and width fit on the screen, proportional position dimensions in the range [0,1] represent elements that are completely on the screen, regardless of whether the height, width, or both are specified in device or proportional units.
  • The above point means that, to specify an element in the lower right hand corner of the screen and that is half as wide and half as all as the screen, with a AbsoluteLayoutFlags value of All, the application developer would specify "1.0, 1.0, 0.5, 0.5".
  • The app developer can inadvertently cause child elements for which one or both size dimensions were specified proportionally to be displayed partially off the screen, or hidden altogether, by specifying device-unit positions that do not leave enough room for the calculated size of the child.
  • Each part of the bounding Rectangle structure is interpreted according to the AbsoluteLayoutFlags value that controls it. A given rectangle might, for example, have an X-coordinate that is in device units, a Y-coordinate that is in proportional units, a height that is in proportional units, and a width that is in device units, or any other combination of device and proportional units.
  • Rectangles that, when interpreted by using the current AbsoluteLayoutFlags set on the child, represent bounding boxes that are partially or wholly off-screen—for example, by having a width that is larger than the screen width—may give unexpected results.

Requirements

Namespace: Xamarin.Forms
Assembly: Xamarin.Forms.Core (in Xamarin.Forms.Core.dll)
Assembly Versions: 1.0.0.0, 1.1.0.0, 1.2.0.0, 1.3.0.0, 1.4.0.0, 1.5.0.0, 2.0.0.0

The members of Xamarin.Forms.AbsoluteLayout are listed below.

See Also: Inherited members from Xamarin.Forms.Layout<Xamarin.Forms.View>

Public Constructors

Initializes a new instance of the AbsoluteLayout class.

Public Fields

static readonly
LayoutBoundsPropertyBindableProperty. Implements the attached property that represents the layout bounds of child elements. Bindable at run time with the string "LayoutBounds". See Remarks.
static readonly
LayoutFlagsPropertyBindableProperty. Implements the attached property that contains the AbsoluteLayoutFlags values for child elements.

Public Properties

[read-only]
static
AutoSizeDouble. A value that indicates that the width or height of the child should be sized to that childs native size.
[read-only]
ChildrenAbsoluteLayout.IAbsoluteList<View>. Gets the collection of child elements of the AbsoluteLayout.

Public Methods

static
GetLayoutBounds(BindableObject) : Rectangle
Gets the layout bounds of bindable.
static
GetLayoutFlags(BindableObject) : AbsoluteLayoutFlags
Gets the layout flags that were specified when bindable was added to an AbsoluteLayout.
static
SetLayoutBounds(BindableObject, Rectangle)
Sets the layout bounds of a view that will be used to size it when it is layed out.
static
SetLayoutFlags(BindableObject, AbsoluteLayoutFlags)
Sets the layout flags of a view that will be used to interpret the layout bounds set on it when it is added to the layout.

Protected Methods

override
LayoutChildren(Double, Double, Double, Double)
Positions and sizes the children of an AbsoluteLayout.
override
OnChildAdded(Element)
Called when a child is added to the AbsoluteLayout.
override
OnChildRemoved(Element)
Called when a child is removed from the AbsoluteLayout.
override
OnSizeRequest(Double, Double) : SizeRequest
Called during the measure pass of a layout cycle to get the desired size of the AbsoluteLayout.