XAML Studio: Kompletní průvodce prototypováním rozhraní XAML ve Windows

Informatec Digital » Zdroje » XAML Studio: Kompletní průvodce prototypováním rozhraní XAML ve Windows

Pokud pracujete s XAML pro vytváření rozhraní ve Windows , pravděpodobně jste se setkali s problémy s návrhářem Visual Studia, nekonečnými dobami kompilace nebo nemožnými chybami vázání dat. A zde přichází na řadu XAML Studio, aplikace navržená přesně tak, aby vám umožnila rychle a s menším třením testovat, ladit a experimentovat s XAML .

V tomto článku se podrobně podíváme na to, co je XAML Studio, jak vám pomůže prototypovat rozhraní WinUI a UWP během několika minut, jaké nástroje nabízí pro ladění odkazů, správu testovacích dat, navigaci ve vizuálním stromu a mnoho dalšího. Také se dozvíte, jak si jej stáhnout z Microsoft Storu, jaké jsou požadavky, pokud jej chcete zkompilovat ze zdrojového kódu, a jak to vše zapadá do současného kontextu vývojářů, kteří už mají poněkud dost návrhářů ve Visual Studiu.

Co je XAML Studio a pro koho je určeno?

XAML Studio je aplikace pro Windows zaměřená na vývoj v XAML , původně vytvořená jako projekt Microsoft Garage a nyní vydaná jako open-source projekt v rámci .NET Foundation. Jejím hlavním účelem je umožnit vám psát XAML, okamžitě vidět, jak funguje, a interagovat s rozhraním, jako by bylo součástí vaší vlastní aplikace.

Je zaměřen zejména na vývojáře pracující s aplikacemi WinUI XAML a UWP , ačkoli je také velmi užitečný, pokud pocházíte z WPF a chcete experimentovat s moderními designovými koncepty, styly, šablonami a vizuálními stavy Fluentu, aniž byste museli pokaždé vytvářet kompletní řešení.

Na rozdíl od Visual Studia, které je více zaměřeno na kompletní vývojový cyklus, XAML Studio funguje jako laboratoř nápadů pro vizuální vrstvu : zkopírujete fragment XAML, vložíte ho, upravíte, okamžitě uvidíte výsledek, hrajete si s daty, zkontrolujete vazby a když jste spokojeni, přenesete kód do svého skutečného projektu.

Navíc, jelikož se jedná o open source projekt, jeho vývoj je otevřený komunitě: každý vývojář může kontrolovat kód, navrhovat změny , odesílat vylepšení a účastnit se diskusí o nových funkcích prostřednictvím veřejného repozitáře.

Klíčové vlastnosti XAML Studia pro prototypování rozhraní

Jednou ze silných stránek XAML Studia je, že v jedné aplikaci spojuje sadu nástrojů určených pro testování návrhů, vytváření rozvržení obrazovek a ladění odkazů s minimálními prostoji. Není to jen prohlížeč XAML, ale interaktivní prostředí pro rychlé iterace v uživatelském rozhraní.

Mezi jeho nejdůležitější funkce patří živá editace: v editoru můžete psát nebo upravovat kód XAML a okamžitě vidět plně funkční náhled . Toto okno náhledu umožňuje skutečnou interakci: stisknutí tlačítek, změnu stavů, přesun posuvníků nebo testování chování, stejně jako ve finální aplikaci.

Další pozoruhodnou funkcí je možnost experimentovat s navigací v XAML pomocí drobečkové navigace. To vám umožňuje snadno se pohybovat ve složitých strukturách, přesně vidět, kde ve stromové struktuře pracujete, a rychle najít prvky, které chcete upravit.

XAML Studio navíc obsahuje sadu zkratek a možností rychlého náhledu: opětovné načtení obsahu, aktivace zarovnávacích mřížek, použití oříznutí nebo změna motivů, to vše z nabídky rychlého přístupu, která je navržena tak, aby zefektivnila cyklus pokusů a omylů.

Interakce živých editací a náhledu

