XAML Studio: Un ghid complet pentru prototiparea interfețelor XAML în Windows

Informatec Digital » Recursos » XAML Studio: Un ghid complet pentru prototiparea interfețelor XAML în Windows

Dacă lucrați cu XAML pentru a crea interfețe în Windows , probabil ați întâmpinat dificultăți cu designerul Visual Studio, timpi de compilare interminabili sau erori de legare a datelor imposibil de localizat. Aici intervine XAML Studio, o aplicație concepută special pentru a vă permite să testați, să depanați și să experimentați cu XAML rapid și cu mai puține dificultăți.

Pe parcursul acestui articol, vom analiza în detaliu ce este XAML Studio, cum vă ajută să prototipați interfețe WinUI și UWP în câteva minute, ce instrumente oferă pentru depanarea linkurilor, gestionarea datelor de testare, navigarea în arborele vizual și multe altele. Veți vedea, de asemenea, cum să îl descărcați din Microsoft Store, care sunt cerințele dacă doriți să îl compilați din codul sursă și cum se încadrează toate acestea în contextul actual al dezvoltatorilor care sunt oarecum sătui de designerii Visual Studio.

Ce este XAML Studio și pentru cine este destinat?

XAML Studio este o aplicație Windows axată pe dezvoltarea XAML , creată inițial ca un proiect Microsoft Garage și lansată acum ca proiect open-source în cadrul .NET Foundation. Scopul său principal este de a vă permite să scrieți XAML, să îl vedeți funcționând instantaneu și să interacționați cu interfața ca și cum ar face parte din propria aplicație.

Este destinat în special dezvoltatorilor care lucrează cu aplicații WinUI XAML și UWP , deși este foarte util și dacă proveniți de la WPF și doriți să experimentați cu concepte, stiluri, șabloane și stări vizuale moderne de design Fluent, fără a fi nevoie să construiți o soluție completă de fiecare dată.

Spre deosebire de Visual Studio, care este mai orientat către ciclul complet de dezvoltare, XAML Studio acționează ca un laborator de idei pentru stratul vizual : copiezi un fragment XAML, îl lipești, îl ajustezi, vezi rezultatul instantaneu, te joci cu datele, verifici legăturile și, când ești mulțumit, duci codul la proiectul tău real.

În plus, fiind un proiect open source, evoluția sa este deschisă comunității: orice dezvoltator poate revizui codul, propune modificări , trimite îmbunătățiri și participa la discuțiile despre noile funcționalități prin intermediul depozitului public.

Caracteristici cheie ale XAML Studio pentru prototiparea interfețelor

Unul dintre punctele forte ale XAML Studio este faptul că reunește un set de instrumente într-o singură aplicație, concepută pentru testarea designurilor, crearea de machete de ecran și depanarea linkurilor cu un timp de nefuncționare minim. Nu este doar un vizualizator XAML, ci un mediu interactiv pentru iterarea rapidă a interfeței utilizator.

Printre cele mai importante capacități ale sale se numără editarea live: puteți scrie sau modifica cod XAML în editor și puteți vedea instantaneu o previzualizare complet funcțională . Această fereastră de previzualizare permite interacțiunea reală: apăsarea butoanelor, schimbarea stărilor, mutarea cursoarelor sau testarea comportamentelor, exact așa cum ați face în aplicația finală.

O altă caracteristică remarcabilă este posibilitatea de a experimenta cu navigarea XAML folosind o linie de navigare. Aceasta vă permite să vă deplasați cu ușurință prin structuri complexe, să vedeți exact unde lucrați în arbore și să localizați rapid elementele pe care doriți să le ajustați.

În plus, XAML Studio include un set de comenzi rapide și opțiuni de previzualizare rapidă: reîncărcați conținutul, activați grilele de aliniere, aplicați decuparea sau schimbați temele, toate dintr-un meniu de acces rapid conceput pentru a eficientiza ciclul de încercări și erori.

Editare live și interacțiune cu previzualizarea

