The layout means elements or things that can be arranged or set in a particular way. The layout is nothing but a view that is derived from the view. It acts as a container that is used to give a position to the child element inside the layout. In Xamarin layouts are define by Layout and layout<T> classes.
Xamarin include UI controls as well as different types of layouts for a different purpose. The layouts used in Xamarin are:
- Stack Layout
- Grid layout
- Relative Layout
- Flex Layout
- Absolute layout
Here are the structure of different layouts and how child elements are placed in the layout in Xamarin.
Stack Layout: Stack layout arranges child elements or views in a stack-based on orientation either Horizontal or Vertical. Using the Orientation property, we can set position horizontally or vertically. Width and Height are set based on the Width Request and Height Request property.
- Stack Layout with multiple Children: When multiple children elements are defined Stack Layout arranges elements in a stack-based on orientation property and space between children element is defined by Spacing property.
- Stack Layout is define using <StackLayout> </StackLayout>
Example:
<StackLayout Orientation=”Vertical” Spacing=”10″ WidthRequest=”100″ HeightRequest=”100″ BackgroundColor=”AliceBlue”>
<Label
Text=”Login” HorizontalOptions=”CenterAndExpand” FontSize=”Large”/>
<Image Source=”loginuser.png”/>
<Entry Placeholder=”User Name”/>
<Entry Placeholder=”Password” IsPassword=”True”/>
<Button Text=”Submit”/>
</StackLayout>
The above screen is the Login page which we have created using the stack layout and inside the stack layout, we have defined four child elements.
Grid Layout: Grid Layout arranges views /child elements into Rows and Columns. Elements are added to the grid with specific rows and columns. The grid contains RowDefination and ColumnDefination to specify rows and columns in a Grid. To merge columns and rows it provides ColumnSpan and RowSpan property to the element.
- Grid with Multiple Children: When multiple children elements are defined Grid arranges elements in a grid row and column.
Structure of Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefination/>
<RowDefination/>
.
.
.
</Grid.RowDefinitions>
<Grid.ColumnDefinations>
<ColumnDefination/>
<ColumnDefination/>
.
.
.
</Grid.ColumnDefinations>
</Grid>
Example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor=”Blue”>
<Image Source=”calender.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″/>
</Grid>
<Grid Grid.Column=”1″ Grid.Row=”0″ BackgroundColor=”Yellow”>
<Image Source=”location.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″/>
</Grid>
<Grid Grid.Column=”0″ Grid.Row=”1″ BackgroundColor=”Purple”>
<Image Source=”images.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″ />
</Grid>
<Grid BackgroundColor=”Red” Grid.Row=”1″ Grid.Column=”1″>
<Image Source=”like.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″ />
</Grid>
<Grid BackgroundColor=”Orange” Grid.Row=”2″ Grid.Column=”0″>
<Image Source=”search.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″ />
</Grid>
<Grid Grid.Column=”1″ Grid.Row=”2″ BackgroundColor=”Green”>
<Image Source=”mail.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthR
equest=”100″ />
</Grid>
<Grid BackgroundColor=”Pink” Grid.Column=”0″ Grid.Row=”3″>
<Image Source=”setting.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″
/>
</Grid>
<Grid Grid.Column=”1″ Grid.Row=”3″ BackgroundColor=”Magenta”>
<Image Source=”utube.png” HorizontalOptions=”Center” HeightRequest=”100″ WidthRequest=”100″ />
</Grid>
<Grid Grid.Row=”4″ Grid.ColumnSpan=”2″>
<Image Source=”dataTrigger.png” HorizontalOptions=”CenterAndExpand”/>
</Grid>
</Grid>
On the above screen, we have created a grid with five rows and two columns and put images in particular rows and columns. In the last row, we use the ColumnSpan property to merge both columns.
Relative Layout: Relative layout arranges elements relative to other elements. A relative layout contains properties like WidthConstraint, HeightConstraint, XConstraint, YConstraint of elements. In each constraint, we can set ConstraintExpression to its factor, type, property, and element name.
- RelativeLayout with multiple children: It arranges child elements relative to itself or relative to the sibling elements.
Example:
<RelativeLayout>
<BoxView Color=”Orange”
RelativeLayout.XConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.50}”
RelativeLayout.YConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Heig
ht, Factor=0.50}”/>
<BoxView Color=”Red”
RelativeLayout.XConstraint=”{ConstraintExpression Type=Constant, Constant=0}”
RelativeLayout.YConstraint=”{ConstraintExpression Type=Constant, Constant=0}” />
<BoxView Color=”Green”
RelativeLayout.XConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}”
RelativeLayout.YConstraint=”{ConstraintExpression Type=Constant, Constant=0}” />
<BoxView Color=”Blue”
RelativeLayout.XConstraint=”{ConstraintExpression Type=Constant, Constant=0}”
RelativeLayout.YConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}” />
<BoxView Color=”Yellow”
RelativeLayout.XConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}”
RelativeLayout.YConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}” /> </RelativeLayout>
On the above screen, we have displayed various box view using Relative Layout.
Flex Layout: Flex Layout is similar to Stack Layout which arranges elements horizontally or vertically. It is capable to Wrap child elements if there are multiple elements in a single row or column.
It provides various options like orientation, alignment, and adapting various screen sizes. This Layout is based on the CSS Flexible Box Layout Module.
Example
<FlexLayout Direction=”Column” JustifyContent=”Center” AlignItems=”Center” Margin=”5″>
<Label Text=”Login” TextColor=”Black” FontSize=”Large”/>
<Image Source=”registeruser.png” HeightRequest=”100″ WidthRequest=”100″ />
<Entry Placeholder=”Enter user name” />
<Entry Placeholder=”Enter Password” IsPassword=”True”/>
<Button Text=”Submit” BackgroundColor=”DarkCyan” TextColor=”White”/>
</FlexLayout>
In the above screen, we have displayed a login screen using a flex layout.
Absolute Layout: Absolute layout arranges child elements proportional to its size and position or by absolute value.
- An absolute class defines LayoutBounds and LayoutFlags property and these both are attached property.
- LayoutBounds represent the position and size of a child element. (0, 0, AutoSize, AutoSize) is the default value of the property.
- LayoutFlag is a type of AbsoluteLayoutFlags. This property shows that the properties of layout bounds arranged the child elements are interpreted proportionally. None is the default value of this property.
- Relative Layout with multiple children: When multiple children is defined in layout it arranges them at a specific location relative to the parent.
Example:
<AbsoluteLay
out BackgroundColor=”Aquamarine” >
<BoxView BackgroundColor=”Blue” AbsoluteLayout.LayoutBounds=”100,100,200,200″/>
<Label Text=”Absolute Layout” TextColor=”White” FontSize=”Large” AbsoluteLayout.
LayoutBounds=”120,180,200,200″/>
</AbsoluteLayout>
In this example, we have used an absolute layout and create a label and box view.
Example: Using all five layouts:
MainPage
<CarouselPage xmlns=”http://xamarin.com/schemas/2014/forms” xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
xmlns:local=”clr-namespace:Demo_pages”
x:Class=”Demo_pages.MainPage”>
<ContentPage BackgroundColor=”Cyan”>
<RelativeLayout>
<Label Text=”Swipe” RelativeLayout.XConstraint=”{ConstraintExpression Type=RelativeToParent, Factor=0.50}” />
</RelativeLayout>
</ContentPage>
<ContentPage BackgroundColor=”Yellow”>
<RelativeLayout>
<Label Text=”Swipe” RelativeLayout.XConstraint=”{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.50}” />
</RelativeLayout>
</ContentPage>
<ContentPage BackgroundColor=”Pink”>
<StackLayout>
<Button Text=”Start” HorizontalOptions=”CenterAndExpand” VerticalOptions=”CenterAndExpand” HeightRequest=”100″ WidthRequest=”100″ Clicked=”Button_Clicked”/>
</StackLayout>
</ContentPage>
This screen is created using a relative layout inside the carousal Page.
MasterDetail Page (Master)
<MasterDetailPage.Master>
<ContentPage Title=”Masterpage”>
<StackLayout>
<Button Text=”Page1″ Clicked=”Button_Clicked”/>
<Button Text=”Page2″ Clicked=”Button_Clicked_1″/>
<Button Text=”page3″ Clicked=”Button_Clicked_2″/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<!– Detail page–!>
<MasterDetailPage.Detail>
<ContentPage x:Name=”Page1″>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”*”/>
<RowDefinition Height=”*”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<Label BackgroundColor=”Purple”/>
<Label BackgroundColor=”SkyBlue” Grid.Row=”0″ Grid.Column=”1″/>
<Label BackgroundColor=”Blue” Grid.Row=”1″ Grid.Column=”0″/>
<Label BackgroundColor=”Red” Grid.Row=”1″ Grid.Column=”1″/>
<Label BackgroundColor=”Yellow” Grid.Row=”2″ Grid.Column=”0″/>
<Label BackgroundColor=”Orange” Grid.Row=”2″ Grid.Column=”1″/>
</Grid>
</ContentPage>
</MasterDetailPage.Detail>
This screen is created using a grid layout and a stack layout.
This screen is created using Grid.
Detail Page 2 and 3
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x: Class=”Demo_pages.Page2″>
<AbsoluteLayout BackgroundColor=”Pink”>
<Button Text=”Click” BackgroundColor=”Green” Clicked=”Button_Clicked” AbsoluteLayout.LayoutBounds=”100,100,100,50″/>
</AbsoluteLayout>
</ContentPage>
The above screen is created using an absolute layout.
<TabbedPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=”Demo_pages.Page3″>
<ContentPage Title=”Tab 1″ >
<FlexLayout Direction=”Column” AlignItems=”Center” JustifyContent=”Center”>
<Image Source=”xamarin.png” HeightRequest=”200″ WidthRequest=”200″/>
<Label Text=”Xamarin Forms”/>
</FlexLayout>
</ContentPage>
<ContentPage Title=”Tab 2″ >
<FlexLayout Direction=”Column”>
<Label Text=”Xamarin Comments”/>
<Editor Placeholder=”Write about Xamarin..”/>
</FlexLayout>
</ContentPage>
<ContentPage Title=”Tab 3″ >
<FlexLayout Direction=”Row”>
<Label Text=”Date”/>
<DatePicker/>
</FlexLayout>
</ContentPage>
</TabbedPage>
The above screen is created using a flex layout inside the tabbed page.
Conclusion:
Xamarin contains various types of layout that are used for a different purpose. In this blog, we have discussed commonly used layout, which are Grid, Stack, Flex, Relative, and Absolute, and also how to define a layout, their properties, and with multiple children element.