Základem XAML Studia je systém Live Edit and Interaction , což je funkce pro živé úpravy, která eliminuje nutnost kompilovat celé řešení pokaždé, když změníte barvu, mezery nebo šablonu. Napíšete kód, uložíte ho nebo ho dokonce necháte neuložený a rozhraní se aktualizuje, takže výsledek vidíte okamžitě.

Tato náhledová verze je plně interaktivní, což znamená, že si můžete otestovat chování rozhraní v reálném světě : procházet ovládací prvky, spouštět události a sledovat, jak se prvky chovají při kombinaci stylů, triggerů a vizuálních stavů. Je to záchrana pro prototypování, protože vám pomůže mnohem rychleji se rozhodnout, co vypadá dobře a co ne.

XAML Studio navíc obsahuje na návrhové ploše vodítka pro zarovnání , která usnadňují konzistentní umístění prvků a detekci nesprávného zarovnání, které by jinak mohly zůstat bez povšimnutí. To umožňuje dosáhnout čistšího rozvržení bez nutnosti provádět nespočet úprav slepých okrajů.

V komplexních návrhových systémech, kde WinUI a Fluent nabízejí spoustu možností se stíny, zaoblenými hranami a adaptivním rozvržením, vám dobře integrovaný interaktivní náhled pomůže vyhnout se mnoha frustracím typickým pro jemné doladění v produkčním prostředí.

Ladění vazeb a prozkoumávání vizuálního stromu

Jednou ze skutečných bolestí hlavy ve WPF, UWP nebo WinUI jsou tiché chyby vázání dat . Když vazba selže, často se zobrazí pouze prázdná hodnota a nic dalšího, takže je obtížné pochopit, co se děje. XAML Studio obsahuje ladicí nástroj vázání, který je navržen tak, aby tyto druhy problémů objasnil.

Pomocí ladicího nástroje Binding Debugger si můžete vizuálně prohlédnout, jak se vlastnosti vašeho modelu propojují s ovládacími prvky v rozhraní. Nástroj zobrazuje stav každé vazby, poslední použité hodnoty a pomáhá vám rychle určit, která vazba selhává a proč. U složitých maket s velkým množstvím dat to šetří značné množství času.

V souvislosti s tím XAML Studio integruje vizuální průzkumníky stromů a vizuální stavy , které jsou přístupné z panelu Vlastnosti. Vizuální průzkumník stromů zobrazuje kompletní hierarchii ovládacích prvků a prvků, které tvoří obrazovku, což vám umožňuje vybrat libovolný uzel a zobrazit jeho vlastnosti, styly a vztahy.

Vizuální průzkumník stavů zároveň usnadňuje zobrazení a přepínání mezi různými stavy zobrazení (například normální, ukazováček, stisknutý, neaktivní), což je klíčové při práci s vlastními ovládacími prvky nebo pokročilými šablonami. To vám umožňuje rychle otestovat, jak jednotlivé stavy ovlivňují váš návrh, aniž byste museli ručně vynucovat každou situaci v reálné aplikaci.

Správa dat pomocí editoru kontextu dat

Testování rozhraní bez skutečných dat je jako navrhování naslepo. Proto XAML Studio obsahuje editor datového kontextu , nástroj, který umožňuje snadno definovat datový kontext vašeho zobrazení a naplnit jej testovacími informacemi.

Z tohoto editoru můžete propojit své uživatelské rozhraní se statickými i dynamickými zdroji dat: například načíst JSON z lokálního souboru nebo REST API a použít ho jako DataContext pro vaše ovládací prvky. To vám umožní vidět, jak se rozvržení chová s dlouhým textem, velkými kolekcemi nebo hraničními hodnotami, což je klíčové pro robustní návrh.

Tato schopnost kombinovat XAML s testovacími daty, aniž byste museli nastavovat celou aplikační infrastrukturu, vám umožňuje rychleji iterovat ve vizuálním vzhledu a distribuci informací a ušetří vám nastavování ad hoc ukázkových projektů jen proto, abyste viděli, jak formulář vypadá se skutečnými daty.

