Compartir
Contenidos contratados por la marca que se menciona

XAML para humanos con Visual Studio 2015

XAML para humanos con Visual Studio 2015
Guardar
3 Comentarios
Publicidad

Newsletter

Cada vez que nos llega a los desarrolladores un nuevo IDE, es un momento especial con una mezcla de altísima curiosidad y ganas de probar novedades. Entre las novedades principales siempre hay nuevas APIs y otros elementos para poder realizar desarrollos que antes no eran posibles.

Sin embargo, entre el conjunto de novedades siempre suelen venir nuevas herramientas y opciones que facilitan ciertas tareas: obtener más analíticas, mejores medidores de rendimiento, más opciones en emuladores, etc. Desde versiones anteriores de Visual Studio, una de las herramientas más demandadas eran mejoras relacionadas con la edición y gestión de XAML.

XAML, definiendo interfaces de usuario

XAML (acrónimo eXtensible Application Markup Language) es un lenguaje de marcado basado en XML destinado a la creación de interfaces de usuario. Pieza clave desde la llegada de la versión 3.0 del Framework de .NET y WPF. Utilizado como eje en la definición de interfaces de usuario en aplicaciones de escritorio con WPF, también es la clave en interfaces de aplicaciones Silverlight, Windows Phone, Windows Store y ahora en aplicaciones universales Windows con la llegada de Windows 10.

Ejemplo Xaml

Visual Studio 2015, facilitando las cosas

El servicio de lenguaje XAML ha sido recompilado sobre .NET Compiler Platform (“Roslyn”) a fin de proporcionar una experiencia de edición mejorada, más integrada y con más opciones. Con Visual Studio 2015 nos llegan nuevas opciones y herramientas entre las que se incluyen la posibilidad de creación de regiones, facilidad a la hora de editar y acceder a código relacionado de contexto o nuevas herramientas que permiten inspeccionar el árbol de elementos XAML así como modificar todas las propiedades de cualquier elemento.

Blend

Junto Visual Studio 2015 nos llega Blend totalmente rediseñado con una apariencia similar a Visual Studio para facilitar la creación de interfaces de usuario con XAML.

Blend

El tamaño de los paneles ha sido rediseñado para aumentar el espacio de la zona más utilizada y facilitar el proceso de creación y edición. Además:

  • XAML IntelliSense utiliza ahora Roslyn tanto en Visual Studio como Blend ofreciendo una experiencia más rápida y completa.
  • Grandes mejoras en accesibilidad incluyendo gran cantidad de accesos rápidos con teclado además de soporte a pantallas táctiles.
  • Edita en Visual Studio y diseña en Blend. Desde Visual Studio podemos hacer clic derecho sobre una vista para diseñarla en Blend y en sentido contrario, desde Blend podemos hacer clic derecho y seleccionar la opción para editar en Visual Studio.
Edit Visual Studio

Nuevos modos de diseño

Desde Visual Studio 2015 podemos desarrollar aplicaciones para diferentes familias de dispositivos, diversas y diferentes entre sí. Diferentes tamaños de pantalla, resoluciones, características, etc. El ejemplo lo tenemos al desarrollar aplicaciones para Windows 10. Windows 10 ha llegado como la culminación en el viaje hacia la convergencia en el desarrollo entre plataformas Windows. Ahora hablamos de Apps Universales escritas una única vez con un código común tanto para la lógica de negocio como para la interfaz de usuario. Además, generamos un único paquete que mantendrá una interfaz consistente y familiar para el usuario pero adaptada a cada plataforma. Desde el editor visual podemos intercambiar fácilmente la apariencia de nuestra aplicación entre distintas familias de dispositivos.

Familias De Dispositivo

Podemos intercambiar fácilmente entre ellos viendo un pre visualización del comportamiento visual de nuestra aplicación en cada uno de ellos. Nuestra aplicación en una tableta de 8 pulgadas con 1280 x 800 píxeles.

Previsualizacion Tablet

Nuestra aplicación en un teléfono de 5 pulgadas con 1920 x 1080 píxeles.

Previsualizacion Phone

Además podremos modificar la rotación de la pantalla, tipo de contraste o tema a utilizar de una forma rápida y sencilla.

Edición en contexto

Ahora desde Visual Studio 2015 podremos seleccionar un elemento, ya sea en la vista de código como en la visual, y poder editar su plantilla o estilo con facilidad, ya sea el aplicado en ese momento, una copia o uno nuevo.

Edicion En Contexto

En caso de utilizar diccionario de recursos, Visual Studio nos re direccionará directamente al fichero adecuado.

NOTA: Esta característica ya estaba incluida previamente en Blend.

XAML Peak

