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.

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