XAML Studio: Kompletný sprievodca prototypovaním rozhraní XAML vo Windowse

Informatec Digital » Zdroje » XAML Studio: Kompletný sprievodca prototypovaním rozhraní XAML vo Windowse

Ak pracujete s XAML na vytváraní rozhraní v systéme Windows , pravdepodobne ste sa stretli s problémami s návrhárom Visual Studia, nekonečnými časmi kompilácie alebo nemožnými chybami viazania údajov. Tu prichádza na rad XAML Studio, aplikácia navrhnutá presne tak, aby vám umožnila rýchlo a s menšími problémami testovať, ladiť a experimentovať s XAML .

V tomto článku sa podrobne pozrieme na to, čo je XAML Studio, ako vám pomôže vytvoriť prototypy rozhraní WinUI a UWP v priebehu niekoľkých minút, aké nástroje ponúka na ladenie odkazov, správu testovacích údajov, navigáciu vo vizuálnom strome a mnoho ďalšieho. Uvidíte tiež, ako si ho stiahnuť z obchodu Microsoft Store, aké sú požiadavky, ak ho chcete skompilovať zo zdrojového kódu, a ako to všetko zapadá do súčasného kontextu vývojárov, ktorí už majú dosť dizajnérov vo Visual Studiu.

Čo je XAML Studio a pre koho je určené?

XAML Studio je aplikácia pre Windows zameraná na vývoj v XAML , pôvodne vytvorená ako projekt Microsoft Garage a teraz vydaná ako open-source projekt v rámci .NET Foundation. Jej hlavným účelom je umožniť vám písať v XAML, okamžite vidieť, ako funguje, a interagovať s rozhraním, akoby bolo súčasťou vašej vlastnej aplikácie.

Je určený najmä pre vývojárov pracujúcich s aplikáciami WinUI XAML a UWP , hoci je veľmi užitočný aj pre tých, ktorí pochádzajú z WPF a chcú experimentovať s modernými dizajnovými konceptmi, štýlmi, šablónami a vizuálnymi stavmi Fluentu bez toho, aby museli zakaždým vytvárať kompletné riešenie.

Na rozdiel od Visual Studia, ktoré je viac zamerané na kompletný vývojový cyklus, XAML Studio funguje ako laboratórium nápadov pre vizuálnu vrstvu : skopírujete fragment XAML, vložíte ho, upravíte, okamžite uvidíte výsledok, pohráte sa s dátami, skontrolujete väzby a keď ste spokojní, prenesiete kód do svojho skutočného projektu.

Navyše, keďže ide o projekt s otvoreným zdrojovým kódom, jeho vývoj je otvorený komunite: každý vývojár môže skontrolovať kód, navrhnúť zmeny , predložiť vylepšenia a zúčastniť sa diskusie o nových funkciách prostredníctvom verejného repozitára.

Kľúčové vlastnosti XAML Studia pre prototypovanie rozhraní

Jednou zo silných stránok XAML Studia je, že spája sadu nástrojov v jednej aplikácii určenej na testovanie návrhov, vytváranie rozložení obrazovky a ladenie odkazov s minimálnymi prestojmi. Nie je to len prehliadač XAML, ale interaktívne prostredie pre rýchle iterácie v používateľskom rozhraní.

Medzi jeho najdôležitejšie funkcie patrí živá editácia: v editore môžete písať alebo upravovať kód XAML a okamžite zobraziť plne funkčný náhľad . Toto okno náhľadu umožňuje skutočnú interakciu: stláčanie tlačidiel, zmenu stavov, presúvanie posuvníkov alebo testovanie správania rovnako ako vo finálnej aplikácii.

Ďalšou pozoruhodnou funkciou je možnosť experimentovať s navigáciou XAML pomocou navigácie. To vám umožňuje jednoducho sa pohybovať v zložitých štruktúrach, presne vidieť, kde v stromovej štruktúre pracujete, a rýchlo nájsť prvky, ktoré chcete upraviť.

Okrem toho XAML Studio obsahuje sadu skratiek a možností rýchleho náhľadu: opätovné načítanie obsahu, aktivácia mriežok zarovnania, použitie orezania alebo zmena tém, to všetko z ponuky rýchleho prístupu, ktorá je navrhnutá tak, aby zefektívnila cyklus pokusov a omylov.

Interakcia s úpravami naživo a ukážkou

