¿Eres nuevo en WPF y te sientes confundido acerca de cómo utilizar Grid y StackPanel? Si tu respuesta es sí, entonces estás en el lugar correcto. Cuando empecé en esto del desarrollo WPF, yo era nuevo en XAML y la primera que tuve era sobre el uso de Grid y StackPanel. ¿Cuál es la diferencia y cuál utilizar?
Déjame que te guíe por esto. En el pasado, los diseños se implementaban para ser simples, pero ahora queremos que se adapten para que sean capaces de ejecutarse en múltiples dispositivos. En primer lugar, ten en cuenta que ambos son contenedores.
Los contenedores se utilizan para el posicionamiento de controles en WPF. Tienen propiedades hijas para que puedan contener varios elementos. Al incorporar algún tipo de control en el interior de un control de diseño, estamos llamando implícitamente al método Add de las propiedades de la colección de hijos.
Grid
Al crear un nuevo proyecto, Grid está a tu disposición de forma predeterminada. Este grid cuenta con una fila y una columna y hace que una célda grande cubra todo el espacio. Grid es como un array y puedes colocar un elemento solamente indicándole en qué fila y en qué columna deben posicionarse.
En este ejemplo, voy a hacer una cuadrícula de 3x3, que en total son 9 celdas, y entonces colocaremos nuestros elementos en cualquier celda en particular.
Haz tres filas y tres columnas escribiendo el siguiente código:
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Height y width se utilizan para definir el tamaño de una fila y una columna particular. Así cualquier celda puede tener el tamaño que nosotros mismos definamos.
El tamaño puede ser establecido de tres maneras:
- Píxeles exactos
- Auto, usando el ancho y alto del elemento que contiene al elemento que estamos utilizando
- Tamaño por estrellas
El siguiente código hará que en la matriz que tiene números, se pueda acceder a ellos mediante el uso de las propiedades Grid.Row="" & Grid.Column = ""
<Page.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="42" />
<Setter Property="Foreground" Value="Black" />
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock>1</TextBlock>
<TextBlock Grid.Column="1">2</TextBlock>
<TextBlock Grid.Column="2">3</TextBlock>
<TextBlock Grid.Row="1">4</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>
<TextBlock Grid.Row="2">7</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>
</Grid>
Esto generará la siguiente salida.
Stack Panel
Stack Panel actúa como una pila de cosas colocadas una tras otra. Puede ser horizontal o vertical. A diferencia de Grid, no se puede acceder a una celda determinada en un StackPanel, cada siguiente elemento se colocará después del último en una secuencia.
Stack Panel cuenta con una orientación vertical de forma predeterminada y el flujo por defecto es de izquierda a derecha si se selecciona la orientación horizontal.
El siguiente código generará un Stack Panel con tres rectángulos coloreados, apilados verticalmente unos sobre otros.
<StackPanel Orientation="Vertical">
<Rectangle Height="200" Width="Auto" Fill="Yellow"></Rectangle>
<Rectangle Height="200" Width="Auto" Fill="Green"></Rectangle>
<Rectangle Height="200" Width="Auto" Fill="Blue"></Rectangle>
</StackPanel>
Como la orientación vertical está por defecto, no hay necesidad de mencionar la orientación. Este código generará el siguiente resultado:
El siguiente código generará un stack panel en sentido horizontal.
<StackPanel Orientation="Horizontal">
<Rectangle Height="Auto" Width="100" Fill="Yellow"></Rectangle>
<Rectangle Height="Auto" Width="100" Fill="Green"></Rectangle>
<Rectangle Height="Auto" Width="100" Fill="Blue"></Rectangle>
</StackPanel>
Esta sería la salida:
Has podido observar claramente por ti mismo la diferencia entre todos ellos, ahora puedes decidir cuál utilizar y cuando.
Los stack panel pueden tener stack panel dentro de un stack panel que se pueden combinar para hacer hermosos diseños. Se prefieren los stack panels cuando desarrolles listas, de modo que cada elemento se pueda apilar uno sobre el otro y pueden ajustarse en múltiples pantallas en consecuencia.
Los grids se utilizan cuando se quiere definir una celda particular y no quieres que tu elemento esté dentro de una secuencia. Grid solapará controles, pero StackPanel los apilará. Ambos tienen su propio uso y puedes tomar una decisión, sabiendo todo esto, de acuerdo a tus necesidades.
Y este ha sido el artículo en el que trataba explicaros las diferencias entre Grid y StackPanel, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!