Fundația XAML Studio este sistemul său Live Edit and Interaction , o funcție de editare live care elimină necesitatea compilării întregii soluții de fiecare dată când modificați o culoare, o spațiere sau un șablon. Scrieți cod, salvați sau chiar lăsați nesalvat, iar interfața se actualizează, astfel încât să puteți vedea rezultatul instantaneu.

Această previzualizare este complet interactivă, ceea ce înseamnă că puteți testa comportamentele interfeței în lumea reală : navigați prin comenzi, declanșa evenimente și vedeți cum se comportă elementele atunci când stilurile, declanșatoarele și stările vizuale sunt combinate. Este o salvare pentru prototipare, deoarece vă ajută să decideți mult mai rapid ce arată bine și ce nu.

În plus, XAML Studio include ghiduri de aliniere pe suprafața de design , facilitând poziționarea uniformă a elementelor și detectarea nealinierilor care altfel ar putea trece neobservate. Acest lucru vă permite să obțineți un aspect mai curat, fără a fi nevoie să faceți nenumărate ajustări inexacte ale marginilor.

În sistemele de design complexe, unde WinUI și Fluent oferă o mulțime de posibilități cu umbre, margini rotunjite și machete adaptive, o previzualizare interactivă bine integrată vă ajută să evitați o mare parte din frustrarea tipică ajustărilor fine în producție.

Depanarea legăturilor și explorarea arborelui vizual

Una dintre adevăratele probleme din WPF, UWP sau WinUI sunt erorile de legare silențioasă a datelor . Când o legare eșuează, adesea vedeți doar o valoare goală și puțin altceva, ceea ce face dificilă înțelegerea a ceea ce se întâmplă. XAML Studio include un depanator de legături conceput pentru a clarifica aceste tipuri de probleme.

Cu ajutorul Depanatorului de Legături, puteți examina vizual modul în care proprietățile modelului dvs. se conectează la controalele din interfață. Instrumentul afișează starea fiecărei legături, ultimele valori utilizate și vă ajută să identificați rapid care legătură eșuează și de ce. Pentru machete complexe cu cantități mari de date, acest lucru economisește o cantitate semnificativă de timp.

În legătură cu aceasta, XAML Studio integrează exploratoare de tip arbore vizual și stări vizuale , accesibile din panoul Proprietăți. Exploratorul de tip arbore vizual vă arată ierarhia completă a controalelor și elementelor care alcătuiesc ecranul, permițându-vă să selectați orice nod și să vizualizați proprietățile, stilurile și relațiile acestuia.

Exploratorul vizual de stări, între timp, facilitează vizualizarea și comutarea între diferitele stări ale unei vizualizări (de exemplu, normală, indicată, apăsată, dezactivată), ceea ce este crucial atunci când lucrați cu controale personalizate sau șabloane avansate. Acest lucru vă permite să testați rapid modul în care fiecare stare vă afectează designul fără a fi nevoie să forțați manual fiecare situație în aplicația reală.

Gestionarea datelor cu editorul de context de date

Testarea unei interfețe fără date reale este ca și cum ai proiecta în orb. De aceea, XAML Studio include un editor de context de date , un instrument care îți permite să definești cu ușurință contextul de date al vizualizării tale pentru a o popula cu informații de testare.

Din acest editor, puteți conecta interfața utilizatorului atât la surse de date statice, cât și la cele dinamice: de exemplu, puteți încărca JSON dintr-un fișier local sau dintr-o API REST și îl puteți utiliza ca DataContext pentru controalele dvs. Acest lucru vă permite să vedeți cum se comportă aspectul cu text lung, colecții mari sau valori limită, ceea ce este crucial pentru un design robust.

Această capacitate de a combina XAML cu date de testare, fără a fi nevoie să configurați întreaga infrastructură a aplicației, vă permite să iterați mai rapid aspectul vizual și distribuția informațiilor și vă scutește de configurarea unor proiecte eșantion ad-hoc doar pentru a vedea cum arată un formular cu date reale.

XAML Studio poate, de asemenea, restaura documentele și contextul datelor aferente atunci când redeschideți aplicația, datorită sistemului său de salvare automată, care vă scutește de a reconfigura sursa de date de fiecare dată când doriți să continuați testarea unui anumit design.

