Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

Es un panel que organiza (apila) controles uno al lado del otro, o, uno bajo el otro.

Para aquellos que hayan trabajado con WPF o Silverlight encontrarán que éste es prácticamente el mismo StackPanel que ya conocen.

Ejemplo

Aquí definimos un StackPanel que apila verticalmente varios botones:

1: <StackPanel> 2: <Button 3: Content="Boton 1"/> 4: <Button 5: Content="Boton 2"/> 6: <Button 7: HorizontalAlignment="Center" 8: Content="Boton 3"/> 9: <Button 10: HorizontalAlignment="Right" 11: Content="Boton 4"/> 12: <Button 13: HorizontalAlignment="Stretch" 14: Margin="20" 15: Content="Boton 5"/> 16: <Button 17: Width="400" 18: Height="500" 19: Content="Boton 6"/> 20: StackPanel>

StackPanel01

Obsérvese unos detalles importantes sobre el funcionamiento del StackPanel:

  • En este ejemplo los controles están apilados verticalmente. Para cambiar la orientación, de modo que los controles se organicen uno al lado del otro, se utiliza la propiedad Orientation: :

StackPanel02

  • Contrario el elemento "Table" que se utiliza de forma similar en HTML, un Grid no define Celdas (elemento TD en HTML), solo define columnas y filas.
  • Nótese el uso de las propiedades HorizontalAlignment en los botones 3, 4 y 5. Dado que para este ejemplo la orientación es Vertical (el valor por defecto de la propiedad "Orientation") se ignora cualquier valor asignado a la propiedad VerticalAlignment y viceversa.
  • Nótese también que la propiedad Margin en el botón 5 asigna un margen al rededor de este.
  • El StackPanel no intentará restringir la ubicación de los controles que contiene. En otras palabras, un StackPanel crecerá al tamaño necesario para poder contenerlos a todos.
  • Y un último detalle muy importante: Si sucediese que el StackPanel o su contenido no caben completamente dentro de la pantalla (obsérvese el que botón 6 no cabe completamente), no se activarán barras de desplazamiento pues el StackPanel no tiene barras de desplazamiento. Debe utilizarse el control ScrollViewer para alcanzar dicho fin.
PARA SABER MÁS… StackPanel class