Základom XAML Studia je jeho systém Live Edit and Interaction , funkcia živej úpravy, ktorá eliminuje potrebu kompilovať celé riešenie pri každej zmene farby, rozstupov alebo šablóny. Napíšete kód, uložíte ho alebo ho dokonca necháte neuložený a rozhranie sa obnoví, takže výsledok môžete vidieť okamžite.

Táto ukážka je plne interaktívna, čo znamená, že si môžete otestovať správanie rozhrania v reálnom svete : navigovať v ovládacích prvkoch, spúšťať udalosti a sledovať, ako sa prvky správajú pri kombinácii štýlov, spúšťačov a vizuálnych stavov. Je to záchrana pri prototypovaní, pretože vám pomôže oveľa rýchlejšie sa rozhodnúť, čo vyzerá dobre a čo nie.

Okrem toho XAML Studio obsahuje na návrhovej ploche vodiace lišty pre zarovnanie , ktoré uľahčujú konzistentné umiestňovanie prvkov a detekciu nesprávneho zarovnania, ktoré by inak mohli zostať nepovšimnuté. To vám umožňuje dosiahnuť čistejšie rozloženie bez nutnosti vykonávať nespočetné množstvo úprav slepých okrajov.

V komplexných dizajnových systémoch, kde WinUI a Fluent ponúkajú veľa možností s tieňmi, zaoblenými hranami a adaptívnymi rozloženiami, vám dobre integrovaný interaktívny náhľad pomôže vyhnúť sa mnohým frustráciám typickým pre jemné doladenie v produkcii.

Ladenie väzieb a skúmanie vizuálneho stromu

Jednou zo skutočných bolestí hlavy vo WPF, UWP alebo WinUI sú tiché chyby viazania údajov . Keď viazanie zlyhá, často sa zobrazí iba prázdna hodnota a málo iného, ​​čo sťažuje pochopenie toho, čo sa deje. XAML Studio obsahuje ladiaci nástroj viazania, ktorý je navrhnutý tak, aby objasnil tieto druhy problémov.

Pomocou nástroja Binding Debugger si môžete vizuálne skontrolovať, ako sa vlastnosti vášho modelu prepájajú s ovládacími prvkami v rozhraní. Nástroj zobrazuje stav každej väzby, posledné použité hodnoty a pomáha vám rýchlo určiť, ktorá väzba zlyháva a prečo. V prípade zložitých makiet s veľkým množstvom údajov to šetrí značné množstvo času.

V súvislosti s tým XAML Studio integruje vizuálne prieskumníky stromov a vizuálne stavy , ktoré sú prístupné z panela Vlastnosti. Vizuálny prieskumník stromov zobrazuje kompletnú hierarchiu ovládacích prvkov a prvkov, ktoré tvoria obrazovku, čo vám umožňuje vybrať ľubovoľný uzol a zobraziť jeho vlastnosti, štýly a vzťahy.

Vizuálny prieskumník stavov medzitým uľahčuje zobrazenie a prepínanie medzi rôznymi stavmi zobrazenia (napríklad normálny, ukazovateľ, stlačený, vypnutý), čo je kľúčové pri práci s vlastnými ovládacími prvkami alebo pokročilými šablónami. To vám umožňuje rýchlo otestovať, ako každý stav ovplyvňuje váš návrh, bez toho, aby ste museli manuálne vynútiť každú situáciu v skutočnej aplikácii.

Správa údajov pomocou editora kontextu údajov

Testovanie rozhrania bez skutočných údajov je ako navrhovanie naslepo. Preto XAML Studio obsahuje editor kontextu údajov , nástroj, ktorý vám umožňuje jednoducho definovať kontext údajov vášho zobrazenia a naplniť ho testovacími informáciami.

Z tohto editora môžete pripojiť svoje používateľské rozhranie k statickým aj dynamickým zdrojom údajov: napríklad načítať JSON z lokálneho súboru alebo REST API a použiť ho ako DataContext pre vaše ovládacie prvky. To vám umožní vidieť, ako sa rozloženie správa s dlhým textom, rozsiahlymi kolekciami alebo hraničnými hodnotami, čo je kľúčové pre robustný návrh.

Táto schopnosť kombinovať XAML s testovacími údajmi bez nutnosti nastavovať celú infraštruktúru aplikácie vám umožňuje rýchlejšie iterovať vo vizuálnom vzhľade a distribúcii informácií a ušetrí vám nastavenie ad hoc vzorových projektov len preto, aby ste videli, ako formulár vyzerá so skutočnými údajmi.

