Post
Ask Question

Types Of Xamarin Layouts

This article is about Xamarin Layouts that are used to compose the user interface controls into visual structures. 

Target Audience 

People with the basic knowledge of C# and Xamarin

Tools 
 
Visual Studio with Xamarin Installed
 
Layout is basically a view which itself derives from a view. It acts as a container to the other view and is used to position and size the child in it. There are different types of layouts in Xamarin for different purposes. Here, we will discuss about some basic ones which are commonly used. For example -
  1. Stack Layout
  2. Grid Layout
  3. Absolute layout
  4. Relative Layout
  5. Scroll View
  6. Frame
Types Of Xamarin Layouts

StackLayout

Stack Layout positions its child elements in a stack. The position is based upon the property called “Orientation”. It can either be “Horizontal” or “Vertical”. And the height and width can be set from the property called “HeightRequest” and “WidthRequest”. The picture below shows the Stack layout.

Types Of Xamarin Layouts 

XAML Code

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  3.              xmlns:local="clr-namespace:PracApp1"  
  4.              x:Class="PracApp1.MainPage">  
  5.   
  6.     <StackLayout Orientation="Vertical" HeightRequest="100" WidthRequest="100">  
  7.         <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Hello World!"></Label>  
  8.         <Switch HorizontalOptions="Center" VerticalOptions="Center" ></Switch>  
  9.     </StackLayout>  
  10.   
  11. </ContentPage>  

Grid

Grid consists of rows and columns and places its child according to the indexes of Rows and Columns. It works like a table. You can also apply ColumnSpan and Rowspan to the elements. The image below shows a Grid.

Types Of Xamarin Layouts 

XAML Code

  1. <Grid BackgroundColor="Black">  
  2.   
  3.             <Button Grid.Column="0" Grid.Row="1" Text="AC" BackgroundColor="Silver" TextColor="Black"></Button>  
  4.             <Button Grid.Column="1" Grid.Row="1" Text="*/-" BackgroundColor="Silver" TextColor="Black"></Button>  
  5.             <Button Grid.Column="2" Grid.Row="1" Text="%" BackgroundColor="Silver" TextColor="Black"></Button>  
  6.             <Button Grid.Column="3" Grid.Row="1" Text="/" BackgroundColor="Silver" TextColor="Orange"></Button>  
  7.   
  8.             <Button Grid.Column="0" Grid.Row="2" Text="7" BackgroundColor="Gray" TextColor="White"></Button>  
  9.             <Button Grid.Column="1" Grid.Row="2" Text="8" BackgroundColor="Gray" TextColor="White"></Button>  
  10.             <Button Grid.Column="2" Grid.Row="2" Text="9" BackgroundColor="Gray" TextColor="White"></Button>  
  11.             <Button Grid.Column="3" Grid.Row="2" Text="X" TextColor="Orange"></Button>  
  12.   
  13.         </Grid>  

Absolute Layout

It is used to position a child relative to its parent, at any specific position. The position can be given through “Absolutelayout.Layoutbounds” which requires absolute or proportional values of height, width, X-axis, and Y-axis. And “Absolutelayout.Layoutflags” which shows which value is proportional.

Types Of Xamarin Layouts 

XAML Code

  1. <AbsoluteLayout>  
  2.         <Label Text="Calculator" BackgroundColor="Red" TextColor="White" AbsoluteLayout.LayoutBounds="0.5,0,200,200" AbsoluteLayout.LayoutFlags="PositionProportional"></Label>  
  3.     </AbsoluteLayout>     

Relative layout

Relative layout positions its child element relative to itself or relative to another child element. The position is based upon the constraints which includes a set of properties. The image shows the Relativelayout.

Types Of Xamarin Layouts 

XAML Code

  1. <RelativeLayout BackgroundColor="Black">  
  2.         <BoxView BackgroundColor="Red" RelativeLayout.XConstraint="{ConstraintExpression   
  3.             Type=RelativeToParent, Property=Width, Factor=0.4}"   
  4.                  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,  
  5.             Property=Height, Factor=0.4}">  
  6.         </BoxView>  
  7.         <BoxView   
  8.             BackgroundColor="Green" RelativeLayout.XConstraint="{ConstraintExpression   
  9.             Type=RelativeToParent, Property=Width, Factor=0.6}"   
  10.             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,  
  11.             Property=Height,Factor=0.4}">  
  12.         </BoxView>  
  13.         <BoxView x:Name="BlueBox" BackgroundColor="Blue"   
  14.             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,  
  15.             Property=Width, Factor=0.4}"   
  16.             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,  
  17.             Property=Height, Factor=0.6}">  
  18.         </BoxView>  
  19.         <RelativeLayout x:Name="YellowBox" BackgroundColor="Yellow"   
  20.             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,  
  21.             Property=Width, Factor=0.6}"   
  22.             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,  
  23.             Property=Height, Factor=0.6}"  
  24.             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,  
  25.             ElementName=BlueBox, Property=Width, Factor=1}"   
  26.             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView,  
  27.             ElementName=BlueBox, Property=Height, Factor=1}">  
  28.   
  29.             <BoxView BackgroundColor="White"   
  30.             RelativeLayout.XConstraint="{ConstraintExpression   
  31.             Type=RelativeToView, ElementName=YellowBox, Property=Width,  
  32.             Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression   
  33.             Type=RelativeToView, ElementName=YellowBox, Property=Height,  
  34.             Factor=0.4}" HeightRequest="10"  
  35.             WidthRequest="10">  
  36.             </BoxView>              
  37.         </RelativeLayout>  
  38.     </RelativeLayout>  

ScrollView

Scroll View simply adds scrolling to your page. When elements exceed the page size, they are unable to be displayed due to the screen size. So Scroll View removes this difficulty and you can scroll vertically, horizontally or both. It depends upon how you set the orientation.

Types Of Xamarin Layouts 

XAML Code

  1. <ScrollView>  
  2.         <StackLayout>  
  3.         <Label Text="hello" />  
  4.         <Label Text="hello" />  
  5.         <Label Text="hello" />  
  6.         <Label Text="hello" />  
  7.         <Label Text="hello" />  
  8.         <Label Text="hello" />  
  9.         <Label Text="hello" />  
  10.         <Label Text="hello" />  
  11.         <Label Text="hello" />  
  12.         <Label Text="hello" />  
  13.         <Label Text="hello" />  
  14.         <Label Text="hello" />  
  15.         <Label Text="hello" />  
  16.         <Label Text="hello" />  
  17.         <Label Text="hello" />  
  18.         <Label Text="hello" />  
  19.         <Label Text="hello" />  
  20.         <Label Text="hello" />  
  21.         <Label Text="hello" />  
  22.         <Label Text="hello" />  
  23.         <Label Text="hello" />  
  24.         <Label Text="hello" />  
  25.         <Label Text="hello" />  
  26.         <Label Text="hello" />  
  27.         <Label Text="hello" />  
  28.         </StackLayout>  
  29.     </ScrollView>  

Frame

Frame shows a rectangle around its child. It has different properties like “OutlineColor”, “CornerRadius” and “HasShadow”. Its default padding is 20 Units. Image shows a Frame around a button.

Types Of Xamarin Layouts 

Summary

With layouts, you can design complex user interfaces and make your application more attractive and user-friendly. It is very important to have good knowledge of layouts. This article helps you to do so. I hopw this adds to your knowledge.


Similar Articles