Introducción a XAML

En este post voy a demostrar como utilizar columnas y filas para diseñar una página, y usarla en una aplicación de Windows RT (Windows 8) y Windows Phone. Éstas columnas y filas de definirán con xaml.

Para comenzar deberán tener instalado el SDK de Windows 8 o el de Windows Phone, la demostración la realizaré con el segundo.

El SDK de Windows Phone viene con la versión Express for Windows Phone de Visual Studio, lo abrimos.

En el lado derecho damos click en Nuevo Proyecto... y se abrirá una ventana como la siguiente:

Aquí seleccionamos Windows Phone App y le ponemos un nombre, yo la nombré IntroduccionXAML.

Si tienes instalados los SDKs de WP7 y WP8, al dar click en OK te mostrará un dialogo para que elijas la versión para la que quieres crear la aplicación, para esta práctica no importa cual escojamos.

Obtendremos entonces algo como esto

Ahora nos enfocaremos en el MainPage.xaml, ahí podemos ver un telefonito, que nos servirá de guía para saber cómo va quedando nuestro diseño. También vemos mucho código, algo de este no nos sirve por el momento, así que eliminaremos todo lo que esté dentro del Grid llamado LayoutRoot para que sólo nos quede lo siguiente.

Ahora que tenemos un grid limpio, comencemos. Este grid 'LayoutRoot' será el contenedor de todos los elementos que agreguemos a la interfaz de usuario, y este y todos los grids se pueden conformar de filas y columnas, así que comencemos creando algunas filas.

En las filas tenemos que definir su altura, y por supuesto, en las columnas su anchura, para hacerlo existen tres formas.

1. Estableciendo su altura en un valor numérico que representa los pixeles.
2. Estableciendo su altura en automático, de esta forma la altura de la fila (o la anchura de la columna) dependerá del tamaño de los elementos que se encuentren dentro de ella, en la imagen por ejemplo, la segunda fila tiene una altura de 0, porque aún no tiene nada dentro que defina su altura.
3. Con un * la altura ocupa el resto de la altura (o anchura si es columna) del grid, con el * se puede jugar un poco, por ejemplo, si tenemos dos filas y queremos que una sea 3/5 de la altura del grid y la segunda 2/5 podemos ponerle a la primera una altura de 3* y a la segunda una altura de 2*, así el grid se diviridá en 5* y le dará 3 a la primera fila y 2 a la segunda.

Bueno, ya tenemos nuestras filas, ahora debemos saber que dentro de ellas podemos definir elementos, incluyendo nuevos grids:

Aquí hemos creado un grid dentro de cada fila, y podemos observar que, dado que hemos asignado una altura al grid dentro de la segunda fila, ésta ha cambiado AUTOMÁTICAMENTE su altura.

Cabe comentar dos cosas en este punto.

1. Si no definimos la fila (o columna) de nuestro elemento, como sucede con nuestro primer grid, se colocará de manera predefinida en la primera fila y primer columna.
2. La numeración de filas y columnas comienza desde el 0, de forma que la primera fila es la fila '0', la segunda es la fila '1' y así sucesivamente.

A continuación la cosa puede ponerse un poco confusa, así que bajaré la velocidad, comenzaré creando dos columnas dentro del grid que está en la primera fila.

Aquí primero cambié la definición del grid de '<Grid />' a '<Grid></Grid>' para definir elementos dentro de él, entonces, dentro definí dos columnas, muy similar a como definimos filas, sólo que en este caso definimos su anchura.

Aquí se nota el uso de los * para definir la anchura, el grid se divide en 2* y asigna 1 a cada columna para que cada una mida exactamente lo mismo.

Y sí, de igual forma puedo comenzar a definir más elementos (incluyendo grids) dentro de estas columnas.

Ya que quedó un poco más claro esto de meter grids dentro de grids... terminaré definiendo más columnas dentro de los otros dos grids.

Aquí definí 3 columnas en el segundo grid (nótese el uso del * para establecer su anchura)

Y por último en el tercer grid definí dos filas y dos columnas usando el * para obtener 4 cuadrados perfectos.

Espero que eso les haya servido, si tienen alguna duda siéntanse libres de comentenlas aquí abajo.
Follow @lalorosas