Productividad trabajando con XAML
Conseguir aplicaciones con una interfaz rica, elegante y perfectamente adaptada a cada plataforma requiere un proceso de repetición de cambio, compilación, depuración y vuelta a repetir.
Contamos con opciones interesantes para solventar este problema como Previewer, Gorilla Player o Xamarin Live Player. Ya vimos todas las herramientas anteriores, ahora, nos llega el turno de probar otra opción muy interesante, Live XAML.
Live XAML
Live XAML es una extensión disponible para Visual Studio tanto en Windows como en macOS que se encarga de inyectar el código necesario para reaccionar ante cualquier cambio de XAML. Esto significa que, con tu aplicación en modo depuración en un emulador o en un dispositivo, puedes ver al vuelo cualquier cambio en XAML.
La instalación
Desde la página oficial de la herramienta podemos descargar una extensión para Visual Studio disponible tanto para Windows como para macOS.
Tras descargar e instalar la extensión todo listo. Uno de los grandes puntos positivos de la herramienta es su facilidad de uso, tras instalar, para utilizar la herramienta en cada proyecto bastará con indicarle a la herramienta que añada paquete NuGet en la librería compartida llamado LiveXAML o bien, añadir el paquete a mano.
Comenzamos con un ejemplo sencillo
Partimos de un proyecto básico, la plantilla vacía de Xamarin.Forms. Lanzamos el proyecto en depuración.
Comenzamos con las pruebas más sencillas posibles, cambiar propiedades básicas como el texto o el color del Label añadido por defecto:
Continuamos con otros requisitos básicos al desarrollar en aplicaciones, el uso de recursos y estilos.
La herramienta se comporta sin problemas al utilizar recursos tanto a nivel de elemento, como a nivel de página como a nivel de aplicación.
Probamos posibilidades más complejas
Tiene buena pinta, pero…¿y será válido con aplicaciones más complejas?. Recientemente, en el blog vimos un recopilatorio de ejemplos Xamarin.Forms con intefaz atractiva. Entre ese recopilatorio se encuentra un ejemplo que intenta reproducir la interfaz de Netflix en Xamarin.Forms. Vamos a utilizarla.
Podemos realizar pruebas con enlace a datos en sus difentes modos.
La cabecera con transparencias haciendo uso de Custom Renderer, efecto Parallax, el uso de controles personales para listados, etc. Estamos trabajando con una página relativamente compleja. Podemos realizar cambios al vuelo y realizar pruebas directamente. Por ejemplo, cambios en el tamaño de la cabecera y pruebas con el efecto Parallax:
Puedes descargar el ejemplo de Netflix desde GitHub:
¿Aumentamos la complejidad?
¿Funcionaría con .NET Standard?, ¿y con librerías personalizadas?. Pasamos a continuación a ver un ejemplo haciendo uso de .NET Standard, SkiaSharp y la librería Microcharts que aporta diversas gráficas de gran belleza y posibilidades creadas con SkiaSharp.
Creamos un pequeño control que añade animaciones a la gráfica. Ajustar la velocidad de la animación, tamaño de fuentes, elementos, etc. Sería fantástico poder aplicar estos cambios al vuelo, sin necesidad de parar, recompilar, esperar el despliegue, etc., ¿verdad?.
Fíjate que en la cabecera de la gráfica hacemos también uso de efectos. Aplicamos un efecto que añade sombras al texto.
Puedes descargar el ejemplo desde GitHub:
Conclusiones
Tras todas las pruebas que has podido ver anteriormente (más muchas otras), los resultados son excelentes. No he encontrado errores de renderizado, comunicación o funcionamiento en general de la herramienta. Así que, debemos destacar su fácil instalación y su buen hacer. Tampoco es necesario aprender nada nuevo ya que todo se integra en Visual Studio y con el flujo habitual. Eso si, recuerda, estamos ante una herramienta que tiene coste.
Más información
- Live XAML
- Blog de Jim Bennett: Using LiveXAML to improve your Xamarin Forms UIs
- NuGet: LiveXAML