Xamarin Layout
Xamarin.Forms layouts are used to create user interface to visual structure. Layout is basically a view which is derived from the View.
It acts as a second view container and is used to position and size the child within it. In Xamarin, there are different types of layouts for different purposes.
Following are the most commonly used layouts in Xamarin development.
1. StackLayout
A stack layout places its child elements on a stack. Position is based on a property called "Orientation". It can be either "Horizontal" or "Vertical". And the height and width can be set from a property called "HeightRequest" and "WidthRequest". The image below shows the stack layout.
Here is the code for stack layout
Code
<?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="XamarinApp1.MainPage">
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
<Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!"
FontSize="16" Padding="30,0,30,0"/>
<Label FontSize="16" Padding="30,24,30,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Learn more at "/>
<Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
2. AbsoluteLayout
It is used to position the child relative to its parent, in any specific position. The position can be specified using "Absolutelayout.Layoutbounds", which requires absolute or proportional values for the height, width, X-axis, and Y-axis. And "Absolutelayout.Layoutflags", which indicates which value is proportional.
Code
<AbsoluteLayout>
<Label Text="absLayout" BackgroundColor="Red" TextColor="White" AbsoluteLayout.LayoutBounds="0.5,0,200,200" AbsoluteLayout.LayoutFlags="PositionProportional"></Label>
</AbsoluteLayout>
3. RelativeLayout
A relative layout positions its child element relative to itself or relative to another child element. A position is based on constraints that include a set of properties. The figure shows the relative distribution.
Code
<RelativeLayout BackgroundColor="Black">
<BoxView BackgroundColor="Red" RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Width, Factor=0.4}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.4}">
</BoxView>
<BoxView
BackgroundColor="Green" RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Width, Factor=0.6}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=0.4}">
</BoxView>
<BoxView x:Name="BlueBox" BackgroundColor="Blue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=0.4}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.6}">
</BoxView>
<RelativeLayout x:Name="YellowBox" BackgroundColor="Yellow"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=0.6}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.6}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=BlueBox, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=BlueBox, Property=Height, Factor=1}">
<BoxView BackgroundColor="White"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToView, ElementName=YellowBox, Property=Width,
Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView, ElementName=YellowBox, Property=Height,
Factor=0.4}" HeightRequest="10"
WidthRequest="10">
</BoxView>
</RelativeLayout>
</RelativeLayout>
4. GridLayout
A grid consists of rows and columns and positions its child according to the Row and Column indices. It works like a table. You can also use ColumnSpan and Rowspan on elements. The image below shows the grid.
Code
<Grid BackgroundColor="Black">
<Button Grid.Column="0" Grid.Row="1" Text="AC" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="1" Grid.Row="1" Text="*/-" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="2" Grid.Row="1" Text="%" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="3" Grid.Row="1" Text="/" BackgroundColor="Silver" TextColor="Orange"></Button>
<Button Grid.Column="0" Grid.Row="2" Text="7" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="1" Grid.Row="2" Text="8" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="2" Grid.Row="2" Text="9" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="3" Grid.Row="2" Text="X" TextColor="Orange"></Button>
</Grid>
5. FrameLayout
A frame displays a rectangle around its child. It has various properties like "OutlineColor", "CornerRadius" and "HasShadow". Its default fill is 20 units. The picture shows a frame around the button.
6. ScrollView
Scroll View simply adds scrolling to your page. When elements exceed the size of the page, they cannot be displayed due to the screen size. So Scroll View removes this difficulty and you can scroll vertically, horizontally or both. It depends on how you set the orientation.