XAML Studio dokáže také obnovit dokumenty a jejich datový kontext při opětovném otevření aplikace, a to díky systému automatického ukládání, který vám ušetří nutnost překonfigurovat zdroj dat pokaždé, když chcete pokračovat v testování konkrétního návrhu.

Nástroje pro produktivitu: IntelliSense, automatické ukládání a další

Kromě čistě vizuálních funkcí integruje XAML Studio několik nástrojů pro zvýšení produktivity, které vám usnadní každodenní práci při intenzivním psaní v XAML . Jedním z nejužitečnějších je podpora IntelliSense, která při psaní navrhuje vlastnosti, typy, názvy ovládacích prvků a jmenné prostory.

Tato technologie IntelliSense nejen urychluje psaní kódu, ale také pomáhá předcházet překlepům ve vazbách, cestách a atributech , zejména v dlouhých strukturách stylů, šablon nebo sdílených zdrojů. Pokud již znáte technologii IntelliSense ve Visual Studiu, budete se cítit jako doma.

Další velmi praktickou funkcí je automatické ukládání a obnova dokumentů . XAML Studio dokáže automaticky uložit vaši práci a při opětovném otevření aplikace načíst karty a dokumenty, které jste používali, takže můžete pokračovat přesně tam, kde jste skončili, aniž byste museli otevírat soubory jeden po druhém.

Rozhraní obsahuje Nástroje pro dokumentaci, které slouží jako zkratka k příkladům, nápovědě a referencím k ovládacím prvkům a vlastnostem. To vám umožňuje prohlížet dokumentaci, aniž byste museli opustit nástroj , což je obzvláště výhodné při testování méně známých API nebo vlastností specifických pro WinUI.

Pomůcky pro design: Fluent UI, průvodci a jmenné prostory

Nedávné verze projektu obsahují přepracované rozhraní založené na Fluent UI , moderním designovém systému od společnosti Microsoft. Tato aktualizace je patrná jak ve vizuálním vzhledu nástroje, tak ve způsobu, jakým integruje stávající ovládací prvky, motivy a rozvržení.

Pro usnadnění rozvržení obsahuje XAML Studio na ploše náhledu vodítka zarovnání a mřížky . Tato vodítka usnadňují zarovnání okrajů, odsazení a rozvržení a jsou obzvláště užitečná, když se snažíte replikovat pixelově dokonalé návrhy nebo když chcete zajistit, aby byly prvky správně zarovnány, aniž byste museli vše měřit ručně.

Další oblastí, kde tento nástroj pomáhá, je správa jmenných prostorů XAML. Díky jeho pomocníkům pro jmenné prostory můžete efektivněji přidávat a opravovat soubory XML a vyhnout se tak běžnému problému s neúplnými nebo duplicitními deklaracemi, které narušují kódování nebo generují otravná varování.

Byla také začleněna drobná vylepšení pro každodenní použití, jako je například možnost duplikovat otevřené karty z kontextové nabídky , což je skvělé, když chcete experimentovat se dvěma variantami stejného rozvržení, aniž byste ztratili původní verzi nebo museli vytvářet nový soubor od nuly.

Podpora složek a správa zdrojů

Jedním z hlavních vylepšení v XAML Studiu je podpora externích složek a zdrojů . To znamená, že můžete pracovat se sadou souvisejících souborů, nikoli pouze s jedním izolovaným souborem XAML.

Díky této funkci dokáže aplikace načítat obrázky ze složek, souborů s návrhovými daty a dalších doplňkových zdrojů, které obvykle doprovázejí samotná rozhraní. Můžete mít například sadu testovacích obrázků pro karusel, ikony pro tlačítka nebo soubory JSON, které fungují jako zdroj dat.

Tato podpora složek přibližuje XAML Studio k reálnému pracovnímu postupu, nikoli jen k jednoduchému sandboxu. Umožňuje nastavit malé testovací scénáře, které napodobují strukturu zdrojů plné aplikace , ale s lehkou povahou prostředí určeného výhradně pro prototypování.

