Xamarin.Forms Layouts

Xamarin.Forms Layouts are used to compose user-interface controls into visual structures.

The Layout and Layout<T> classes in Xamarin.Forms are specialized subtypes of views that act as containers for views and other layouts. The Layout class itself derives from View. A Layout derivative typically contains logic to set the position and size of child elements in Xamarin.Forms applications.

Xamarin.Forms Layout Types

The classes that derive from Layout can be divided into two categories:

Layouts with Single Content

These classes derive from Layout, which defines Padding and IsClippedToBounds properties.

ContentView

ContentView contains a single child that is set with the Content property. The Content property can be set to any View derivative, including other Layout derivatives. ContentView is mostly used as a structural element and serves as a base class to Frame.

API Documentation
ContentView Example
C# code for this page / XAML page

Frame

The Frame class derives from ContentView and displays a rectangular frame around its child. Frame has a default Padding value of 20, and also defines OutlineColor, CornerRadius, and HasShadow properties.

API Documentation
Frame Example
C# code for this page / XAML page

ScrollView

ScrollView is capable of scrolling its contents. Set the Content property to a view or layout too large to fit on the screen. (The content of a ScrollView is very often a StackLayout.) Set the Orientation property to indicate if scrolling should be vertical, horizontal, or both.

API Documentation / Guide / Sample
ScrollView Example
C# code for this page / XAML page

TemplatedView

TemplatedView displays content with a control template, and is the base class for ContentView.

API Documentation / Guide
TemplatedView Example

ContentPresenter

ContentPresenter is a layout manager for templated views, used within a ControlTemplate to mark where the content that is to be presented appears.

API Documentation / Guide
ContentPresenter Example

Layouts with Multiple Children

These classes derive from Layout<View>.

StackLayout

StackLayout positions child elements in a stack either horizontally or vertically based on the Orientation property. The Spacing property governs the spacing between the children, and has a default value of 6.

API Documentation / Guide / Sample
StackLayout Example
C# code for this page / XAML page

Grid

Grid positions its child elements in a grid of rows and columns. A child's position is indicated using the attached properties Row, Column, RowSpan, and ColumnSpan.

API Documentation / Guide / Sample
Grid Example
C# code for this page / XAML page

AbsoluteLayout

AbsoluteLayout positions child elements at specific locations relative to its parent. A child's position is indicated using the attached properties LayoutBounds and LayoutFlags. An AbsoluteLayout is useful for animating the positions of views.

API Documentation / Guide / Sample
AbsoluteLayout Example
C# code for this page / XAML page with code-behind

RelativeLayout

RelativeLayout positions child elements relative to the RelativeLayout itself or to their siblings. A child's position is indicated using the attached properties that are set to objects of type Constraint and BoundsConstraint.

API Documentation / Guide / Sample
RelativeLayout Example
C# code for this page / XAML page

FlexLayout

FlexLayout is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box. FlexLayout defines six bindable properties and five attached bindable properties that allow children to be stacked or wrapped with many alignment and orientation options.

API Documentation / Guide / Sample
FlexLayout Example
C# code for this page / XAML page