XAML Studio dokáže tiež obnoviť dokumenty a ich dátový kontext po opätovnom otvorení aplikácie vďaka systému automatického ukladania, ktorý vám ušetrí potrebu prekonfigurovať zdroj údajov zakaždým, keď chcete pokračovať v testovaní konkrétneho návrhu.

Nástroje produktivity: IntelliSense, automatické ukladanie a ďalšie

Okrem čisto vizuálnych funkcií integruje XAML Studio niekoľko nástrojov na zvýšenie produktivity, ktoré vám uľahčia každodennú prácu pri intenzívnom písaní v XAML . Jedným z najužitočnejších je podpora IntelliSense, ktorá počas písania navrhuje vlastnosti, typy, názvy ovládacích prvkov a menné priestory.

Táto technológia IntelliSense nielen zrýchľuje písanie kódu, ale tiež pomáha predchádzať preklepom vo väzbách, cestách a atribútoch , najmä v dlhých štruktúrach štýlov, šablón alebo zdieľaných zdrojov. Ak už poznáte IntelliSense vo Visual Studiu, budete sa cítiť ako doma.

Ďalšou veľmi praktickou funkciou je automatické ukladanie a obnova dokumentov . XAML Studio dokáže automaticky uložiť vašu prácu a po opätovnom otvorení aplikácie obnoviť karty a dokumenty, ktoré ste používali, takže môžete pokračovať presne tam, kde ste prestali, bez toho, aby ste museli otvárať súbory jeden po druhom.

Rozhranie obsahuje Nástroje dokumentácie, ktoré slúžia ako skratka k príkladom, pomocníkovi a referenciám pre ovládacie prvky a vlastnosti. To vám umožňuje prezerať si dokumentáciu bez toho, aby ste museli opustiť nástroj , čo je obzvlášť výhodné pri testovaní menej známych API alebo vlastností špecifických pre WinUI.

Pomôcky pre dizajn: Plynulé používateľské rozhranie, príručky a menné priestory

Nedávne verzie projektu priniesli prepracované rozhranie založené na Fluent UI , modernom dizajnovom systéme od spoločnosti Microsoft. Táto aktualizácia je viditeľná ako vo vizuálnom vzhľade nástroja, tak aj v spôsobe, akým integruje súčasné ovládacie prvky, témy a rozloženia.

Aby vám pomohlo s rozložením, XAML Studio obsahuje na ploche ukážky vodiace lišty a mriežky na zarovnanie . Tieto vodiace lišty uľahčujú zarovnanie okrajov, odsadenia a rozloženia a sú obzvlášť užitočné, keď sa snažíte replikovať pixelovo dokonalé návrhy alebo keď chcete zabezpečiť, aby boli prvky správne zarovnané bez toho, aby ste museli všetko merať manuálne.

Ďalšou oblasťou, kde tento nástroj pomáha, je správa menných priestorov XAML. Vďaka pomocníkom pre menné priestory môžete efektívnejšie pridávať a opravovať súbory XML a vyhnúť sa tak bežnému problému s neúplnými alebo duplicitnými deklaráciami, ktoré narúšajú značkovanie alebo generujú otravné upozornenia.

Zapracované boli aj drobné vylepšenia pre každodenné použitie, ako napríklad možnosť duplikovať otvorené karty z kontextovej ponuky , čo je skvelé, keď chcete experimentovať s dvoma variáciami toho istého rozloženia bez straty pôvodnej verzie alebo nutnosti vytvoriť nový súbor od začiatku.

Podpora priečinkov a správa zdrojov

Jedným z hlavných vylepšení v XAML Studiu je podpora externých priečinkov a zdrojov . To znamená, že môžete pracovať so sadou súvisiacich súborov, nielen s jedným izolovaným súborom XAML.

Vďaka tejto funkcii dokáže aplikácia načítavať obrázky z priečinkov, súborov s návrhovými údajmi a ďalších doplnkových zdrojov, ktoré zvyčajne sprevádzajú samotné rozhrania. Môžete mať napríklad sadu testovacích obrázkov pre karusel, ikony pre tlačidlá alebo súbory JSON, ktoré slúžia ako zdroj údajov.

Táto podpora priečinkov približuje XAML Studio k reálnemu pracovnému postupu, a nie len k jednoduchému sandboxu. Umožňuje vám nastaviť malé testovacie scenáre, ktoré napodobňujú štruktúru zdrojov plnej aplikácie , ale s ľahkou povahou prostredia určeného výhradne na prototypovanie.