Instrumente de productivitate: IntelliSense, salvare automată și multe altele

Pe lângă caracteristicile sale pur vizuale, XAML Studio integrează mai multe instrumente de productivitate care vă ușurează munca zilnică atunci când scrieți XAML intensiv . Unul dintre cele mai utile este suportul IntelliSense, care sugerează proprietăți, tipuri, nume de controale și spații de nume pe măsură ce tastați.

Acest IntelliSense nu numai că accelerează scrierea codului, dar ajută și la prevenirea greșelilor de scriere în legături, căi și atribute , în special în structuri lungi de stiluri, șabloane sau resurse partajate. Dacă sunteți deja familiarizat cu IntelliSense în Visual Studio, vă veți simți ca acasă.

O altă caracteristică foarte practică este salvarea și restaurarea automată a documentelor . XAML Studio poate salva automat munca dvs. și, atunci când redeschideți aplicația, poate recupera filele și documentele pe care le utilizați, astfel încât să puteți continua exact de unde ați rămas fără a fi nevoie să deschideți fișierele unul câte unul.

Interfața include o casetă de instrumente pentru documentație care servește drept scurtătură către exemple, ajutor și referințe pentru controale și proprietăți. Aceasta vă permite să consultați documentația fără a părăsi instrumentul , ceea ce este deosebit de convenabil atunci când testați API-uri mai puțin familiare sau proprietăți specifice WinUI.

Ajutoare de design: interfață utilizator fluidă, ghiduri și spații de nume

Versiunile recente ale proiectului au prezentat o interfață reînnoită, bazată pe Fluent UI , sistemul de design modern al Microsoft. Această actualizare este remarcabilă atât în ​​aspectul vizual al instrumentului, cât și în modul în care integrează controalele, temele și layout-urile actuale.

Pentru a vă ajuta cu aspectul, XAML Studio include ghiduri de aliniere și grile pe suprafața de previzualizare. Aceste ghiduri facilitează alinierea marginilor, a padding-ului și a aspectelor și sunt utile în special atunci când încercați să reproduceți designuri perfecte la nivel de pixel sau când doriți să vă asigurați că elementele sunt aliniate corect fără a fi nevoie să măsurați totul manual.

Un alt domeniu în care instrumentul este de ajutor este gestionarea spațiilor de nume XAML. Cu ajutorul instrumentelor sale Namespace Helpers, puteți adăuga și corecta fișiere XML mai eficient, evitând problema comună a declarațiilor incomplete sau duplicate care întrerup marcajul sau generează avertismente deranjante.

Au fost incluse și mici îmbunătățiri pentru utilizarea zilnică, cum ar fi posibilitatea de a duplica filele deschise din meniul contextual , ceea ce este excelent atunci când doriți să experimentați cu două variante ale aceluiași aspect fără a pierde versiunea originală sau a fi nevoie să creați un fișier nou de la zero.

Suport pentru foldere și gestionare a resurselor

Una dintre principalele dezvoltări din XAML Studio a fost suportul pentru foldere și resurse externe . Aceasta înseamnă că puteți lucra cu un set de fișiere corelate, nu doar cu un singur fișier XAML izolat.

Datorită acestei funcții, aplicația poate gestiona încărcarea imaginilor din foldere, fișiere de date de proiectare și alte resurse suplimentare care însoțesc de obicei interfețele propriu-zise. De exemplu, ați putea avea un set de imagini de test pentru un carusel, pictograme pentru butoane sau fișiere JSON care acționează ca sursă de date.

Această compatibilitate cu foldere aduce XAML Studio mult mai aproape de un flux de lucru din lumea reală, în loc să fie doar un simplu sandbox. Vă permite să configurați scenarii de testare mici care imită structura resurselor unei aplicații complete , dar cu natura ușoară a unui mediu conceput exclusiv pentru prototipare.

Toate acestea, combinate cu restul instrumentelor de previzualizare, legare și navigare, fac din XAML Studio o opțiune foarte atractivă pentru cei care doresc să își rafineze ecranele înainte de a le integra într-o soluție complexă.

