Tiempo hace que desarrollamos en la web, y por eso, nos hemos acostumbrado a ir posicionando objetos en función de un Layout que resulta de la aplicación de estilos css a elementos HTML. Cuando hemos trabajado con flash (o con algún Windows Form), posicionar objetos, es más sencillo, ya que simplemente tenemos que aplicarles unas coordenadas, posicionando estos objetos de forma absoluta.
Ahora que tenemos que aprender Silverlight (o Moonlight los linuxeros), con uno de los primeros problemas que nos vamos a encontrar, es con el posicionamiento de los elementos en pantalla. No os asustéis, porque no es muy complicado, pero sí que es verdad que tenemos varias opciones donde elegir, las cuales vamos a ver en breve.
Posicionando elementos en pantalla.
Silverlight, para permitirnos posicionar los elementos en pantalla de una forma flexible, nos proporciona tres controles:
- StackPanel
- Canvas
- Grid
Estos 3 elementos, nos van a permitir, posicionar otros elementos de formas más bien distintas.
Los 3 heredan de la clase Panel, y ahora vamos a ver con que funcionalidad nos fortalecen o penalizan cada vez que usemos uno de ellos.
El StackPanel.
El StackPanel, es el más sencillo de los tres, nos permite posicionar varios elementos, uno a continuación de otro y en dirección horizontal o vertical.
El código XAML necesario es el siguiente:
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
<TextBlock Text="Introduce tu nombre: "/>
<TextBox Width="200" Height="20" VerticalAlignment="Top"/>
</StackPanel>
Este control, seguramente nos va a resultar muy útil para generar menús, tabs etc…
El Canvas.
El Canvas, es un control más complejo que el StackPanel, lo que lo hace diferente y especial respecto al resto, es que nos permite posicionar los elementos de una forma absoluta, gracias a 2 attached properties, Canvas.Left y Canvas.Top.
El código XAML necesario para usarlo es el siguiente:
<Canvas x:Name="LayoutRoot" Background="White">
<Button Canvas.Left="10" Canvas.Top="20" Content="Button at (10,20)"/>
<TextBlock Text="Outer Canvas" Canvas.Left="180" Canvas.Top="10" FontSize="26"/>
<Canvas Canvas.Top="60" Canvas.Left="10" Background="LightSkyBlue" Width="200" Height="100">
<TextBlock Text="Nested Canvas" Canvas.Left="10" Canvas.Top="20"/>
</Canvas>
</Canvas>
El Grid.
Se supone que es el más complejo y potente de los tres. Nos va a permitir posicionar elementos de forma tabular. Este está compuesto de una o varias columnas y filas.
El código XAML básico para los Grid es el siguiente:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
Como veis, por medio de los nodos Grid.ColumnDefinitions y Grid.RowDefinitions, podemos indicarle el número de filas y columnas que queremos que tenga nuestro Grid.
El Grid presenta cuatro attached properties:
- Grid.Row
- Grid.Column
- Grid.RowSpan
- Grid.ColumnSpan
Y ahora solo tenemos que insertar los controles que sea menester, indicando la fila y columna donde queremos posicionarlos, el código XAML sería el siguiente:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Row = 0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Row = 0, Column = 1" Grid.Row="0" Grid.Column="1" />
</Grid>
Y esto es todo por hoy, cuál es el mejor control de los tres, cual es nos va a permitir tener un layout más flexible, cual nos va a permitir cambiar la interfaz de nuestra app – pagina etc… de una forma más rápida y eficaz, pues eso amigos míos, el tiempo lo dirá, de momento tendremos que ir viendo que nos aporta cada uno, que fortalezas tienen y que carencias.
Eso sí ahora (y dado que estoy dentro de este mundillo del Silverlight desde hace nada), no me puedo decantar por uno u otro aunque el que más simpatías me genera es el Canvas, ya que me trae recuerdos de aquella época en que programaba en ActionScript y me gustaba hacer apps con flash, por otro lado, soy escéptico frente al Grid, ya que también me trae recuerdos (y no tan gratos), me refiero a las primeras webs que hacíamos (y que todavía se siguen haciendo) donde el layout y el posicionamiento de los elementos lo realizábamos por medio de tablas, siendo bastante costoso realizar cualquier cambio por mínimo que fuera.
Este finde ha sido un poco Punk, no quiero olvidarlo y me he propuesto repetir algo así cuanto antes. Os dejo con los Ramones haciendo un homenaje a las Ronettes, y hacen bien, porque les deben mucho.
when you kiss me I’ve just got to say
(baby I love you)
come on baby
(baby I love you)
oh-ee baby
baby I love only you
A deshoras 