Computer Magic Logo
Basic use

Tuesday, May 3, 2016

Published by Aristotelis Pitaridis

The following example displays four colored rectangles on the screen using the Absolute Layout.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.Page1">
  <AbsoluteLayout x:Name="MyAbsoluteLayout">
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0, 0, 200, 200" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="200, 0, 200, 200" />
    <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0, 200, 200, 200" />
    <BoxView Color="Yellow" AbsoluteLayout.LayoutBounds="200, 200, 200, 200" />
  </AbsoluteLayout>
</ContentPage>

The AbsoluteLayout.LayoutBounds property defines the position and the size of the control. The two first values define the position and the next two values define the width and height of the control.