To vše v kombinaci se zbytkem nástrojů pro náhled, vazbu a navigaci dělá z XAML Studia velmi atraktivní volbu pro ty, kteří chtějí vylepšit své obrazovky před jejich integrací do rozsáhlého řešení.

Stažení z Microsoft Storu a ruční instalace

Pro většinu uživatelů je nejjednodušší začít stáhnout si XAML Studio přímo z obchodu Microsoft Store . Je tam k dispozici jako bezplatná aplikace, takže ji stačí vyhledat, nainstalovat a během několika minut začít experimentovat s XAML.

Verze v obchodě je podle dostupných informací stále na větvi 1.1, zatímco nejaktivnější vývoj probíhá na větvi dev repozitáře projektu. To je důležité, pokud chcete mít přístup k nejnovějším funkcím nebo přispět k vývoji, protože se mohou vyskytovat rozdíly mezi tím, co vidíte v obchodě, a tím, co je ve zdrojovém kódu.

Pokud dáváte přednost ruční instalaci z repozitáře nebo vlastní kompilaci, existuje řada minimálních požadavků týkajících se Visual Studia, které byste měli mít na paměti, aby vše fungovalo správně.

Kompilace XAML Studia ze zdrojového kódu

Pokud chcete jít ještě o krok dál a zkompilovat XAML Studio z jeho zdrojového kódu , budete muset připravit prostředí ve Visual Studiu se specifickými komponentami zaměřenými na vývoj moderních aplikací pro Windows.

Nejprve je třeba v sadě Visual Studio nainstalovat úlohu vývoje aplikací pro Windows . Tato úloha zahrnuje vše, co souvisí s aplikacemi UWP, WinUI a dalšími moderními technologiemi XAML na platformě Windows.

Dále budete muset mít nainstalované nástroje Universal Windows Platform a také specifickou sadu Windows SDK 17763. Bez této sady SDK se některé části projektu nemusí správně zkompilovat, proto je vhodné to před otevřením řešení zkontrolovat v instalačním programu Visual Studia.

Jakmile budete mít všechny komponenty, ujistěte se, že při otevření repozitáře je projekt s názvem XAMLStudio označen jako spouštěcí projekt v rámci řešení. Poté jednoduše stiskněte klávesu F5 pro spuštění v ladicím režimu a spusťte aplikaci z vlastního vývojového prostředí.

Open source projekt, licence a kodex chování

Protože je XAML Studio publikováno jako projekt .NET Foundation , je distribuováno pod licencí MIT, jednou z nejlichotivějších open-source licencí. To znamená, že můžete kód zcela volně kontrolovat, upravovat, znovu používat a přispívat do něj, pokud budete respektovat obvyklé podmínky uvedení zdroje.

Repozitář obsahuje soubor NOTICE.json s údaji o použitých externích knihovnách, které se shodují s informacemi zobrazenými v samotné aplikaci. Pokud máte obavy o dodržování licenčních podmínek v podnikovém prostředí, je tento soubor užitečnou referencí pro zobrazení začleněných komponent.

Projekt přijal kodex chování Microsoft Open Source , takže účast v řešení problémů, žádostí o změny nebo diskusí vyžaduje dodržování jasných pravidel chování: respekt, profesionalita a nulová tolerance k obtěžování. K dispozici je také stránka s častými dotazy týkajícími se kodexu chování a kontaktní adresa ( [email protected] ) pro dotazy nebo problémy.

Pro ty, kteří chtějí aktivně spolupracovat, soubor CONTRIBUTING.md popisuje, jak navrhovat změny, odesílat příspěvky a hlásit problémy . Podrobně popisuje doporučený způsob práce s větvemi, pracovní postup kontroly kódu a další praktické aspekty spolupráce na projektu.

Telemetrie, soukromí a sběr dat

Stejně jako mnoho jiných moderních aplikací, i XAML Studio obsahovalo telemetrické mechanismy pro shromažďování informací o využití s ​​cílem pochopit, které funkce se používají nejčastěji, jak si aplikace vede s dokumenty různých velikostí a jaké typy chyb se vyskytují nejčastěji.

