NOTE!
Stack Layout is provided by Xamarin.Forms: So, we Need to Include Xamarin.Forms Framework in Our project to use this layout. Learn how to use Xamarin.Forms:
Stack Layout:
Stack layout organizes views in "STACK" - In one-dimensional line - either horizontally or vertically. stack Layout is less complex than other layouts, Simple linear interfaces can be created by just adding views to a Stack Layout, and more complex interfaces can be created by nesting them.
The Stack Layout Organise the Childs Views either Horizontally or vertically based on the specified orientation property. The value for Orientation property can be either -
Declaration:
We use the following syntax to Declare Stack Layout in Android using XML.
<StackLayout Padding="10" Spacing="10" Orientation="Horizontal">
<!--add views here-->
</StackLayout>
Vertical Orientations:
In Vertical Orientations, the Views are Arranged vertically in a line one after the other. In below example, we use Vertical Orientation property for Stack Layout to align the views vertically:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout"
x:Class="Layout.MainPage">
<ContentPage.Content>
<!--Layout Orientation Vertically-->
<StackLayout Padding="10" Spacing="10" Orientation="Vertical">
<Button Text="Stack Layout"></Button>
<BoxView
Color="#FF008080"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FF7FBA00"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FF01A4EF"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FFFFB901"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Horizontal Orientations:
In Horizontal Orientations, the child’s are arranged Horizontally in a line one after the other. In below example, we use Horizontal Orientation property for Stack Layout to align the views Horizontally:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout"
x:Class="Layout.MainPage">
<ContentPage.Content>
<!--Layout Orientation Horizontally-->
<StackLayout Padding="10" Spacing="10" Orientation="Horizontal">
<Button Text="Stack Layout"></Button>
<BoxView
Color="#FF008080"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FF7FBA00"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FF01A4EF"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
<BoxView
Color="#FFFFB901"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Example:
A Simple Linear Interfaces can be created by just adding Views to a Stack layout one after the other. We can create more complex Interfaces by nesting the Stack Layout. Here is the Example, how we can create Complex interface using nested Stack 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"
xmlns:local="clr-namespace:Layout"
x:Class="Layout.MainPage">
<ContentPage.Content>
<!--Main Stack Layout, Allign vertically.-->
<StackLayout Orientation="Vertical" Spacing="20" Padding="10">
<Button Text="Nested Stack Layout"></Button>
<!--Nested Stack Layout Allign Horizontally-->
<StackLayout Orientation="Horizontal">
<BoxView Color="Aqua" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<BoxView Color="Lime" HorizontalOptions="FillAndExpand" />
<BoxView Color="Purple" HorizontalOptions="FillAndExpand" />
<BoxView Color="Blue" HorizontalOptions="FillAndExpand" />
</StackLayout>
<!--Nested Stack Layout Allign Horizontally-->
<StackLayout Orientation="Horizontal" Spacing="30">
<BoxView Color="Red" HeightRequest="100" HorizontalOptions="FillAndExpand"/>
<!--Nested Stack Layout Allign vertically-->
<StackLayout Orientation="Vertical" Spacing="3">
<BoxView Color="#FF80FF" HeightRequest="15" WidthRequest="100" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
</StackLayout>
<BoxView Color="#00264d" HeightRequest="100" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<!--Nested Stack Layout Allign Horizontally-->
<StackLayout Orientation="Horizontal" Spacing="2">
<BoxView Color="#FF9900" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<BoxView Color="#00FD99" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<BoxView Color="Gray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<!--Nested Stack Layout Allign Vertically-->
<StackLayout Orientation="Vertical" Spacing="3">
<BoxView Color="#fff" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#fff" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
<BoxView Color="#fff" HeightRequest="15" />
<BoxView Color="#FF80FF" HeightRequest="15" />
</StackLayout>
<!--Nested Stack Layout Allign Horizontally-->
<StackLayout Orientation="Horizontal" Spacing="2">
<BoxView Color="Aqua" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<BoxView Color="Purple" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<BoxView Color="LimeGreen" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
