Si vienes usando Visual Studio probablemente sepas acerca de la posibilidad de extensibilidad. Crear extensiones para cubrir o mejorar cierta funcionalidad (plantilla de proyectos, nueva herramienta, etc.). ¿Sabías que es también posible en Visual Studio para macOS?.
En esta sesión, conoceremos como extender Visual Studio para macOS; como depurar una extensión así como ver todos los puntos principales de extensión todo a base de ejemplos.
El lugar
El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:
E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula por confirmar Av. Reina Mercedes s/n Sevilla Se 41012
La fecha
Será el próximo Jueves, 11 de Abril de 19:00h a 20:00h (GMT+1).
A la hora de trabajar con un proyecto en Git, Visual Studio para macOS cuenta con soporte integrado. Sin embargo, recientemente probé git-history. Sin duda, una forma intuitiva y muy interesante para ver le historial de cambios en un archivo. Así que, ¿por qué no tenerlo integrado en Visual Studio para macOS?.
Git History
Git History llega como addin para Visual Studio para macOS como una forma alternativa sencilla y rápida de ver el historial de cambios de un fichero.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Git History».
Y pulsamos Install…
¿Qué aporta?
Haciendo clic derecho sobre cualquier archivo de un proyecto que use Git tendremos una nueva opción:
Lo que nos abrirá una nueva vista con el historial del archivo:
Veamos como usar el addin directamente:
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
A la hora de aprender un lenguaje o framework es ideal contar con una buena documentación, pero, contar con ejemplos complementarios es aún mejor si cabe. Poder ver el código, modificarlo y probar los resultados. Gran parte de la documentación Xamarin cuenta con ejemplos oficiales asociados disponibles en GitHub. ¿Y si pudiésemos acceder a los ejemplos de forma aún más sencilla?.
Samples Importer
Llega Samples Importer, un nuevo addin para Visual Studio para macOS, que permite acceder a ejemplos oficiales de:
Xamarin.Android
Xamarin.iOS
Xamarin.Forms
Xamarin.Mac
Pudiendo ver la información básica de cada ejemplo (título, descripción, plataformas, tags, etc.), filtrar y directamente descargar además de abrir el ejemplo directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por “Samples Importer”:
Y pulsamos Install…
Tras instalar, lo primero que debemos hacer es configurar el addin. Samples Importer obtiene toda la información de cada ejemplo (así como el código del mismo) desde GitHub con el firme objetivo de ofrecer siempre el ejemplo actualizado a la última. Para ello, es necesario añadir un Personal Access Token en la configuración de Visual Studio:
NOTA: Los ejemplos se descargarán automáticamente a una ruta temporal. Sin embargo, es posible elegir una ruta específica en la configuración del addin.
¿Qué aporta?
Desde el menu Tools tenemos acceso a una nueva opción Samples Importer. Tenemos acceso a un nuevo dialogo donde podemos acceder a los ejemplos oficiales de Xamarin (Android, iOS, Xamarin.Forms, macOS). Acceder a un ejemplo, para ver el código y probar es tan sencillo como seleccionar y pulsar el botón Continue:
Tras pulsar el botón, se descargará el ejemplo seleccionado a la carpeta establecida en la configuración del addin (se utiliza una carpeta temporal en caso de no establecer ninguna carpeta específica).
A continuación, una serie de capturas del addin con diferentes ejemplos:
Lo próximo
Para la próxima versión del addin se incluirán las siguientes mejoras:
En la actual versión se buscan ejemplos directamente de las carpetas de repositorios oficiales de ejemplos Xamarin. Sin embargo, la búsqueda se realiza en las carpetas de primer nivel. Existen carpetas con subcarpetas con más ejemplos. Se añadirá una búsqueda en profundidad.
Cache. Se incluirá una cache de ejemplos de modo que si, no hay cambios en el repositorio, se utilizará la cache y se evitará la carga haciendo peticiones a GitHub.
Se añadirá una opción para cargar ejemplos de la comunidad.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
A la hora de trabajar con nuestros proyectos, contamos con imágenes. A veces serán recursos para la gestión del icono de la aplicación, otras serán recursos a utilizar en la aplicación. En cualquier caso, necesitamos gestionar una serie de acciones:
Cuidar el tamaño de las imágenes. Tener un set de imágenes optimizadas es fundamental para garantizar el correcto funcionamiento de la aplicación cuidando el consumo de memoria.
Generar la misma imagen en diferentes tamaños. Redimensionar una imagen o crear diferentes imágenes con diferentes tamaños para crear el icono de una aplicación móvil.
Ver listado de imágenes usadas (y cuales no), copiar y mover imágenes entre proyectos, etc.
Asset Studio
Asset Studio llega como un addin para Visual Studio para macOS para ofrecer diferentes opciones relacionadas con el tratamiento y gestión de imágenes.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Asset Studio»:
Y pulsamos Install…
¿Qué aporta?
Actualmente, esta primera versión del addin se centra en optimizar las imágenes. Podemos seleccionar una imagen específica, y al hacer clic derecho tendremos la opción
Tras pulsar la opción, aparecerá un dialogo donde veremos la información básica de la imagen (previsualización, tamaño, peso y nombre) y podremos optimizarla.
Si hacemos clic derecho sobre una carpeta en lugar de una imagen, se buscarán todas las imágenes que contiene la carpeta (y sus subcarpetas).
Veremos un listado con todas las imágenes con su información básica (nombre y tamaño):
Veámoslo en funcionamiento:
Para optimizar las imágenes se utiliza la API de TinyPNG que requiere un API Key para funcionar. Para añadir el API Key se debe acceder a las preferencias de Visual Studio, opción Other > Asset Studio:
NOTA: Desde las opción de configuración del addin se encontrará un enlace para crear un API Key.
Lo próximo
Para las próximas versiones, se incluirá un gestor de imágenes junto con una opción para generar los iconos necesarios para Android e iOS en diferentes tamaños partiendo desde una imagen.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
En ocasiones, necesitamos borrar las carpetas de salida (bin y obj) y puede llegar a ser un proceso tedioso y manual sobretodo en caso de contar con muchos proyectos en la solución.
Sweeper
Sweeper llega en forma de addin para Visual Studio para macOS para facilitar el borrado de carpetas bin y obj además de otras carpetas importantes.
¿Cómo instalar?
Accedemos al menu principal de Visual Studio y seleccionamos Extensions…
Buscamos por «Sweeper»:
Pulsamos Install…
¿Qué aporta?
Con una solución abierta, podemos hacer clic derecho sobre la solución o un proyecto específico y veremos:
El addin incluye dos opciones extras:
Clean /bin and /obj Directories: Limpia las carpetas bin y obj. Al seleccionar una solución limpiará los directorios de salida de cada proyecto.
Clean /packages Directory: Limpia la carpeta de paquetes NuGet.
NOTA: Al recompilar la solución se volverán a descargar los paquetes NuGet.
Lo próximo
Para próximas versiones hay ya planeadas nuevas opciones como:
Comprimir un proyecto.
limpiar y comprimir un proyecto.
Comprimir la salida de un proyecto.
¿Qué te parece el addin?, ¿qué te gustaría añadir?. Recuerda, cualquier comentario es bienvenido en la entrada!.
Como desarrolladores, a la hora de programar en determinadas ocasiones escribimos código repetitivo. Si nos centramos en el desarrollo de aplicaciones Xamarin.Forms desde Visual Studio para macOS, por ejemplo; a la hora de definir ViewModels tenemos código repetitivo como la definición de propiedades o comandos.
public string Name
{
get => _name;
set => SetProperty(ref _name, value);
}
public string SurName
{
get => _surname;
set => SetProperty(ref _surname, value);
}
¿Y si tenemos una forma de mejorar nuestra productividad a la hora de escribir código repetitivo / similar?
Creando Code Snippets
En Visual Studio para macOS cuenta con una solución para este problema, code snippets.
¿Qué es un code snippet?
Un snippet de código es una pieza de texto guardada como plantilla, reutilizable y que puede contar con argumentos reemplazables por valores al ser utilizados.
Veamos un ejemplo:
private $type$ $field$;
public $type$ $property$
{
get => $field$;
set => SetProperty(ref $field$, value);
}
Cada parte del código rodeada por $, representa un argumento que se puede reemplazar por un valor. En el ejemplo anterior usamos tres argumentos para controlar el tipo de la propiedad, el nombre de la variable y el nombre de la propiedad.
Bien, pero…¿y cómo creamos code snnipets?.
Accedemos a la ventana de Preferencias de Visual Studio para macOS. Y desde aquí al editor de Code Snippets.
Debemos pulsar sobre el botón Add para añadir un nuevo snippet.
Tenemos que rellenar:
Shortcut: Una de las partes más importantes. Es el atajo que utilizaremos con IntelliSense para utilizar el snippet.
Group: Representa la carpeta donde se guardará el snippet dentro del panel de preferencias de Code Snippet.
Description: La descripción del snippet. Esta descripción aparecerá en el tooltip al utilizarlo.
Mime: El mime-type del lenguaje de código que el code snippet soporta.
Template Text: El contenido del snippet de código.
Utilizando Code Snippets
Llega el momento que esperábamos!. Escribimos el valor del Shortcut de nuestro snippet.
Pulsamos el tabulador y…
Voila!. Basta con definir el tipo y nombre de variable y propiedad para tener una propiedad pública completa en la ViewModel.
Los Code Snippets son fáciles de crear y usar pero ayudan a acelerar la creación de código aumentando nuestra productivad.
¿Usabas los snippets?. Recuerda, puedes dejar cualquier duda en los comentarios del artículo.
Visual Studio para macOS va mejorando versión tras versión, pero hay funcionalidad cubierta o mejorada por la comunidad y terceros. Hay ejemplos destacados como LiveXAML o MFractor. Sin embargo, ¿conoces más addins?, ¿cuáles?.
Recopilatorio de addins y herramientas para Visual Studio para macOS
De igual forma que con Xamarin.Forms, tras ir anotando addins y herramientas decidí moverlas a repositorio público, he creado un repositorio público donde agrupar todo el conjunto de addins, herramientas y cualquier tipo de documentación o elemento relacionado con Visual Studio para macOS.
Tienes el repositorio disponible en GitHub:
¿Qué te parece?, ¿utilizas addins que no estan en la lista?. Se aceptan PRs, hagamos entre todos la lista lo más completa posible!
Visual Studio para macOS y Windows cuentan con modelos de extensión diferentes, modelos para crear interfaces de usuario diferentes y habitualmente trasladar un addin de macOS a una extension en Windows o viceversa, es costoso. ¿Podemos simplificar el proceso?, ¿podemos lograr compartir más elementos?.
En este artículo, vamos a ver como crear addins para Visual Studio macOS así como extensiones para Visual Studio Windows utilizando Xamarin.Forms para lograr compartir la UI.
Utilizaremos Measurer4000, herramienta diseñada para obtener métricas de código compartido en proyectos Xamarin. Nuestro objetivo será añadir la herramienta dentro de Visual Studio.
Add-ins para Visual Studio macOS
La arquitectura de Visual Studio para macOS es extensible. La forma de extender se basa en rutas de extensión que permiten que terceros extiendan el comportamiento. Por ejemplo: para extender la zona de edición de código, se expone /MonoDevelop/SourceEditor2/ContextMenu/Editor permitiendo añadir nuevos comandos en el menu contextual al hacer clic derecho.
AddIn Maker es un proyecto Open Source creado por Mikayla Hutchinson que permite el desarrollo y la depuración de add-ins para Visual Studio macOS desde Visual Studio macOS.
Para la gestión de la interfaz de usuario se utiliza GTK# o XWT.
Extensiones para Visual Studio Windows
En Windows tenemos la posibilidad de extender practicamente cualquier parte: menús, barras de herramientas, ventanas, etc.
Para crear extensiones se deben instalar las opciones de Desarrollo de extensiones de Visual Studio.
Para crear extensiones contamos con una plantilla de proyecto VSIX vacía que puede usar junto con las nuevas plantillas de elemento que crean extensiones de editor, ventanas de herramientas y comandos de menú.
Para la definición de la UI, utilizamos WPF.
Xamarin.Forms
Con la llegada de Xamarin.Forms 3.0 encontramos soporte a Linux gracias a un nuevo backend basado en GTK# además de un backend WPF.
Por lo que si usamos GTK# y WPF, ¿podríamos usar XAML y Xamarin.Forms para definir la UI de add-ins para Visual Studio tanto para macOS como para Windows?, ¿podría ser compartida?.
El proyecto en macOS
Comenzamos creando un proyecto de tipo IDE Extension:
Este proyecto ya cuenta con la referencia a MonoDevelop.Addins. Continuamos añadiendo el paquete NuGet de Xamarin.Forms y Xamarin.Forms.Platform.GTK.
Para trabajar con Xamarin.Forms, debemos realizar la inicialización. La mejor opción para realizar esta tarea es realizarla nada más se abra el IDE. Para ello, vamos a crear un comando:
public class InitXamarinFormsCommand : CommandHandler
{
protected override void Run()
{
Forms.Init();
}
}
Y modificaremos el archivo Manifiest.addin.xml para añadir nuestro comando como punto de extensión en el arranque del IDE.
Fíjate que en esta ocasión, añadiremos un nuevo comando en el menu principal, opción herramientas.
Veamos la definición del comando:
public class MeasurerCommand : CommandHandler
{
protected override void Update(CommandInfo info)
{
info.Visible = true;
var projects = IdeApp.Workspace.GetAllProjects();
if (projects.Any())
info.Enabled = true;
else
info.Enabled = false;
}
protected override void Run()
{
new MeasurerWindow().Show();
}
}
Comenzamos utilizando IdeApp. La clase estática MonoDevelop.Ide.IdeApp es su punto de entrada de extension de Visual Studio. Expone Workbench, Workspace, múltiples servicios así como métodos relacionados con el ciclo de vida del IDE.
Habitualmente, la clase IdeApp se utiliza para acceder a Workbench o a Workspace. IdeApp.Wortkspace se usa para acceder al estado general del Ide durante una sesión de usuario. Podemos abrir nuevos proyectos y documentos, detectar archivos abiertos y mucho más.
En nuestro caso, lo utilizamos para detectar si el usuario tiene abierto al menos un proyecto.
En caso de abrir un proyecto, habilitamos la opción.
Al ejecutar el comando lanzamos una ventana llamada MeasurerWindow.
public class MeasurerWindow: Gtk.Window
{
public MeasurerWindow()
: base(Gtk.WindowType.Toplevel)
{
Title = "Measurer4000";
WindowPosition = Gtk.WindowPosition.Center;
var page = new MeasurerView();
Add(page.CreateContainer());
SetSizeRequest(800, 480);
}
}
Es una ventana realizada con Gtk cuyo contenido utilizará una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es embeber el contenido. Tenemos disponible el método de extensión CreateContainer de Xamarin.Forms en el backend GTK para obtener la ContentPage como contenido nativo.
El proyecto en Windows
Comenzamos el proyecto en Windows añadiendo un comando.
Los menús y las barras de herramientas son la forma en que los usuarios acceden a los comandos en el VSPackage. Los comandos son funciones que realizan tareas, como mostrar una ventana o crear un nuevo archivo. Los menús y barras de herramientas son formas gráficas convenientes para presentar los comandos a los usuarios.
En este comando realizamos la inicializacion de Xamarin.Forms:
public static void Initialize(Package package)
{
Instance = new MeasurerCommand(package);
Forms.Init();
}
Al ejecutar el comando:
private void MenuItemCallback(object sender, EventArgs e)
{
var measurerWindow = new MeasurerWindow();
var measurerContent = new MeasurerView().ToFrameworkElement();
measurerWindow.Content = measurerContent;
measurerWindow.Show();
}
Lanzamos una ventana llamada MeasurerWindow (al igual que ya hacíamos en macOS), ventana WPF cuyo contenido es una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es de nuevo embeber el contenido. Tenemos disponible el método de extensión ToFrameworkElement de Xamarin.Forms en el backend WPF para obtener la ContentPage como contenido nativo.
Tanto en macOS como en Windows utilizamos una ContentPage para definir la interfaz de usuario. Hablamos de una interfaz definida en XAML que puede ser compartida en macOS y Windows, donde en cada plataforma, se utilizará un backend diferente para renderizar la UI con GTK# en el caso de macOS y con WPF en el caso de Windows.
En la interfaz utilizaremos algunos Labels donde msotrar información con cantidad de líneas así como porcentajes de código compartido y código específico. Por otro lado, utilizamos Oxyplot para mostrar gráficos de tipo tarta.
public MeasurerView()
{
InitializeComponent();
BindingContext = new CustomMainViewModel();
}
Toda la lógica del addin, modelos, ViewModels, etc. es la ya existente en la herramienta. Utilizaremos MVVM de exactamente la misma forma utilizada para crear Apps, en nuestro addin. En la ViewModel es necesario pasar la ruta de la solución para que pueda analizar y obtener toda la información.
En macOS tenemos en IdeApp.Workspace lo necesario para obtener la información necesaria de la solución con la que trabaja el usuario. Podemos obtener el listado de soluciones con el metodo GetAllSolutions.
var solutionPath = Path.Combine(Directory.GetCurrentDirectory(), solution.FileName);
_viewModel.MeasureSolutionByPath(solutionPath);
En el caso de Windows, obtenemos la instancia del objeto DTE (Development Tools Environment). DTE representa el entorno de desarrollo integrado (IDE) de Visual Studio y es el objeto de máximo nivel en la jerarquía. Nos otorga acceso a una gran variedad de propiedad y métodos para obtener información de la solución, propiedades, ventanas, etc.
var solution = ((DTE)ServiceProvider.GlobalProvider.GetService(typeof(DTE))).Solution;
var solutionPath = solution.FullName;
_viewModel.MeasureSolutionByPath(solutionPath);
Accedemos a la solución, y extraemos la ruta a la misma.
El resultado en macOS:
Y en Windows:
¿Qué te parece?. Quizás en un futuro sea una opción a la hora de extender Visual Studio. Ahora que tenemos el IDE en más de un sistema operativo, es hora de pensar en contar con una opción para crear extensiones que compartan la mayor cantidad de código posible.
Con la llegada de la última Preview de Visual Studio 2017, la versión 15.7, llegan grandes mejoras en la experiencia al editar XAML de Xamarin.Forms. Ahora el engine que gestiona IntelliSense de XAML de Xamarin.Forms pasa a ser el mismo que WPF o UWP. Hablamos de mejoras en autocompletado, sugerencias, extensiones de marcado o navegación entre diferente código.
En este artículo, vamos a realizar un rápido repaso por las mejoras principales.
NOTA: Recuerda, hablamos de una versión Preview de Visual Studio. Es posible contar con la versión Preview instalada junto a la versión estable aunque estas mejoras aún no estan disponibles en la versión estable.
Un repaso a las mejoras principales
Autocompletado
Comenzamos con la funcionalidad básica, el autocompletado. Esta versión mejora la búsqueda de coincidencias con lo escrito obteniendo resultados aun con valores no correctos, incompletos, o con minúsculas o mayúsculas.
Se obtiene ayuda para completar tanto elementos visuales como paneles o controles, así como sus propiedades o eventos.
Extensiones de marcado
Las extensiones de marcado son una forma de obtener un valor que no sea específico de tipo primitivo o un objeto XAML. Mediante la apertura y cierre de llaves, se define en su interior lo que se conoce como extensión de marcado.
Otra necesidad muy habitual al trabajar con XAML dada la alta probabilidad de requerir hacer un enlace a datos o acceder a un recurso:
Tenemos autocompletado con extensiones de marcado como Binding, StaticResource o x:Static, pero también con aquellas personalizadas.
Namespaces
Ahora también tenemos sugerencias al trabajar con XML namespaces:
Sugerencias
También tendremos sugerencias, como al editar C# aparecerá la linterna, principalmente indicando que algo no es correcto para permitir corregir el problema. Renombrar, crear espacio de nombres, etc…
Resolución de recursos
Los recursos definidos en la misma página son detectados por IntelliSense facilitando sugerencias:
NOTA: De momento, no se detectan recursos a nivel de aplicación, solo a nivel de página.
Errores
Cualquier error de marcado se indicará subrayando en azul la línea problemática.
Sin duda un paso sólido y necesario adelante de una de las opciones más reclamadas. Aun hay posibilidad de mejora (recursos a nivel de aplicación, más opciones de autocompletado como con estilos, etc.) pero tras probar desde pequeños proyectos a algunos de mayor tamaño, la mejora es notoria. Y a ti, ¿que te parece?.
Visual Studio para macOS esta basado en MonoDevelop. Antes de lanzarnos de lleno a crear un Add-in es importante conocer lo que se conoce como el modelo de extensión. La arquitectura de Visual Studio para macOS es extensible. La forma de extender se basa en rutas de extensión que permiten que terceros extiendan el comportamiento. Por ejemplo: para extender la zona de edición de código, se expone /MonoDevelop/SourceEditor2/ContextMenu/Editor permitiendo añadir nuevos comandos en el menu contextual al hacer clic derecho.
AddIn Maker
AddIn Maker es un proyecto Open Source creado por Mikayla Hutchinson que permite el desarrollo y la depuración de add-ins para Visual Studio macOS desde Visual Studio macOS.
Para añadirlo, nos dirimos al menu principal de Visual Studio y pulsamos sobre Addins…
Desde aquí podemos gestionar Addins en Visual Studio.
Crear proyecto de Add-in
Tras instalar AddIn Maker, tenemos accefso a un nuevo tipo de proyecto, Addin.
Seleccionamos la nueva plantilla, asignamos un nombre y continuamos.
Xamarin.Forms GTK
Llegamos a este punto, habitualmente, crearíamos nuestra interfaz de usuario utilizando GTK# o XWT. Cuando hablamos de XWT nos referimos a un tookit cross platform de UI para crear aplicaciones de escritorio con Mono y .NET.
Recientemente, hemos recibido los paquetes NuGet de la versión Preview de Xamarin.Forms 3.o. Entre las diferentes novedades encontramos soporte a Linux. El soporte de Linux se logra con un nuevo backend basado en GTK#.
Por lo que si usamos GTK#, ¿podríamos usar XAML y Xamarin.Forms para definir la UI de add-ins para Visual Studio?.
Es una posibilidad que personalmente he pensado en multitud de ocasiones e incluso lo he llegado a hablar con miembros de la comunidad Xamarin como con Matthew Robbins creador de MFRactor (tuvimos una genial conversación en el pasado MVP Summit).
Manos a la obra!
Comenzamos creando un proyecto de tipo IDE Extension:
Este proyecto ya cuenta con la referencia a MonoDevelop.Addins, versión 0.4.4 al escribir este artículo. Continuamos añadiendo el paquete NuGet de Xamarin.Forms
Para trabajar con Xamarin.Forms, debemos realizar la inicialización. La mejor opción para realizar esta tarea es realizarla nada más se abra el IDE. Para ello, vamos a crear un comando:
public class InitXamarinFormsCommand : CommandHandler
{
protected override void Run()
{
Forms.Init();
}
}
Y modificaremos el archivo Manifiest.addin.xml para añadir nuestro comando como punto de extensión en el arranque del IDE.
Llega la hora de extender. En nuestro caso, vamos a crear un sencillo Previewer de XAML para Xamarin.Forms.
NOTA: El objetivo de este ejemplo es demostrar como utilizar Xamarin.Forms para definir la UI de extensiones par Visual Studio. No estamos ante un nuevo Previewer de XAML. Aunque el funcionamiento es bastante rápido y correcto, no es el objetivo buscado.
Fíjate que en esta ocasión, añadiremos un nuevo comando en el menu principal, opción editar.
Veamos la definición del comando:
public class PreviewXAMLCommand : CommandHandler
{
protected override void Run()
{
Pad pad = null;
var pads = IdeApp.Workbench.Pads;
foreach (var p in IdeApp.Workbench.Pads)
{
if (string.Equals(p.Id, "LiveXAMLAddin.Pads.XAMLPreviewerPad", StringComparison.OrdinalIgnoreCase))
{
pad = p;
}
}
if (pad == null)
{
var content = new Pads.XAMLPreviewerPad();
pad = IdeApp.Workbench.ShowPad(content, "LiveXAMLAddin.Pads.XAMLPreviewerPad", "XAML Previewer", "Right", null);
if (pad == null)
return;
}
pad.Sticky = true;
pad.AutoHide = false;
pad.BringToFront();
}
protected override void Update(CommandInfo info)
{
info.Visible = true;
if (IdeApp.Workbench.ActiveDocument != null && IdeApp.Workbench.ActiveDocument.FileName.ToString().Contains(".xaml"))
{
info.Enabled = true;
}
else
{
info.Enabled = false;
}
}
}
Reconoces a un Pad como un panel lateral anclable tanto a izquierda como derecha. En esta ocasión, creamos un nuevo Pad donde mostrar la previsualización de XAML, de título «XAML Previewer» y anclado a la derecha.
Para habilitar la opción de menu, vamos a determinar si el usuario esta editando un archivo XAML. Para ello, utilizamos IdeApp.Workbench.ActiveDocument. Tenemos posibilidad de acceder a toda la información del documento, como su formato o contenido.
Utilizando XAML para definir UI
¿Qué vamos a mostrar en el Pad?
Vamos a utilizar XAML!. Creamos una nueva ContentPage:
Tenemos acceso a todas las opciones disponibles con XAML, entre ellas, sistema de enlace a datos, etc. Para utilizar la página XAML como contenido del Pad vamos a embeber el contenido:
var page = new PreviewerView();
var pageContainer = page.CreateContainer();
Tenemos disponible el método de extensión CreateContainer de Xamarin.Forms en el backend GTK para obtener la ContentPage como contenido nativo.
Cafa vez que se cambie el texto de la página XAML en el editor de Visual Studio, vamos a actualizar la previsualización XAML:
Podemos utilizar MVVM (de hecho en este ejemplo se usa) en combinación con toda la potencia y las opciones de extensión que tenemos.
El resultado:
Tienes el código fuente del ejemplo disponible GitHub:
¿Qué te parece?. Quizás en un futuro sea una opción a la hora de extender Visual Studio. Ahora que tenemos el IDE en más de un sistema operativo, es hora de pensar en contar con una opción para crear extensiones que compartan la mayor cantidad de código posible.