Dobrou zprávou je, že samotná aplikace nabízí jasnou kontrolu nad touto telemetrií: na stránce nastavení v části Zpětná vazba můžete změnit možnost Diagnostická data na „Ne“, čímž zakážete sběr dat ze samotné distribuované aplikace.

Za zmínku stojí, že podle informací o projektu je App Center – platforma používaná jako základ pro telemetrii – zastaralá a v současné době se aktivní telemetrie ve verzi v2 nepoužívá , zatímco se rozhoduje o alternativním řešení diagnostiky.

Společnost Microsoft v každém případě uvádí, že software může shromažďovat informace o používání aplikací, které by mohly být použity ke zlepšení služeb a produktů . Pokud jako vývojář používáte funkce, které mohou shromažďovat data koncových uživatelů (například integrace služeb ve vašich vlastních aplikacích), musíte dodržovat platné zákony a poskytnout příslušná oznámení a zásady ochrany osobních údajů, v případě potřeby s odkazem na prohlášení o ochraně osobních údajů společnosti Microsoft.

Značka, loga a používání ochranných známek

Repozitář a samotná aplikace mohou obsahovat ochranné známky a loga společnosti Microsoft nebo jiných třetích stran. Projekt jasně uvádí, že použití těchto ochranných známek podléhá oficiálním pokynům společnosti Microsoft pro používání značky.

Pokud se rozhodnete vytvořit upravené verze projektu nebo alternativní distribuce, musíte tak učinit způsobem, který nezpůsobí zmatek ani nenaznačí oficiální sponzorství ze strany společnosti Microsoft, pokud takový vztah neexistuje. Toto pravidlo je obzvláště důležité, pokud redistribuujete binární soubory nebo integrujete části projektu do komerčních produktů.

Podobně se na veškerá loga nebo ochranné známky třetích stran použité v kódu vztahují zásady těchto třetích stran, proto je vhodné si tyto aspekty prohlédnout, pokud máte v úmyslu znovu použít velké části aplikace ve vlastních veřejných projektech.

Kontext: Frustrace z návrhářů Visual Studia a hodnota XAML Studia

Vydání XAML Studia jako open-source projektu přišlo v době, kdy mnoho vývojářů vyjadřovalo nespokojenost s vizuálními návrháři Visual Studia . Problémy s výkonem, pády, nekonzistentní chování a potíže s laděním složitého XAML byly opakujícími se stížnostmi.

V tomto scénáři je XAML Studio vnímáno jako jakýsi únikový ventil: lehký nástroj, konkrétně zaměřený na návrh a testování XAML, který snižuje některé překážky tradičního cyklu úprava-kompilace-spuštění. Jeho cílem není nahradit Visual Studio, ale spíše doplnit jeho odborné znalosti v oblasti, kde nejvíce škodí: rychlé iterace rozhraní.

Tento přístup je také v souladu s požadavky technologií pro učení, jako jsou WinUI, WPF nebo UWP. Pro mnohé může být kombinace souborů .sln, složitých konfigurací a jejich zabalování do spustitelných souborů skutečnou bolestí hlavy, zejména na začátku. Samostatný nástroj zaměřený výhradně na vrstvu XAML značně usnadňuje proces učení a experimentování.

Stručně řečeno, XAML Studio si našlo své místo jako vysoce ceněná aplikace pro ty, kteří věnují značnou část svého času vytváření a zdokonalování uživatelských rozhraní v ekosystému Windows, a nabízí tak agilnější a méně těžkopádné prostředí pro každodenní manipulaci s XAML.

Pro každého, kdo začíná s C#, WPF, UWP nebo WinUI, nebo pro ty, kteří už mají v XAML šedivé vlasy, ale stále se potýkají s pomalým testováním a matoucím laděním, představuje nástroj jako XAML Studio po ruce významnou změnu v přístupu k prototypování , ladění složitých vazeb a ověřování návrhů před jejich integrací do velkých projektů – to vše s flexibilitou open-source projektu a s klidem v duši, že můžete kontrolovat, jaká data se sdílejí a jak se používají.