Sizing:
In Layout, the size of a View depends on Both the height and Width requests and the layout Option. The Layout Options Structure Encapsulates two layout preferences:
These Layouts Preferences can be Applied to a View, Relative to its parent, by setting the Horizontal Option or Vertical Option property of the view to one of the public fields from the layout options structure.
Alignment:
The Alignment Controls how a view is positioned within its parent layout when the parent layout contains unused space. Following are the predefined Layout options available in Stack Layout.
| Options | Description: |
|---|---|
| Center | Center the view within the layout. |
| End | Place the view at the end of the layout. |
| Start | Places the View at the start of layout. |
| Fill | Places the View so that is has no padding. |
In Stack Layout, we can set the layout option on the child views that are in opposite direction to the stack layout orientation. if the Layout is vertically Oriented, then we can set the Horizontally options properties of views to one of the start, center, end or fill fields. And if the Layout is Horizontally Oriented, then we set the vertically options properties of views to the start, center, end or fill fields.
The following XML code example demonstrates a Vertically Oriented StackLayout where each Views sets its Horizontal Options property to one of the four alignments fields.
<?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 Vertical-->
<StackLayout Orientation="Vertical" Padding="20">
<Button Text="Sizing Attribute"/>
<!--Views Sets its Horizontal Options property.-->
<Label Text=" Start " BackgroundColor="#008080" HorizontalOptions="Start"/>
<Label Text=" Center " BackgroundColor="#008080" HorizontalOptions="Center"/>
<Label Text=" End " BackgroundColor="#008080" HorizontalOptions="End"/>
<Label Text=" Fill " BackgroundColor="#008080" HorizontalOptions="Fill"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The Following XML code Example demonstrates a Horizontally Oriented StackLayout where each views sets its Vertical Options property to one of the four alignments fields.
<?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 Horizontal-->
<StackLayout Orientation="Horizontal" Padding="20">
<Button Text="Sizing Attribute"/>
<!--Views Sets its Vertical Options property.-->
<Label Text=" Start " BackgroundColor="#008080" VerticalOptions="Start"/>
<Label Text=" Center " BackgroundColor="#008080" VerticalOptions="Center"/>
<Label Text=" End " BackgroundColor="#008080" VerticalOptions="End"/>
<Label Text=" Fill " BackgroundColor="#008080" VerticalOptions="Fill"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The Following XML code Example demonstrates a Vertical Oriented StackLayout where each views sets its Vertical Options property to one of the four alignments fields.
<?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 Vertical-->
<StackLayout Orientation="Vertical" Padding="20">
<Button Text="Sizing Attribute"/>
<!--Views Sets its Vertical Options property.-->
<Label Text=" Start " BackgroundColor="#008080" VerticalOptions="Start"/>
<Label Text=" Center " BackgroundColor="#008080" VerticalOptions="Center"/>
<Label Text=" End " BackgroundColor="#008080" VerticalOptions="End"/>
<Label Text=" Fill " BackgroundColor="#008080" VerticalOptions="Fill"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Expansion:
Expansion Controls whether a view will Occupy more space, if Available, within a stack Layout. If the Stack Layout is larger than the combined size of all its children then the unused space is shared equally by all its child views. and this sharing space between views can happen by setting the Horizontal Options and Vertical Options properties to the layout Options field. Following are the Predefined layout options available in stack layout to expend the views.
| Options | Description |
|---|---|
| CenterAndExpand | Center the view within the layout and expand it to take up as much space as the layout will give it. |
| EndAndExpand | Place the View at the end of the Layout (right or bottom) and expands it to take up as much space as the layout will give it. |
| FillAndExpand | Place the view so that it has no padding and expand it to take up as much space as the layout will give it. |
| StartAndExpand | Place the view at the start of the layout and expand it to take up as much space as the layout will give it. |
In Stack Layout, the Views can only expand itself in the direction of its orientation. If the Layout is Vertically Oriented, then the views can expand their self by setting Vertically Options properties to one of the above given options.
The following XML code example demonstrates a Vertical Oriented StackLayout where each Views sets its Vertically Options property to one of the four Expansion fields.
<?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 Vertical-->
<StackLayout Orientation="Vertical" Padding="20">
<Button Text="Sizing Attribute"/>
<!--Views Sets its Vertical Options property.-->
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Start " BackgroundColor="#008080" VerticalOptions="StartAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Center " BackgroundColor="#008080" VerticalOptions="CenterAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" End " BackgroundColor="#008080" VerticalOptions="EndAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Fill " BackgroundColor="#008080" VerticalOptions="FillAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
The following XML code example demonstrates a Vertical Oriented StackLayout where each Views sets its Horizontal Options property to one of the four Expansion fields.
<?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 Vertical-->
<StackLayout Orientation="Vertical" Padding="20">
<Button Text="Sizing Attribute"/>
<!--Views Sets its Horizontal Options property.-->
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Start " BackgroundColor="#008080" HorizontalOptions="StartAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Center " BackgroundColor="#008080" HorizontalOptions="CenterAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" End " BackgroundColor="#008080" HorizontalOptions="EndAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
<Label Text=" Fill " BackgroundColor="#008080" HorizontalOptions="FillAndExpand"/>
<BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