Toto všetko v kombinácii so zvyškom nástrojov na náhľad, väzbu a navigáciu robí z XAML Studio veľmi atraktívnu možnosť pre tých, ktorí chcú vylepšiť svoje obrazovky pred ich integráciou do rozsiahlejšieho riešenia.

Stiahnutie z obchodu Microsoft Store a manuálna inštalácia

Pre väčšinu používateľov je najjednoduchší spôsob, ako začať, stiahnuť si XAML Studio priamo z obchodu Microsoft Store . Je tam k dispozícii ako bezplatná aplikácia, takže ju stačí vyhľadať, nainštalovať a začať experimentovať s XAML v priebehu niekoľkých minút.

Verzia v obchode je podľa dostupných informácií stále na vetve 1.1, zatiaľ čo najaktívnejší vývoj prebieha na vetve dev v repozitári projektu. To je dôležité, ak chcete mať prístup k najnovším funkciám alebo prispieť k vývoju, pretože medzi tým, čo vidíte v obchode, a tým, čo je v zdrojovom kóde, môžu existovať rozdiely.

Ak ho radšej nainštalujete manuálne z repozitára alebo si ho skompilujete sami, existuje niekoľko minimálnych požiadaviek týkajúcich sa Visual Studia, ktoré by ste mali mať na pamäti, aby všetko fungovalo správne.

Kompilácia XAML Studia zo zdrojového kódu

Ak chcete ísť ešte o krok ďalej a skompilovať XAML Studio zo zdrojového kódu , budete si musieť pripraviť prostredie vo Visual Studiu so špecifickými komponentmi zameranými na vývoj moderných aplikácií pre Windows.

Najprv je potrebné nainštalovať pracovnú záťaž pre vývoj aplikácií pre Windows v programe Visual Studio. Táto pracovná záťaž zahŕňa všetko, čo súvisí s aplikáciami UWP, rozhraním WinUI a ďalšími modernými technológiami XAML na platforme Windows.

Okrem toho budete musieť mať nainštalované nástroje Universal Windows Platform , ako aj špecifickú sadu Windows SDK 17763. Bez tejto sady SDK sa niektoré časti projektu nemusia správne skompilovať, preto je vhodné to pred otvorením riešenia skontrolovať v inštalátore Visual Studia.

Keď budete mať všetky komponenty a otvoríte repozitár, uistite sa, že projekt s názvom XAMLStudio je v rámci riešenia označený ako spúšťací projekt . Potom jednoducho stlačte kláves F5 pre spustenie v režime ladenia a spustenie aplikácie z vášho vlastného vývojového prostredia.

Projekt s otvoreným zdrojovým kódom, licencie a kódex správania

Keďže je XAML Studio publikované ako projekt .NET Foundation , je distribuované pod licenciou MIT, jednou z najprispôsobivejších licencií s otvoreným zdrojovým kódom. To znamená, že kód môžete voľne kontrolovať, upravovať, opätovne používať a prispievať k nemu, pokiaľ budete rešpektovať bežné podmienky uvedenia zdroja.

Úložisko obsahuje súbor NOTICE.json s údajmi tretích strán , ktoré sa zhodujú s informáciami zobrazenými v samotnej aplikácii týkajúcimi sa použitých externých knižníc. Ak máte obavy o súlad s licenciami v podnikových prostrediach, tento súbor je užitočnou referenciou na zistenie, ktoré komponenty boli začlenené.

Projekt prijal kódex správania Microsoft Open Source , takže účasť na riešení problémov, pull requestov alebo diskusií si vyžaduje dodržiavanie jasných pravidiel správania: rešpekt, profesionalita a nulová tolerancia voči obťažovaniu. K dispozícii je aj stránka s často kladenými otázkami o kódexe správania a kontaktná adresa ( [email protected] ) pre otázky alebo problémy.

Pre tých, ktorí chcú aktívne spolupracovať, súbor CONTRIBUTING.md popisuje, ako navrhovať zmeny, odosielať príspevky a hlásiť problémy . Podrobne popisuje odporúčaný spôsob práce s vetvami, pracovný postup kontroly kódu a ďalšie praktické aspekty spolupráce na projekte.

Telemetria, súkromie a zber údajov

Podobne ako mnoho iných moderných aplikácií, aj XAML Studio obsahovalo telemetrické mechanizmy na zhromažďovanie informácií o používaní s cieľom pochopiť, ktoré funkcie sa používajú najviac, ako aplikácia funguje na dokumentoch rôznych veľkostí a aké typy chýb sa vyskytujú najčastejšie.

