StackLayout stacks its child elements below or beside each other, depending on its orientation. It is very useful for creating lists. 

Use the following code to check how StackLayout works:

<StackLayout orientation="vertical">
    <Label text="Label 1" height="100" backgroundColor="red"></Label>
    <Label text="Label 2" width="150" height="100" 
     backgroundColor="green"></Label>
    <Label text="Label 3" width="50" height="50" 
     backgroundColor="blue"></Label>
</StackLayout>

The preceding code will produce the following layout:

In the preceding example, we have three labels stacked vertically.

Now, let's look at how the wrap layout works.