Descărcare din Microsoft Store și instalare manuală

Pentru majoritatea utilizatorilor, cea mai ușoară modalitate de a începe este să descarce XAML Studio direct din Microsoft Store . Este disponibil acolo ca aplicație gratuită, așa că tot ce trebuie să faceți este să o căutați, să o instalați și să începeți să experimentați cu XAML în câteva minute.

Versiunea din magazin, conform informațiilor disponibile, se află încă pe ramura 1.1, în timp ce cea mai activă dezvoltare are loc pe ramura dev a depozitului proiectului. Acest lucru este important dacă doriți să accesați cele mai recente funcții sau să contribuiți la dezvoltare, deoarece pot exista diferențe între ceea ce vedeți în magazin și ceea ce se află în codul sursă.

Dacă preferați să îl instalați manual din repozitoriu sau să îl compilați singur, există o serie de cerințe minime legate de Visual Studio pe care ar trebui să le aveți în vedere pentru a vă asigura că totul funcționează corect.

Compilează XAML Studio din codul sursă

Dacă vrei să mergi mai departe și să compilezi XAML Studio din codul sursă , va trebui să pregătești mediul în Visual Studio cu componente specifice destinate dezvoltării aplicațiilor Windows moderne.

Mai întâi, trebuie să instalați sarcina de lucru pentru dezvoltarea aplicațiilor Windows în Visual Studio. Această sarcină de lucru include tot ce ține de aplicațiile UWP, WinUI și alte tehnologii XAML moderne pe platforma Windows.

În plus, va trebui să aveți instalate instrumentele Universal Windows Platform , precum și SDK-ul Windows SDK 17763 specific. Fără acest SDK, este posibil ca unele părți ale proiectului să nu se compileze corect, așa că este recomandabil să verificați acest lucru în programul de instalare Visual Studio înainte de a deschide soluția.

După ce aveți toate componentele, când deschideți repozitoriul, asigurați-vă că proiectul numit XAMLStudio este marcat ca proiect de pornire în cadrul soluției. Apoi, apăsați pur și simplu F5 pentru a rula în modul de depanare și a lansa aplicația din propriul mediu de dezvoltare.

Proiect open source, licențe și cod de conduită

Deoarece este publicat ca proiect .NET Foundation , XAML Studio este distribuit sub licența MIT, una dintre cele mai permisive licențe open-source. Aceasta înseamnă că puteți revizui, modifica, reutiliza și contribui la cod în mod liber, atâta timp cât respectați termenii obișnuiți de atribuire.

Depozitul include un fișier NOTICE.json cu atribuții terțe , care corespunde cu informațiile afișate în cadrul aplicației cu privire la bibliotecile externe utilizate. Dacă sunteți preocupat de conformitatea licențelor în mediile de întreprindere, acest fișier este o referință utilă pentru a vedea ce componente au fost încorporate.

Proiectul a adoptat Codul de conduită Microsoft Open Source , așadar participarea la probleme, solicitări de extragere sau discuții necesită respectarea unor reguli clare de conduită: respect, profesionalism și toleranță zero față de hărțuire. Există, de asemenea, o pagină de întrebări frecvente despre codul de conduită și o adresă de contact ( [email protected] ) pentru întrebări sau probleme.

Pentru cei care doresc să colaboreze activ, fișierul CONTRIBUTING.md descrie cum se propun modificări, se trimit contribuții și se raportează probleme . Acesta detaliază modul recomandat de lucru cu ramurile, fluxul de lucru pentru revizuirea codului și alte aspecte practice ale colaborării la proiect.

Telemetrie, confidențialitate și colectare de date

Ca multe alte aplicații moderne, XAML Studio a inclus mecanisme de telemetrie pentru a colecta informații de utilizare , cu scopul de a înțelege ce funcții sunt utilizate cel mai mult, cum se comportă aplicația pe documente de diferite dimensiuni și ce tipuri de erori apar cel mai frecvent.

