Entendiendo XAML (2 de N)

En el post anterior vimos de donde proviene la sintaxis básica de XAML, ahora veamos un concepto más que es necesario para saber como crear cualquier elemento C# en XAML, si, C#.

Pues bien, para quienes estamos acostumbrados a .NET de tiempos anteriores, estamos acostumbrados a contar siempre con algo que conocemos como el CodeBehind

El CodeBehind es a grandes rasgos el código sobre el cual podemos manipular elementos gráficos de nuestras pantallas, este código generalmente se ubica en un archivo separado al archivo donde se encuentra la definición de los elementos gráficos que conforman las pantallas o controles. En el explorador de soluciones Visual Studio y otros IDEs se encargan de que veamos de hecho estos archivos unificados en la jeraquía como si fueran uno solo.

Lo primero que debemos entender es que estos dos archivos son una misma clase (en términos lógicos) sin embargo código está distribuido en dos archivos, es decir son "Clases Parciales", pero para el compilar son simplemente una clase completa.

Ahora bien, el XAML no es más que una Clase Parcial de nuestro CodeBehind, y se hace completa en conjunto con el archivo que lleva el mismo nombre que el XAML pero con la extensión adicional .CS.

Si estás empezando con XAML esto podría sosprenderte, XAML y C# visualmente son absolutamente diferentes, pero si lo piensas mejor, la situación es que las pantallas típicamente son solo estructuras, y XAML basado en XML como ya lo mencionamos antes, es ideal para definir estas estructuras.

Veamos un ejemplo

Como puedes observar escribir estructuras en XAML se hace mucho más sencillo, y visualmente incluso más simple de entender cuales estructuras están jerarquicamente aninadas.

Si además observas con cuidado te darás cuenta que una instancia de un objeto en C# es igual a abrir y cerrar un nodo en XAML. ¿Recuerdas el primer post? Es importante, que por más simples que veas estos dos post entiendas que serán tu mejor arma para darte cuenta que XAML es un lenguaje bastante sencillo de aprender pues de hecho no tiene una sintaxis establecida con palabras claves como HTML si no que es simplemente la capacidad de poder usar clases que existen en C# en estructuras XML.

Alguno podría decir que ha visto más elementos complejos en XAML, pero vamos a ver una página y lentamente descubrir cuales son esas diferencias.

Analicemos esta imagen:

Lo primero que vemos es un nodo o instancia de winPhone:FormsApplicationPage, lo más raro que podemos observar en esto es que a la palabra FormsApplicationPage lo precede separado por dos puntos el prefijo winPhone. Esto es bastante simple de entender, ¿Recuerdas que sucede en C# cuando quieres usar una clase que no están el mismo namespace que la clase en la que estás trabajando? Si, simple, haces un using. Asi que esto podría ser similar a hacer un using, así

using Xamarin.Forms.Platform.WinPhone;

Sin embargo, XAML necesita algo más, necesita que le pongas un alias o apodo al using ¿Los has usado? Algo como:

using winPhone = Xamarin.Forms.Platform.WinPhone;

¿Ves? En C Sharp tambien puede hacerse. En XAML este using equivale a escribir

xmlns:winPhone="clr- namespace:Xamarin.Forms.Platform.WinPhone;assembly=Xamarin.Forms.Platform.WP8"

El parametro assembly indica en que Librería se encuentra ubicado el namespace.

La estructura de los using podría cambiar según la versión de Windows o Windows Phone, o como en este caso de ejemplo que es XAML para Xamarin, pero finalmente siempre cumplen el mismo propósito.

Otras lineas que podrían parecernos extrañas son:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Estas lineas que deben siempre respetarse, representan los esquemas a través de los cuales el XAML valida que la estructura está correcta. Es por eso que no siempre verás elementos con prefijos, por ejemplo

Hacen parte de las estructuras básicas que se definen en los esquemas de XAML mencionados anteriormente.

Si continuamos, hay otra línea que si bien ya no se te hace extraña, es importante explicar

x:Class="Croosy.Cross.WinPhone.MainPage"

Esta propiedad Class, que pertece al esquema x, permite que relacionemos al XAML la Clase Parcial correspondiente.

Por último podemos observar en XAML asignaciones de propiedades de este tipo:

Este tipo de asignaciones las conocemos como bindings y son un tema mucho más extenso. Siendo el propósito de este post solamente quitarte el miedo con respecto a XAML, nos quedaremos por ahora con su nombre en mente, pero como observamos no cambia la sintaxis en el punto de que "siempre son simplemente una asignación de una propiedad"

Por ahora es todo en bases prácticas, sin embargo recomiendo como es lógico, estudiar XAML más ampliamente desde la documentación oficial de MSDN.