- XAML Studio permet editar i previsualitzar XAML en viu, amb interacció real sobre la interfície.
- Inclou eines avançades com Binding Debugger, Data Context Editor i exploradors visuals.
- Podeu descarregar-vos des de Microsoft Store o compilar-vos des del vostre repositori open source sota llicència MIT.
- Ofereix control sobre la telemetria i s'orienta a alleujar la frustració amb els dissenyadors de Visual Studio.
Si treballeu amb XAML per crear interfícies a Windows , segurament us heu trobat més d'una vegada lluitant amb el dissenyador de Visual Studio, temps de compilació eterns o errors d'enllaç de dades impossibles de localitzar. Aquí és on entra en joc XAML Studio, una aplicació pensada precisament perquè puguis provar, depurar i experimentar amb XAML de forma ràpida i sense tanta fricció.
Al llarg d'aquest article veurem amb detall què és XAML Studio, com us ajuda a prototipar interfícies WinUI i UWP en qüestió de minuts, quines eines porta per depurar enllaços, gestionar dades de prova, navegar per l'arbre visual i molt més. Veuràs també com descarregar-lo des de la Microsoft Store, quins són els requisits si vols compilar-ho des del codi font, i com encaixa tot això en el context actual de desenvolupadors una mica cremats amb els dissenyadors de Visual Studio.
Què és XAML Studio i per a qui està pensat
XAML Studio és una aplicació per a Windows centrada en el desenvolupament amb XAML , creada originalment com un projecte de Microsoft Garage i avui publicada com a projecte obert dins de la .NET Foundation. El seu objectiu principal és permetre't escriure XAML, veure'l funcionant a l'instant i poder interactuar amb la interfície com si fos part de la teva app.
Està especialment orientat a desenvolupadors que treballen amb WinUI XAML i aplicacions UWP , encara que també resulta molt útil si vens de WPF i vols experimentar amb conceptes moderns de disseny Fluent, estils, plantilles i estats visuals sense haver de muntar una solució completa cada cop.
A diferència de Visual Studio, que està més pensat per al cicle complet de desenvolupament, XAML Studio actua com un laboratori d'idees per a la capa visual : copies un fragment XAML, ho pegues, ho ajustes, veus el resultat al moment, jugues amb les dades, revises bindings i, quan estàs satisfet, t'emportes el codi al teu projecte real.
A més, com que és un projecte open source, la seva evolució està oberta a la comunitat: qualsevol desenvolupador pot revisar el codi, proposar canvis , enviar millores i participar en la discussió de noves funcionalitats a través del dipòsit públic.
Funcions clau de XAML Studio per prototipar interfícies
Un dels punts forts de XAML Studio és que reuneix en una sola aplicació una sèrie d'eines pensades per provar dissenys, maquetar pantalles i depurar enllaços amb el mínim d'espera possible. No es tracta només d'un visor XAML, sinó d'un entorn interactiu per a iterar ràpidament sobre la vostra UI.
Entre les seves capacitats més importants hi ha l'edició en viu: podeu escriure o modificar codi XAML a l'editor i veure a l'instant una vista prèvia completament funcional . Aquesta finestra de preview permet interacció real: prémer botons, canviar estats, moure sliders o provar comportaments tal com ho faries a l'app final.
Una altra característica cridanera és la possibilitat dexperimentar amb la navegació XAML mitjançant una barra de breadcrumbs (miga de pa). Gràcies a ella pots moure't fàcilment per estructures complexes, veure a quina part exacta de l'arbre estàs treballant i localitzar ràpidament els elements que t'interessa ajustar.
Amb això, XAML Studio inclou un conjunt de dreceres i opcions ràpides per a la vista prèvia: recarregar contingut, activar reixetes d'alineació, aplicar retallades (clipping) o canviar de tema, tot des d'un menú d'accés ràpid pensat per agilitzar el cicle de prova i error.
Edició en viu i interacció amb la vista prèvia
La base de XAML Studio és el seu sistema de Live Edit and Interaction , una edició en viu que evita haver de compilar la solució sencera cada cop que canvies un color, un espaiat o una plantilla. Escrius codi, guardes o fins i tot sense desar, i la interfície es refresca perquè vegis el resultat al moment.
Aquesta vista prèvia és totalment interactiva, cosa que significa que pots provar comportaments reals de la interfície : navegar per controls, disparar esdeveniments i veure com es comporten els elements quan es combinen estils, triggers i estats visuals. Per prototipar és una autèntica salvació perquè t'ajuda a decidir molt més ràpid què es veu bé i què no.
A més, XAML Studio inclou guies d'alineació a la superfície de disseny , que faciliten col·locar elements de forma coherent i detectar desalineacions que a simple vista podrien passar desapercebudes. Això et permet aconseguir una maquetació més neta sense haver de fer mil ajustaments de marge a cegues.
En sistemes de disseny complexos, on WinUI i Fluent donen molt de joc amb ombres, vores arrodonides i layouts adaptatius, disposar d'una prèvia interactiva ben integrada t'ajuda a evitar gran part de la frustració típica dels ajustaments fins en producció.
Depuració de bindings i exploració de l'arbre visual
Un dels autèntics mals de cap a WPF, UWP o WinUI són els errors silenciosos en enllaços de dades . Quan un binding falla, moltes vegades només veus un valor buit i poca cosa més, cosa que complica entendre què està passant. XAML Studio incorpora un Binding Debugger pensat per donar llum sobre aquest tipus de problemes.
Amb el Binding Debugger pots revisar de forma visual com es connecten les propietats del teu model amb els controls a la interfície. L'eina mostra l'estat de cada enllaç, els últims valors utilitzats i us ajuda a localitzar immediatament quin binding està fallant i per què. Per a maquetes complexes amb moltes dades, això estalvia molt de temps.
Relacionat amb això, XAML Studio integra exploradors d' arbre visual i estats visuals accessibles des del panell de propietats. L'explorador d'arbre visual us mostra la jerarquia completa de controls i elements que componen la pantalla, permetent seleccionar qualsevol node i veure les seves propietats, estils i relacions.
L'explorador d'estats visuals, per part seva, facilita veure i alternar entre els diferents estats d'una vista (per exemple, normal, apuntat, pressionat, deshabilitat), una cosa crucial quan treballes amb controls personalitzats o plantilles avançades. Així pots provar ràpidament com afecta cada estat al teu disseny sense haver de forçar manualment cada situació a l'aplicació real.
Gestió de dades amb Data Context Editor
Provar una interfície sense dades reals és com dissenyar cegues. Per això XAML Studio inclou un Data Context Editor , una eina que et permet definir fàcilment el context de dades de la teva vista per emplenar-la amb informació de prova.
Des d'aquest editor pots connectar el teu UI tant a dades estàtiques com a fonts dinàmiques: per exemple, carregar un JSON des d'un fitxer local o des d'una API REST , i utilitzar-lo com a DataContext dels teus controls. D'aquesta manera veus com es comporta el layout amb text llarg, col·leccions grans o valors límit, cosa que resulta clau per a un disseny robust.
Aquesta capacitat de barrejar XAML amb dades de prova, sense haver d'aixecar tota la infraestructura de la vostra aplicació, us permet iterar més ràpid sobre l'aspecte visual i la distribució de la informació, i us estalvia muntar projectes d'exemple ad hoc només per veure com queda un formulari amb dades reals.
XAML Studio també pot restaurar documents i el seu context de dades en reobrir l'aplicació, gràcies al vostre sistema d'autoguardat, cosa que us evita haver de tornar a configurar la font de dades cada vegada que voleu seguir provant un disseny específic.
Eines de productivitat: IntelliSense, autoguardat i més
A més de les funcions purament visuals, XAML Studio integra diverses prestacions de productivitat que faciliten el dia a dia quan escrius XAML de forma intensiva . Una de les més útils és el suport d'IntelliSense, que us suggereix propietats, tipus, noms de controls i espais de noms mentre escrius.
Aquest IntelliSense no només accelera l'escriptura del codi, sinó que també ajuda a evitar errors tipogràfics en bindings, rutes i atributs , especialment en estructures llargues d'estils, plantilles o recursos compartits. Si ja estàs acostumat a IntelliSense al Visual Studio, et sentiràs com a casa.
Una altra funció molt pràctica és l' autoguardat i restauració de documents . XAML Studio pot desar la teva feina automàticament i, quan tornes a obrir l'aplicació, recuperar les pestanyes i documents que estaves usant, perquè continuïs exactament on ho vas deixar sense haver d'obrir fitxers un per un.
La interfície incorpora un quadre d'eines de documentació (Documentation Toolbox) que funciona com a accés directe a exemples, ajuts i referències sobre controls i propietats. Això et permet consultar documentació sense sortir de l'eina , cosa especialment còmode quan estàs provant APIs menys conegudes o propietats específiques de WinUI.
Ajuts de disseny: Fluent UI, guies i espais de noms
A les versions recents del projecte s'ha treballat en una interfície renovada basada en Fluent UI , el sistema de disseny modern de Microsoft. Aquesta actualització es nota tant en l'aspecte visual de la pròpia eina com en la manera com s'integren controls, temes i layouts actuals.
Per ajudar-te amb la maquetació, XAML Studio inclou guies d'alineació i reixetes a la superfície de preview. Aquestes guies faciliten quadrar marges, paddings i disposicions, sent especialment útils quan intentes replicar dissenys pixel-perfect o quan vols assegurar-te que els elements estan ben alineats sense haver de mesurar-ho tot a mà.
Un altre aspecte on l'eina dóna un cop de mà és en la gestió d'espais de noms XAML. Amb els seus Namespace Helpers pots afegir i corregir xmlns de forma més àgil, evitant el clàssic problema de declaracions incompletes o duplicades que acaben trencant el marcatge o generant advertiments molests.
També s'han incorporat petites millores d'ús diari com la possibilitat de duplicar pestanyes obertes des del menú contextual , cosa que ve genial quan vols experimentar amb dues variants del mateix layout sense perdre la teva versió original ni haver de crear un fitxer nou des de zero.
Suport per a carpetes i treball amb recursos
Una de les evolucions importants de XAML Studio ha estat el suport per a carpetes i recursos externs . Això vol dir que podeu treballar amb un conjunt de fitxers relacionats, i no només amb un únic fitxer XAML aïllat.
Gràcies a aquesta funció, l'aplicació pot gestionar càrrega d'imatges des de carpetes, fitxers de dades de disseny i altres recursos complementaris que solen acompanyar les interfícies reals. Per exemple, podeu tenir un conjunt d'imatges de prova per a un carrusel, icones per a botons o fitxers JSON que actuïn com a origen de dades.
Aquest suport de carpetes apropa molt més XAML Studio a un flux de treball real, en lloc de limitar-se a ser un simple sandbox. Et permet muntar petits escenaris de prova que imiten l' estructura de recursos d'una aplicació completa però amb la lleugeresa d'un entorn pensat únicament per prototipar.
Tot això, combinat amb la resta d'eines de vista prèvia, binding i navegació, converteix XAML Studio en una opció molt atractiva per als que volen refinar les pantalles abans d'integrar-les en una solució pesada.
Descàrrega des de Microsoft Store i instal·lació manual
Per a la majoria d'usuaris, la manera més senzilla de començar és descarregar XAML Studio directament des de la Microsoft Store . Allà està disponible com a aplicació gratuïta, de manera que només cal buscar-la, instal·lar-la i començar a provar XAML en qüestió de minuts.
La versió de la botiga, segons la informació disponible, segueix a la branca 1.1, mentre que el desenvolupament més actiu es duu a terme a la branca dev del repositori del projecte. Això és important si vols accedir a les últimes característiques o col·laborar en el desenvolupament, ja que pot haver diferències entre el que veus a la Store i el que està al codi font.
Si prefereixes instal·lar-lo manualment des del repositori, o compilar-lo tu mateix, hi ha una sèrie de requisits mínims relacionats amb Visual Studio que convé tenir en compte perquè tot funcioni bé.
Compilar XAML Studio des del codi font
Si us ve de gust anar un pas més enllà i compilar XAML Studio des del vostre codi font , haureu de preparar el vostre entorn al Visual Studio amb uns components específics orientats a desenvolupament d'aplicacions Windows modernes.
En primer lloc, cal instal·lar la càrrega de treball de desenvolupament d'aplicacions per a Windows a Visual Studio. Aquesta càrrega de treball agrupa tot allò relacionat amb aplicacions UWP, WinUI i altres tecnologies XAML modernes sobre la plataforma Windows.
A més, haureu de tenir instal·lades les eines de la Plataforma Universal de Windows (Universal Windows Platform tools) , així com l'SDK concret de Windows 17763. Sense aquest SDK algunes parts del projecte poden no compilar correctament, de manera que convé comprovar-ho a l'instal·lador de Visual Studio abans d'obrir la solució.
Un cop tingueu tots els components, en obrir el repositori us haureu d'assegurar que el projecte anomenat XAMLStudio està marcat com a projecte d'inici dins de la solució. Després, simplement podeu prémer F5 per executar en mode depuració i llançar l'aplicació des del teu propi entorn de desenvolupament.
Projecte open source, llicències i codi de conducta
En estar publicat com a projecte de la .NET Foundation , XAML Studio es distribueix sota llicència MIT, una de les llicències de codi obert més permissives. Això significa que podeu revisar, modificar, reutilitzar i contribuir al codi amb força llibertat, sempre respectant els termes habituals d'atribució.
El repositori inclou un fitxer NOTICE.json amb atribucions a tercers , que coincideix amb la informació mostrada dins de la pròpia aplicació sobre llibreries externes utilitzades. Si us preocupa el compliment de llicències en entorns empresarials, aquest fitxer és una referència útil per veure quins components s'han incorporat.
El projecte ha adoptat el Microsoft Open Source Code of Conduct , per això participar en issues, pull requests o discussions implica seguir unes normes de comportament clares: respecte, tracte professional i tolerància zero cap a l'assetjament. Hi ha també una pàgina de preguntes freqüents sobre el codi de conducta i una adreça de contacte ( [email protected] ) per a dubtes o incidències.
Per als que vulguin col·laborar activament, el fitxer CONTRIBUTING.md descriu com proposar canvis, enviar contribucions i reportar problemes . Aquí es detalla la forma recomanada de treballar amb branques, el flux de revisió de codi i altres aspectes pràctics de la col·laboració en el projecte.
Telemetria, privadesa i recopilació de dades
Com moltes altres aplicacions modernes, XAML Studio va incloure al seu moment mecanismes de telemetria per recopilar informació d'ús , amb l'objectiu d'entendre quines característiques s'utilitzen més, com rendeix l'app en diferents mides de document i quins tipus d'errors es produeixen amb més freqüència.
La bona notícia és que la pròpia aplicació ofereix un control clar sobre aquesta telemetria: des de la pàgina de configuració, a l'apartat de Feedback o comentaris , pots canviar l'opció de Dades de diagnòstic (Diagnostic Data) a No per desactivar la recopilació de dades des de la pròpia aplicació distribuïda.
Convé destacar que, segons la informació del projecte, App Center —la plataforma que es feia servir com a base per a la telemetria— ha quedat deprecat i, en aquests moments, no s'està utilitzant telemetria activa a la versió v2 mentre es decideix una solució alternativa per a diagnòstics.
En qualsevol cas, Microsoft informa que el programari pot recopilar informació sobre lús de laplicació, que podria utilitzar-se per millorar serveis i productes . Si tu, com a desenvolupador, fas servir característiques que alhora poden recollir dades d'usuaris finals (per exemple, integracions de serveis a les teves pròpies apps), hauràs de complir la legislació aplicable i proporcionar avisos i polítiques de privadesa adequats, enllaçant la declaració de privadesa de Microsoft quan correspongui.
Marca, logotips i ús de trademarks
Dins del repositori i la pròpia aplicació poden aparèixer marques registrades i logotips de Microsoft o altres tercers. El projecte deixa clar que l‟ús d‟aquestes marques està subjecte a les directrius oficials de Microsoft per a marques i branding.
Si decideixes crear versions modificades del projecte o distribució alternatives, ho hauràs de fer de manera que no generi confusió ni suggereixi patrocini oficial per part de Microsoft quan no existeixi aquesta relació. Aquesta regla és especialment important si redistribueixes binaris o integres parts del projecte en productes comercials.
Igualment, qualsevol logotip o marca de tercers que s'utilitzi en el codi està subjecta a les polítiques dels tercers, per la qual cosa convé revisar aquests aspectes si pretens reutilitzar grans parts de l'aplicació en els teus propis projectes públics.
Context: frustració amb dissenyadors de Visual Studio i valor de XAML Studio
La publicació de XAML Studio com a projecte obert es va produir en un context on molts desenvolupadors mostraven cert descontent amb els dissenyadors visuals de Visual Studio . Problemes de rendiment, penjaments, comportaments inconsistents i dificultats per depurar XAML complex han estat queixes força recurrents.
En aquest escenari, XAML Studio es percep com una mena de vàlvula d'escapament: una eina lleugera, enfocada específicament en el disseny i proves de XAML, que redueix part de la fricció del cicle tradicional editar-compilar-executar. No pretén substituir Visual Studio, però sí complementar la seva experiència a l'àrea on fa més mal: la iteració ràpida sobre la interfície.
Aquest enfocament encaixa també amb les inquietuds dels que estan aprenent tecnologies com WinUI, WPF o UWP. Per a molts, la combinació de fitxers .sln, configuracions complexes i empaquetat en executables pot resultar un autèntic maldecap, especialment al principi. Disposar d'una eina independent per centrar-se només en la capa XAML fa el procés d' aprenentatge i experimentació molt més suportable.
En definitiva, XAML Studio ha trobat el seu buit com a aplicació de nínxol molt apreciada pels que dediquen bona part del seu temps a construir i refinar interfícies d'usuari a l'ecosistema Windows, oferint un entorn més àgil i menys feixuc per manipular XAML diàriament.
Per a qualsevol persona que estigui començant amb C#, WPF, UWP o WinUI, o per als que ja pentinen cabells blancs a XAML però segueixen patint amb proves lentes i depuracions confuses, tenir una eina com XAML Studio a mà suposa un canvi notable en la forma de plantejar prototips , depurar bindings complicats i validar dissenys abans de validar dissenys abans de open source i amb la tranquil·litat de poder controlar quines dades es comparteixen i com es fan servir.
