Share via


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:

Type Description Appearance
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 / Guide
ContentView Example
C# code for this page / XAML page
Frame The Frame class derives from ContentView and displays a border, or frame, around its child. The Frame class has a default Padding value of 20, and also defines BorderColor, CornerRadius, and HasShadow properties.

API Documentation / Guide
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
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>:

Type Description Appearance
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
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
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
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
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
FlexLayout Example
C# code for this page / XAML page