Dobrou správou je, že samotná aplikácia ponúka jasnú kontrolu nad touto telemetriou: na stránke nastavení v sekcii Spätná väzba môžete zmeniť možnosť Diagnostické údaje na „Nie“, čím zakážete zhromažďovanie údajov zo samotnej distribuovanej aplikácie.

Stojí za zmienku, že podľa informácií o projekte je App Center – platforma používaná ako základ pre telemetriu – zastaraná a momentálne sa aktívna telemetria vo verzii v2 nepoužíva, kým sa nerozhoduje o alternatívnom riešení diagnostiky.

Spoločnosť Microsoft v každom prípade uvádza, že softvér môže zhromažďovať informácie o používaní aplikácií, ktoré by sa mohli použiť na zlepšenie služieb a produktov . Ak ako vývojár používate funkcie, ktoré môžu zhromažďovať údaje koncových používateľov (napríklad integrácie služieb vo vašich vlastných aplikáciách), musíte dodržiavať platné zákony a poskytnúť príslušné oznámenia a zásady ochrany osobných údajov, pričom v prípade potreby musíte odkazovať na vyhlásenie o ochrane osobných údajov spoločnosti Microsoft.

Značka, logá a používanie ochranných známok

Repozitár a samotná aplikácia môžu obsahovať ochranné známky a logá spoločnosti Microsoft alebo iných tretích strán. Projekt jasne uvádza, že používanie týchto ochranných známok podlieha oficiálnym pravidlám spoločnosti Microsoft pre budovanie značky.

Ak sa rozhodnete vytvoriť upravené verzie projektu alebo alternatívne distribúcie, musíte tak urobiť spôsobom, ktorý nespôsobí zmätok alebo nenaznačí oficiálne sponzorstvo zo strany spoločnosti Microsoft, keď takýto vzťah neexistuje. Toto pravidlo je obzvlášť dôležité, ak redistribuujete binárne súbory alebo integrujete časti projektu do komerčných produktov.

Podobne aj akékoľvek logá alebo ochranné známky tretích strán použité v kóde podliehajú pravidlám týchto tretích strán, preto je vhodné si tieto aspekty skontrolovať, ak máte v úmysle opätovne použiť veľké časti aplikácie vo vlastných verejných projektoch.

Kontext: Frustrácia z návrhárov Visual Studia a hodnota XAML Studia

Vydanie XAML Studia ako open-source projektu prišlo v čase, keď mnoho vývojárov vyjadrovalo nespokojnosť s vizuálnymi návrhármi Visual Studia . Problémy s výkonom, pády, nekonzistentné správanie a ťažkosti s ladením zložitého XAML boli opakujúcimi sa sťažnosťami.

V tomto scenári je XAML Studio vnímané ako akýsi únikový ventil: ľahký nástroj, špecificky zameraný na návrh a testovanie XAML, ktorý znižuje niektoré závady tradičného cyklu úprava-kompilácia-spustenie. Jeho cieľom nie je nahradiť Visual Studio, ale skôr doplniť jeho odborné znalosti v oblasti, kde najviac škodí: rýchla iterácia rozhrania.

Tento prístup je tiež v súlade s požiadavkami vzdelávacích technológií, ako sú WinUI, WPF alebo UWP. Pre mnohých môže byť kombinácia súborov .sln, zložitých konfigurácií a balenia do spustiteľných súborov skutočnou bolesťou hlavy, najmä na začiatku. Samostatný nástroj zameraný výlučne na vrstvu XAML značne uľahčuje proces učenia a experimentovania.

Stručne povedané, XAML Studio si našlo svoje miesto ako vysoko cenená aplikácia pre tých, ktorí venujú značnú časť svojho času vytváraniu a zdokonaľovaniu používateľských rozhraní v ekosystéme Windows, a ponúka agilnejšie a menej ťažkopádne prostredie pre každodennú manipuláciu s XAML.

Pre každého, kto začína s C#, WPF, UWP alebo WinUI, alebo pre tých, ktorí už majú v XAML šedivé vlasy, ale stále zápasia s pomalým testovaním a mätúcim ladením, predstavuje mať po ruke nástroj ako XAML Studio významnú zmenu v spôsobe, akým pristupujete k prototypovaniu , ladeniu zložitých väzieb a overovaniu návrhov pred ich integráciou do veľkých projektov – to všetko s flexibilitou open-source projektu a pokojom v duši, ktorý umožňuje kontrolovať, aké údaje sa zdieľajú a ako sa používajú.