El contenedor StackLayout apila los elementos hijos de forma vertical (comportamiento por defecto) u horizontal.

Ejemplos

Apilamiento vertical (valor por defecto)

El siguiente ejemplo crea una pila vertical de tres elementos equivalentes en tamaño. Los elementos son estirados para cubrir todo el alto de la pantalla. Los elementos se colocan en órden de declaración.

<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#289062"/>
  <Label text="third" height="70" backgroundColor="#1c6b48"/>
</StackLayout>

Apilamiento horizontal

El siguiente ejemplo crea una pila horizontal de tres elementos equivalentes en tamaño. Los elementos son estirados para cubrir todo el alto de la pantalla. Los elementos se colocan en órden de declaración.

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#289062"/>
  <Label text="third" width="70" backgroundColor="#1c6b48"/>
</StackLayout>

Apilamiento vertical con elementos hijos alineados horizontalmente

El siguiente ejemplo crea una pila de elementos responsive de forma diagonal. Los elementos estan apilados verticalmente.

<StackLayout backgroundColor="#3c495e">
  <Label text="left" horizontalAlignment="left"
         width="33%" height="70" backgroundColor="#43b883"/>
  <Label text="center" horizontalAlignment="center"
         width="33%" height="70" backgroundColor="#289062"/>
  <Label text="right" horizontalAlignment="right"
         width="33%" height="70" backgroundColor="#1c6b48"/>
  <Label text="stretch" horizontalAlignment="stretch"
         height="70" backgroundColor="#43b883"/>
</StackLayout>

Apilamiento horizontal con elementos hijos alineados verticalmente

El siguiente ejemplo crea una pila de elementos responsive de forma diagonal. Los elementos estan apilados horizontalmente.

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="top" verticalAlignment="top"
         width="70" height="33%" backgroundColor="#43b883"/>
  <Label text="center" verticalAlignment="center"
         width="70" height="33%" backgroundColor="#289062"/>
  <Label text="bottom" verticalAlignment="bottom"
         width="70" height="33%" backgroundColor="#1c6b48"/>
  <Label text="stretch" verticalAlignment="stretch"
         width="70" backgroundColor="#43b883"/>
</StackLayout>

Propiedades

Propiedades de elementos hijos

No existen propiedades adicionales para los elementos hijos.