Xamarin.Forms.AbsoluteLayout Class
Positions child elements at absolute positions.

See Also: AbsoluteLayout Members

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 Xamarin.Forms.AbsoluteLayoutFlags values that are passed to AbsoluteLayout.SetLayoutFlags method. When one of the proportional Xamarin.Forms.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 Xamarin.Forms.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 Xamarin.Forms.AbsoluteLayout with proportional position arguments.

C# Example

using System;
using Xamarin.Forms;

namespace AbsoluteLayoutDemo
{
    class AbsoluteLayoutDemoPage : ContentPage
    {
        //Label topLeftText;
        Label topLeftLabel, centerLabel, bottomRightLabel;

        public AbsoluteLayoutDemoPage ()
        {
            Label header = new Label {
                Text = "AbsoluteLayout Demo",
                Font = Font.SystemFontOfSize (NamedSize.Large),
                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);

            // Accomodate iPhone status bar.
            this.Padding = 
                new Thickness (10, Device.OnPlatform (20, 0, 0), 10, 5);

            // Build the page.
            this.Content = new StackLayout {
                Children = {
                    header,
                    simpleLayout
                }
            };

        }
    }
}

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

C# Example

using System;
using Xamarin.Forms;

namespace AbsoluteLayoutDemo
{
    public class AbsoluteLayoutDeviceUnits : ContentPage
    {
        Label topLeftText, middleText;

        public AbsoluteLayoutDeviceUnits ()
        {
            AbsoluteLayout simpleLayout = new AbsoluteLayout {

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

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

            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);

            // Accomodate iPhone status bar.
            this.Padding = new Thickness (10, Device.OnPlatform (20, 0, 0), 10, 5);

            this.Content = new StackLayout {
                Children = {
                    header,
                    simpleLayout
                }
            };
        }
    }
}

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

The Xamarin.Forms.AbsoluteLayout class has the following XAML attached properties:

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

Xamarin.Forms.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 Xamarin.Forms.AbsoluteLayout class. The example below places a blue Xamarin.Forms.BoxView inside an Xamarin.Forms.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 Xamarin.Forms.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 Xamarin.Forms.Rectangle structure that will define the layout bounds of a child element:

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