Vestea bună este că aplicația în sine oferă un control clar asupra acestei telemetrii: din pagina de setări, în secțiunea Feedback , puteți schimba opțiunea Date de diagnosticare la „Nu” pentru a dezactiva colectarea datelor din aplicația distribuită în sine.

Este demn de menționat că, conform informațiilor despre proiect, App Center — platforma utilizată ca bază pentru telemetrie — a fost depreciată și, în prezent, telemetria activă nu este utilizată în versiunea v2, în timp ce se ia în considerare o soluție alternativă pentru diagnosticare.

În orice caz, Microsoft declară că software-ul poate colecta informații despre utilizarea aplicației, care ar putea fi folosite pentru a îmbunătăți serviciile și produsele . Dacă, în calitate de dezvoltator, utilizați funcții care pot colecta date despre utilizatorii finali (de exemplu, integrări de servicii în propriile aplicații), trebuie să respectați legislația aplicabilă și să furnizați notificări și politici de confidențialitate corespunzătoare, făcând trimitere la declarația de confidențialitate Microsoft, acolo unde este cazul.

Marca, logo-urile și utilizarea mărcilor comerciale

Depozitul și aplicația în sine pot conține mărci comerciale și sigle ale Microsoft sau ale altor terțe părți. Proiectul precizează clar că utilizarea acestor mărci comerciale este supusă regulilor oficiale de branding ale Microsoft.

Dacă decideți să creați versiuni modificate ale proiectului sau distribuții alternative, trebuie să faceți acest lucru într-un mod care să nu cauzeze confuzie și să nu sugereze sponsorizarea oficială din partea Microsoft atunci când nu există o astfel de relație. Această regulă este deosebit de importantă dacă redistribuiți fișiere binare sau integrați părți ale proiectului în produse comerciale.

În mod similar, orice logo-uri sau mărci comerciale ale unor terțe părți utilizate în cod sunt supuse politicilor respectivelor terțe părți, așa că este recomandabil să revizuiți aceste aspecte dacă intenționați să reutilizați părți mari ale aplicației în propriile proiecte publice.

Context: Frustrare față de designerii Visual Studio și valoarea XAML Studio

Lansarea XAML Studio ca proiect open-source a venit într-un moment în care mulți dezvoltatori își exprimau nemulțumirea față de designerii vizuali din Visual Studio . Problemele de performanță, blocările, comportamentul inconsistent și dificultățile de depanare a XAML-ului complex erau reclamații recurente.

În acest scenariu, XAML Studio este perceput ca un fel de supapă de evacuare: un instrument ușor, axat în mod special pe proiectarea și testarea XAML, care reduce o parte din dificultățile ciclului tradițional editare-compilare-executare. Nu își propune să înlocuiască Visual Studio, ci mai degrabă să completeze expertiza sa în domeniul în care prezintă cele mai mari probleme: iterația rapidă pe interfață.

Această abordare se aliniază, de asemenea, cu preocupările acelor tehnologii de învățare precum WinUI, WPF sau UWP. Pentru mulți, combinarea fișierelor .sln, a configurațiilor complexe și a împachetării în fișiere executabile poate fi o adevărată bătaie de cap, mai ales la început. Existența unui instrument independent care să se concentreze exclusiv pe stratul XAML face ca procesul de învățare și experimentare să fie mult mai fluid.

Pe scurt, XAML Studio și-a găsit nișa ca aplicație extrem de apreciată pentru cei care își dedică o parte semnificativă din timp construirii și rafinării interfețelor utilizator în ecosistemul Windows, oferind un mediu mai agil și mai puțin greoi pentru manipularea XAML zilnic.

Pentru oricine este la început cu C#, WPF, UWP sau WinUI sau pentru cei care deja au început să utilizeze XAML, dar încă se confruntă cu teste lente și depanare confuză, existența unui instrument precum XAML Studio reprezintă o schimbare semnificativă în modul în care abordați prototiparea , depanați legăturile complexe și validați designurile înainte de a le integra în proiecte mari - toate cu flexibilitatea unui proiect open-source și liniștea sufletească de a putea controla ce date sunt partajate și cum sunt utilizate.