AbsoluteLayout In Xamarin.Forms Application For Android And UWP

AbsoluteLayout is a simple layout of placing each control at an absolute position. AbsoluteLayout positions and sizes child elements proportional to its own size and position or by absolute values. Child views may be positioned and sized using proportional values or static values, and proportional and static values can be mixed.

Before reading this article, please go through the following articles.

1. How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

Reading this article, you can learn How to use AbsoluteLayout in Xamarin Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The following important tools are required for developing UWP,

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)
3. Using Visual Studio 2015 Installer, enable the Xamarin (Cross Platform Mobile development and C#/.NETwhile install/Modify Visual studio 2015.

Now we can discuss step by step app development.

Step 1

Open Visual studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank App (Xamarin.Forms Portable)-> Give the Suitable Name for your App (XamFormAbsLay) ->OK.



Step 2

Choose the Target and minimum platform version for your Universal Windows Project.



Step 3

After that, Visual Studio creates 6 projects and displays Getting Started. Xamarin Page. Now we have to update the Xamarin forms Reference for Portable Project and Xam Form Stack Layout_ Droid project.

We will test Android and UWP. So, we can set the Multiple Startup Projects as XamFormAbsLay.Droid and XamFormAbsLay.UWP(universal Windows)

(Please refer to   How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 4

Add a Xaml Page for AbsoluteLayout Demo, Right click XamFormAbsLay(Portable) project, Select ADD-> NewItem and Select ->CrossPlatform-> FormXamlPage-> Give the relevant name



Step 5

Add the Absolute Layout tag in the in the project and Inside Absolute Layout add 3 Labels and 3 BoxViews.

<AbsoluteLayout>
    <Label Text="Absolute Layout Demo!....." FontSize="20" AbsoluteLayout.LayoutBounds="100,150,250,100" LineBreakMode="WordWrap" />
    <Label Text="Welcome to C Sharp Corner!...." AbsoluteLayout.LayoutBounds="0,1,125,100" LineBreakMode="WordWrap" />
    <Label Text="Welcome to C Sharp Corner!." AbsoluteLayout.LayoutBounds="100,300,200,50" LineBreakMode="WordWrap" />
    <BoxView Color="Green" AbsoluteLayout.LayoutBounds="1,.5, 25, 100" AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Lime" AbsoluteLayout.LayoutBounds="0,.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Maroon" AbsoluteLayout.LayoutBounds=".5,0,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

Step 6

Open (double Click) the file App.cs in the Solution Explorer-> XamFormAbsLay (portable) and set the Root Page,



Step 7

Change the Configuration Manager settings, Go to Build -> Configuration Manager, Uncheck all the Build and deploy options to the iOS, Windows, WinPhone and Check the Droid and UWP



Step 8

Deploy your app in local machine and the output of the XamFormAbsLay App is,



Summary

Now you have  successfully created and tested your AbsoluteLayout in Xamarin Forms application in Cross Platform Application using Visual C# and Xamarin.