En una aplicación media contaremos con un conjunto de estilos y plantillas organizados en diferentes recursos en ocasiones incluso en diferentes librerías. En proyectos de cierta envergadura, una tarea como encontrar un estilo concreto aplicado a lo largo de la aplicación podía llegar a ser una tarea más engorrosa de lo deseado. Ahora lo tenemos más fácil. Veamos un ejemplo.

Xaml Peek

Estamos ante una aplicación universal Windows donde mostramos varios elementos de tipo rectángulo. Cada rectángulo hace uso de un estilo llamado RectangleStyle. Podemos hacer clic derecho sobre el estilo y elegir la opción llamada “Ver la definición” o pulsar ALT+F12.

Xaml Peek Definition

¿Veis lo ocurrido? Tenemos en la misma vista la definición de la vista junto a la definición del estilo. Fantástico! Pero la novedad no termina en este punto. Podemos por supuesto modificar el estilo, en nuestro ejemplo cambiando el tamaño usado por el rectángulo, guardar cambios y directamente ver los cambios en el diseñador.

Xaml Peek Design

NOTA: Desde Visual Studio 2013 teníamos la opción ir a definición que nos permitía navegar directamente al fichero donde teníamos la definición del recurso o estilo.

Como podemos ver una características nueva tremendamente útil cuando trabajamos con recursos y estilos. Pero no estamos exclusivamente limitados a código XAML. De igual forma, podemos utilizar esta característica con código C#.

Organizando el código, usando regiones

Otra característica nueva incluida en el editor XAML en Visual Studio 2015 es el uso de regiones. Una opción altamente demandada desde versiones previas. Su uso es muy similar al ya disponible para código C#.

Xaml Region

Podemos expandir y contraer la región.

Xaml Region 02

Muy útil para organizar, marcar y limitar código XAML.

Visual Tree Inspector

El Árbol visual dinámico es la primera de dos piezas fundamentales para depurar UI XAML.

Visual Tree Inspector

Esta herramienta nos permite ver el árbol de controles de la App en ejecución indicando el número de elementos hijos de cada elemento ideal para entender la estructura visual de una vista compleja y entender problemas de rendimiento. Además, haciendo sobre un elemento podemos ver el archivo XAML donde está definido quedando marcado. Conociendo la estructura de la vista es fácil navegar por los elementos del árbol. Sin embargo, ¿qué ocurre si la vista es compleja y no conocemos la estructura? La herramienta incluye una opción para poder seleccionar elementos visuales de forma muy sencilla con un simple clic de ratón.

Visual Tree Inspector Bar

Seleccionando la primera opción en la herramienta habilitaremos la selección de elementos de la App en ejecución. Una vez habilitado, podemos seleccionar elementos en la App en ejecución quedando marcadas también en el árbol de controles y mostrando el código XAML de la definición.

Visual Tree Inspector 02

El elemento seleccionado queda bordeado de rojo. También tenemos la opción de ver adorners de diseño de la App en tiempo de ejecución. Podemos activar esta opción con el segundo botón del conjunto de botones disponible en la herramienta. Veremos distintas marcas de diseño del elemento seleccionando dándonos información relacionada con la posición y tamaño del elemento.

Visual Tree Inspector 03

Live Property Explorer

La segunda pieza relacionada con las herramientas de depuración de UI XAML es el explorador de propiedades dinámico. Esta herramienta nos permite ver todas las propiedades del elemento seleccionado, incluso aquellas sobrescritas. Podemos ver si las propiedades están establecidas con valores directos, accediendo a recursos, etc. Además, y la parte más interesante, permite cambiar los valores de la App en ejecución directamente viendo los cambios de manera inmediata.

Live Property Explorer

Esta herramienta nos permite ver todas las propiedades del elemento seleccionado, incluso aquellas sobrescritas. Podemos ver si las propiedades están establecidas con valores directos, accediendo a recursos, etc. Además, y la parte más interesante, permite cambiar los valores de la App en ejecución directamente viendo los cambios de manera inmediata.

Xaml Live Tools

Por si fuese poco, con esta herramienta podemos ver el contexto actual sobre un elemento, pudiendo analizar si todo es correcto facilitando enormemente la detección de problemas de Data Binding. Sin duda una novedad potente.

¿Queréis conocer todo un poco más a fondo?

Si os habéis quedado con ganas de conocer todo más a fondo os recomendamos ver el siguiente video de Channel 9, titulado Mejoras del editor de código para desarrolladores XAML de la mano de Harikrishna Menon, gestor de programas de Visual Studio 2015.

Conclusiones

Visual Studio 2015 viene cargado de nuevas funcionalidades y herramientas destinadas a poder trabajar con XAML de una forma más simple y accesible además de contar con nuevas herramientas que nos permiten realizar una gestión mucho más visual o lo que es lo mismo, nos permite trabajar con un XAML de una forma más humana.

En Visual Studio:

Publicidad

También te puede gustar

Comentarios cerrados

Ver más artículos