Windows Phone. Layout. Control StackPanel.

En esta entrada vamos a analizar el control StackPanel. Es otro de los controles de Layout disponibles en Windows Phone. Su nombre nos ayuda de entrada a saber como se comporta. En inglés la palabra “stack” significa apilar o amontonar. Este control nos apila los elementos visuales que contiene.

Recordemos que en Silverlight tenemos los siguientes tipos de contenedores (paneles):

  • Canvas
  • StackPanel
  • Grid

StackPanel

El control StackPanel apila los elementos que contiene de manera automática por defecto verticalmente. Crea una lista de los elementos que contiene. El orden de dichos elementos es según se hayan ido añadiendo al StackPanel. Es ideal para la creación de menus por ejemplo. Su propiedad más destacada es Orientation. Admite dos valores:

  • Horizontal
  • Vertical

Vamos a crear un projecto nuevo para descubir las posibilidades del control StackPanel.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Agregamos dentro del Grid principal de la página MainPage.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel Background="Red">
          <Ellipse Fill="Blue" Width="50" Height="50"/>
          <Ellipse Fill="Yellow" Width="50" Height="50"/>
          <Ellipse Fill="Green" Width="50" Height="50"/>
          <Ellipse Fill="Orange" Width="50" Height="50"/>
          <Ellipse Fill="Pink" Width="50" Height="50"/>
     </StackPanel>
</Grid>

El resultado es el siguiente:

Hemos añadido un StackPanel al que le hemos modificado su color de fondo a rojo. Dentro del StackPanel hemos añadido varios objeto Ellipse de diferentes colores. Por defecto, sin modificar la propiedad Orientation, los elementos visuales se apilan de manera vertical.

Si modificamos la propiedad Orientation al valor Horizontal el resultado es el siguiente:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel Orientation="Horizontal" Background="Red">
          <Ellipse Fill="Blue" Width="50" Height="50"/>
          <Ellipse Fill="Yellow" Width="50" Height="50"/>
          <Ellipse Fill="Green" Width="50" Height="50"/>
          <Ellipse Fill="Orange" Width="50" Height="50"/>
          <Ellipse Fill="Pink" Width="50" Height="50"/>
     </StackPanel>
</Grid>

El orden de los elementos que contiene el StackPanel es según se han ido añadiendo al cotenedor. Por lo tanto, para modificar el orden de los elementos sería tan sencillo como cambiar el orden de los elementos en nuestro XAML. Por ejemplo. La esféra de color azul aparece antes que la de color amarillo. Si deseamos que aparezca antes de la color amarillo deberíamos modificar el código dejandolo así:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel Orientation="Horizontal" Background="Red">
          <Ellipse Fill="Yellow" Width="50" Height="50"/>
          <Ellipse Fill="Blue" Width="50" Height="50"/>
          <Ellipse Fill="Green" Width="50" Height="50"/>
          <Ellipse Fill="Orange" Width="50" Height="50"/>
          <Ellipse Fill="Pink" Width="50" Height="50"/>
     </StackPanel>
</Grid>

Puedes descargar el código utilizado en este ejemplo a continuación:

Nada más en esta entrada. Como hemos podido ver el control StackPanel es sumamente fácil de utilizar pero a su vez nos brinda unas posibilidades muy interesantes a la hora de organizar los elementos visuales. En próximas entradas analizaremos el control Grid (el más potente de los controles disponibles de Layout) o como añadir dinámicamente contenido a los controles de Layout. Permaneced atentos!

Más Información:

Blog Jesse Liberty: Windows Phone Fundamentals– Canvas & StackPanel

Un pensamiento en “Windows Phone. Layout. Control StackPanel.

  1. Pingback: [Windows 10] Control RelativePanel | Javier Suárez | Blog

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s