XAML Studio: Teljes körű útmutató az XAML interfészek prototípusainak készítéséhez Windows rendszerben

Informatec Digital » Erőforrás » XAML Studio: Teljes körű útmutató az XAML interfészek prototípusainak készítéséhez Windows rendszerben

Ha XAML-lel dolgozol interfészek létrehozásán Windows rendszerben , valószínűleg már találkoztál nehézségekkel a Visual Studio tervezőjével, a végtelen fordítási időkkel vagy a lehetetlenül lokalizálható adatkötési hibákkal. Itt jön képbe az XAML Studio, egy olyan alkalmazás, amelyet kifejezetten arra terveztek, hogy gyorsan és kevesebb súrlódással tesztelhesd, hibakereshesd és kísérletezhess az XAML-lel .

Ebben a cikkben részletesen megvizsgáljuk, hogy mi is az XAML Studio, hogyan segít percek alatt prototípust készíteni WinUI és UWP interfészekből , milyen eszközöket kínál a linkek hibakereséséhez, a tesztadatok kezeléséhez, a vizuális fa navigálásához és sok máshoz. Azt is megtudhatjuk, hogyan tölthetjük le a Microsoft Store-ból, milyen követelményeknek kell megfelelni, ha forráskódból szeretnénk lefordítani, és hogyan illeszkedik mindez a Visual Studio tervezőiből némileg elege lett fejlesztők jelenlegi kontextusába.

Mi az XAML Studio és kinek való?

Az XAML Studio egy Windows alkalmazás, amely az XAML fejlesztésére összpontosít , eredetileg egy Microsoft Garage projektként jött létre, és most nyílt forráskódú projektként jelent meg a .NET Foundation keretein belül. Fő célja, hogy lehetővé tegye XAML írását, azonnali működésének megtekintését, és a felülettel való interakciót, mintha a saját alkalmazásod része lenne.

Különösen a WinUI XAML és UWP alkalmazásokkal dolgozó fejlesztőknek készült , bár akkor is nagyon hasznos, ha WPF-ből érkeztél, és modern Fluent tervezési koncepciókkal, stílusokkal, sablonokkal és vizuális állapotokkal szeretnél kísérletezni anélkül, hogy minden alkalommal komplett megoldást kellene építened.

A Visual Studio-val ellentétben, amely inkább a teljes fejlesztési ciklusra irányul, az XAML Studio ötletlaborként működik a vizuális réteg számára : kimásolsz egy XAML-töredéket, beilleszted, módosítod, azonnal látod az eredményt, játszol az adatokkal, ellenőrzöd a kötéseket, és ha elégedett vagy, átviszed a kódot a valódi projektedbe.

Továbbá, mivel nyílt forráskódú projektről van szó, a fejlesztése nyitott a közösség számára: bármely fejlesztő áttekintheti a kódot, javaslatokat tehet változtatásokra , beküldhet fejlesztéseket és részt vehet az új funkciók megvitatásában a nyilvános tárházon keresztül.

Az XAML Studio főbb jellemzői prototípus interfészekhez

Az XAML Studio egyik erőssége, hogy egyetlen alkalmazásban egyesít számos eszközt, amelyek minimális állásidővel teszik lehetővé a tervek tesztelését, a képernyőelrendezések létrehozását és a linkek hibakeresését . Ez nem csupán egy XAML-megjelenítő, hanem egy interaktív környezet a felhasználói felület gyors iterálásához.

Legfontosabb képességei közé tartozik az élő szerkesztés: a szerkesztőben írhatsz vagy módosíthatsz XAML kódot, és azonnal láthatod a teljes funkcionalitású előnézetet . Ez az előnézeti ablak valós interakciót tesz lehetővé: gombok megnyomása, állapotok módosítása, csúszkák mozgatása vagy viselkedések tesztelése, akárcsak a végleges alkalmazásban.

Egy másik feltűnő funkció az XAML navigációval való kísérletezés lehetősége egy navigációs útvonal segítségével. Ez lehetővé teszi a könnyű navigációt összetett struktúrákban, a fa pontos nézetét, és a módosítani kívánt elemek gyors megtalálását.

Ezenkívül az XAML Studio számos gyorsbillentyűt és gyors előnézeti lehetőséget tartalmaz: tartalom újratöltése, igazítási rácsok aktiválása, vágás alkalmazása vagy témák módosítása, mindezt egy gyors elérésű menüből, amelyet a próbálgatás és hibák ciklusának egyszerűsítésére terveztek.

Élő szerkesztés és előnézeti interakció

Az XAML Studio alapja az Élő Szerkesztés és Interakció rendszer , egy élő szerkesztési funkció, amely kiküszöböli a teljes megoldás minden egyes szín-, térköz- vagy sablonváltoztatásakor szükséges lefordítás szükségességét. Kódot írsz, mented, vagy akár mentés nélkül is hagyod, és a felület frissül, így azonnal láthatod az eredményt.

Ez az előnézet teljesen interaktív, ami azt jelenti, hogy valós környezetben tesztelheted a felhasználói felület viselkedését : navigálhatsz a vezérlők között, eseményeket indíthatsz el, és láthatod, hogyan viselkednek az elemek, ha a stílusokat, triggereket és vizuális állapotokat kombinálod. Ez egy életmentő a prototípus-készítésben, mert sokkal gyorsabban segít eldönteni, hogy mi néz ki jól és mi nem.

Továbbá az XAML Studio igazítási segédvonalakat tartalmaz a tervezési felületen , amelyek megkönnyítik az elemek egységes elhelyezését és az egyébként észrevétlenül maradó illesztési hibák észlelését. Ez lehetővé teszi a letisztultabb elrendezés elérését anélkül, hogy számtalan vakmargó-korrekciót kellene végezni.

Komplex tervezőrendszerekben, ahol a WinUI és a Fluent rengeteg lehetőséget kínál árnyékokkal, lekerekített élekkel és adaptív elrendezésekkel, egy jól integrált interaktív előnézet segít elkerülni a finomhangolásra jellemző frusztrációt az éles környezetben.

Kötések hibakeresése és a vizuális fa feltárása

A WPF, UWP vagy WinUI egyik igazi fejfájását a csendes adatkötési hibák okozzák . Amikor egy kötés meghiúsul, gyakran csak egy üres értéket látunk, semmi mást, ami megnehezíti a probléma megértését. Az XAML Studio tartalmaz egy kötés-hibakeresőt, amelyet az ilyen jellegű problémák megoldására terveztek.

A Binding Debugger segítségével vizuálisan áttekintheti, hogyan kapcsolódnak a modell tulajdonságai a felület vezérlőihez. Az eszköz megjeleníti az egyes kötések állapotát, a legutóbb használt értékeket , és segít gyorsan meghatározni, hogy melyik kötés hibás, és miért. Nagy mennyiségű adatot tartalmazó összetett makettek esetén ez jelentős időt takarít meg.

Ehhez kapcsolódóan az XAML Studio integrálja a vizuális fakezelőket és a vizuális állapotokat , amelyek a Tulajdonságok panelről érhetők el. A vizuális fakezelő megjeleníti a képernyőt alkotó vezérlők és elemek teljes hierarchiáját, lehetővé téve bármely csomópont kiválasztását és tulajdonságainak, stílusainak és kapcsolatainak megtekintését.

A vizuális állapotböngésző eközben megkönnyíti a nézet különböző állapotainak (például normál, mutató, lenyomott, letiltott) megtekintését és a köztük való váltást, ami kulcsfontosságú az egyéni vezérlőkkel vagy a speciális sablonokkal való munka során. Ez lehetővé teszi, hogy gyorsan tesztelje, hogyan befolyásolja az egyes állapotok a tervet anélkül, hogy manuálisan kellene kényszerítenie az egyes helyzeteket a tényleges alkalmazásban.

Adatkezelés az Adatkontextus-szerkesztővel

Egy interfész tesztelése valódi adatok nélkül olyan, mint a vakon tervezés. Ezért tartalmaz az XAML Studio egy adatkontextus-szerkesztőt , egy olyan eszközt, amellyel könnyedén meghatározhatod a nézeted adatkontextusát, hogy azt tesztinformációkkal tölthesd fel.

Ebből a szerkesztőből a felhasználói felületedet statikus és dinamikus adatforrásokhoz is csatlakoztathatod: például betölthetsz JSON-t egy helyi fájlból vagy egy REST API-ból , és azt használhatod adatkontextusként a vezérlőidhez. Ez lehetővé teszi, hogy lásd, hogyan viselkedik az elrendezés hosszú szöveggel, nagy gyűjteményekkel vagy határértékekkel, ami elengedhetetlen a robusztus tervezéshez.

Az XAML és a tesztadatok ötvözésének ez a képessége – anélkül, hogy a teljes alkalmazásinfrastruktúrát be kellene állítani – lehetővé teszi az információk vizuális megjelenésének és eloszlásának gyorsabb iterációját , és megkíméli Önt attól, hogy eseti mintaprojekteket kelljen beállítani csak azért, hogy lássa, hogyan néz ki egy űrlap a valós adatokkal.

Az XAML Studio az automatikus mentési rendszerének köszönhetően képes visszaállítani a dokumentumokat és azok adatkörnyezetét az alkalmazás újranyitásakor, így nem kell minden alkalommal újra konfigurálni az adatforrást, amikor egy adott terv tesztelését folytatni szeretné.

Termelékenységi eszközök: IntelliSense, automatikus mentés és egyebek

A pusztán vizuális funkciók mellett az XAML Studio számos termelékenységnövelő eszközt integrál, amelyek megkönnyítik a mindennapi munkát az intenzív XAML- írás során . Az egyik leghasznosabb az IntelliSense támogatás, amely gépelés közben tulajdonságokat, típusokat, vezérlőneveket és névtereket javasol.

Ez az IntelliSense nemcsak felgyorsítja a kódírást, hanem segít megelőzni a kötésekben, elérési utakban és attribútumokban előforduló elgépeléseket is , különösen a stílusok, sablonok vagy megosztott erőforrások hosszú struktúráiban. Ha már ismeri az IntelliSense-t a Visual Studio-ban, otthon fogja érezni magát benne.

Egy másik nagyon praktikus funkció a dokumentumok automatikus mentése és visszaállítása . Az XAML Studio képes automatikusan menteni a munkáját, és az alkalmazás újbóli megnyitásakor visszaállítja a korábban használt lapokat és dokumentumokat, így pontosan ott folytathatja, ahol abbahagyta, anélkül, hogy egyesével kellene megnyitnia a fájlokat.

A felület tartalmaz egy Dokumentációs eszköztárat, amely gyorsbillentyűként szolgál a vezérlők és tulajdonságok példáihoz, súgójához és referenciáihoz. Ez lehetővé teszi a dokumentáció megtekintését az eszköz elhagyása nélkül , ami különösen kényelmes a kevésbé ismert API-k vagy WinUI-specifikus tulajdonságok tesztelésekor.

Tervezési segédletek: Fluent UI, útmutatók és névterek

A projekt legújabb verziói egy átdolgozott felületet kaptak, amely a Microsoft modern tervezőrendszerén, a Fluent UI-n alapul . Ez a frissítés mind az eszköz vizuális megjelenésében, mind a jelenlegi vezérlők, témák és elrendezések integrálásának módjában észrevehető.

Az elrendezés megkönnyítése érdekében az XAML Studio igazítási segédvonalakat és rácsokat tartalmaz az előnézeti felületen. Ezek a segédvonalak megkönnyítik a margók, a kitöltés és az elrendezések igazítását, és különösen hasznosak, ha pixelpontos terveket próbálsz reprodukálni, vagy ha szeretnéd biztosítani az elemek megfelelő illesztését anélkül, hogy mindent manuálisan kellene mérned.

Az eszköz egy másik hasznos területe az XAML névterek kezelése. A névtér-segítőkkel hatékonyabban adhatunk hozzá és javíthatunk xmln-eket, elkerülve a hiányos vagy ismétlődő deklarációk gyakori problémáját, amelyek megtörik a jelölést vagy bosszantó figyelmeztetéseket generálnak.

Apró, a mindennapi használatot segítő fejlesztések is beépültek, például a megnyitott lapok helyi menüből történő másolásának lehetősége , ami nagyszerű, ha ugyanazon elrendezés két variációjával szeretne kísérletezni anélkül, hogy elveszítené az eredeti verziót, vagy új fájlt kellene létrehoznia a semmiből.

Mappa támogatás és erőforrás-kezelés

Az XAML Studio egyik legfontosabb fejlesztése a külső mappák és erőforrások támogatása . Ez azt jelenti, hogy több kapcsolódó fájllal is dolgozhatsz, nem csak egyetlen elszigetelt XAML fájllal.

Ennek a funkciónak köszönhetően az alkalmazás képes képek betöltésére mappákból, tervezési adatfájlokból és egyéb kiegészítő erőforrásokból, amelyek jellemzően a tényleges felületeket kísérik. Például rendelkezhet tesztképekkel egy forgótárhoz, ikonokkal gombokhoz vagy JSON-fájlokkal, amelyek adatforrásként működnek.

Ez a mappatámogatás sokkal közelebb hozza az XAML Studio-t a valós munkafolyamatokhoz, ahelyett, hogy csak egy egyszerű tesztkörnyezet lenne. Lehetővé teszi kisebb tesztforgatókönyvek létrehozását, amelyek egy teljes alkalmazás erőforrás-struktúráját utánozzák , de egy kizárólag prototípus-készítésre tervezett környezet könnyűsúlyú jellegével.

Mindez, a többi előnézeti, kötési és navigációs eszközzel kombinálva, nagyon vonzó választássá teszi az XAML Studio-t azok számára, akik finomítani szeretnék a képernyőiket, mielőtt egy nehézsúlyú megoldásba integrálnák azokat.

Letöltés a Microsoft Store-ból és manuális telepítés

A legtöbb felhasználó számára a legegyszerűbb módja az XAML Studio letöltése közvetlenül a Microsoft Store-ból . Ingyenes alkalmazásként érhető el ott, így mindössze annyit kell tennie, hogy megkeresi, telepíti, és perceken belül elkezdheti kísérletezni az XAML-lel.

A rendelkezésre álló információk szerint a bolti verzió továbbra is az 1.1-es ágon található, míg a legaktívabb fejlesztés a projekt repository dev ágán zajlik. Ez azért fontos, ha a legújabb funkciókhoz szeretnél hozzáférni, vagy hozzá szeretnél járulni a fejlesztéshez, mivel eltérések lehetnek a boltban látottak és a forráskódban találhatóak között.

Ha inkább manuálisan telepítenéd a tárolóból, vagy saját magad fordítanád le, számos minimális követelménynek kell megfelelned a Visual Studio-val kapcsolatban, amelyeket érdemes szem előtt tartanod a megfelelő működés érdekében.

XAML Studio fordítása forráskódból

Ha egy lépéssel tovább szeretnél menni, és a XAML Studio-t a forráskódjából szeretnéd lefordítani , akkor a Visual Studio-ban elő kell készítened a környezetedet a modern Windows-alkalmazások fejlesztésére szolgáló speciális komponensekkel.

Először telepítenie kell a Windows alkalmazásfejlesztési munkafolyamatot a Visual Studio-ban. Ez a munkafolyamat mindent tartalmaz, ami az UWP alkalmazásokkal, a WinUI-val és más modern XAML technológiákkal kapcsolatos a Windows platformon.

Ezenkívül telepítenie kell az Univerzális Windows Platform eszközöket , valamint a specifikus Windows SDK 17763-at. Ezen SDK nélkül a projekt egyes részei nem feltétlenül fordulnak le megfelelően, ezért ajánlott ezt ellenőrizni a Visual Studio telepítőjében a megoldás megnyitása előtt.

Miután minden összetevővel rendelkezel, a repository megnyitásakor győződj meg róla, hogy az XAMLStudio nevű projekt van megjelölve indító projektként a megoldáson belül. Ezután egyszerűen nyomd meg az F5 billentyűt a hibakeresési módban való futtatáshoz, és indítsd el az alkalmazást a saját fejlesztői környezetedből.

Nyílt forráskódú projekt, licencek és magatartási kódex

Mivel .NET Foundation projektként jelent meg , az XAML Studio az MIT licenc alatt kerül terjesztésre, amely az egyik legmegengedőbb nyílt forráskódú licenc. Ez azt jelenti, hogy a kódot szabadon áttekintheted, módosíthatod, újra felhasználhatod és hozzájárulhatsz hozzá, amennyiben tiszteletben tartod a szokásos attribúciós feltételeket.

A tárház tartalmaz egy NOTICE.json fájlt, amely harmadik féltől származó attribúciókat tartalmaz , és amely megegyezik az alkalmazásban megjelenített információkkal a használt külső könyvtárakról. Ha aggódik a vállalati környezetben a licencmegfelelőség miatt, ez a fájl hasznos referenciaként szolgálhat a beépített komponensek megtekintéséhez.

A projekt a Microsoft nyílt forráskódú szoftverek magatartási kódexét alkalmazza , így a problémákban, pull requestekben vagy megbeszélésekben való részvételhez egyértelmű magatartási szabályok betartása szükséges: tisztelet, professzionalizmus és a zaklatással szembeni zéró tolerancia. Van egy GYIK oldal a magatartási kódexről, valamint egy elérhetőségi cím ( [email protected] ) kérdések vagy problémák esetén.

Azok számára, akik aktívan szeretnének együttműködni, a CONTRIBUTING.md fájl leírja, hogyan javasolhatnak változtatásokat, küldhetnek be hozzájárulásokat és jelenthetnek problémákat . Részletesen ismerteti az ágakkal való együttműködés ajánlott módját, a kódellenőrzési munkafolyamatot és a projekten való együttműködés egyéb gyakorlati szempontjait.

Telemetria, adatvédelem és adatgyűjtés

Sok más modern alkalmazáshoz hasonlóan az XAML Studio telemetriai mechanizmusokat is tartalmazott a használati információk gyűjtésére , azzal a céllal, hogy megértse, mely funkciókat használják a legtöbben, hogyan teljesít az alkalmazás különböző dokumentumméretek esetén, és milyen típusú hibák fordulnak elő leggyakrabban.

A jó hír az, hogy maga az alkalmazás egyértelmű kontrollt kínál ezen telemetria felett: a beállítások oldalon, a Visszajelzés részben a Diagnosztikai adatok opciót „Nem” értékre módosíthatja, hogy letiltsa az adatgyűjtést magából az elosztott alkalmazásból.

Érdemes megjegyezni, hogy a projektinformációk szerint az App Center – a telemetria alapjául használt platform – elavult, és jelenleg a v2-es verzióban nem használják az aktív telemetriát, amíg egy alternatív diagnosztikai megoldást nem vizsgálnak.

A Microsoft mindenesetre kijelenti, hogy a szoftver információkat gyűjthet az alkalmazáshasználatról, amelyek felhasználhatók a szolgáltatások és termékek fejlesztésére . Ha Ön fejlesztőként olyan funkciókat használ, amelyek végfelhasználói adatokat gyűjthetnek (például szolgáltatásintegrációk a saját alkalmazásaiban), be kell tartania a vonatkozó törvényeket, és megfelelő adatvédelmi értesítéseket és szabályzatokat kell biztosítania, adott esetben a Microsoft adatvédelmi nyilatkozatára mutató hivatkozással.

Márka, logók és védjegyek használata

A tárház és maga az alkalmazás tartalmazhatja a Microsoft vagy más harmadik felek védjegyeit és logóit. A projekt egyértelművé teszi, hogy ezen védjegyek használata a Microsoft hivatalos márkaépítési irányelveinek hatálya alá tartozik.

Ha úgy dönt, hogy módosított verziókat vagy alternatív disztribúciókat hoz létre a projektből, azt olyan módon kell tennie, hogy ne okozzon zavart, és ne sugallja a Microsoft hivatalos szponzorációját, ha ilyen kapcsolat nem áll fenn. Ez a szabály különösen fontos, ha bináris fájlokat terjeszt újra, vagy a projekt egyes részeit kereskedelmi termékekbe integrálja.

Hasonlóképpen, a kódban használt harmadik fél logóira vagy védjegyeire az adott harmadik felek szabályzatai vonatkoznak, ezért tanácsos ezeket a szempontokat áttekinteni, ha az alkalmazás nagy részeit saját nyilvános projektjeiben kívánja újra felhasználni.

Kontextus: A Visual Studio tervezőivel kapcsolatos frusztráció és az XAML Studio értéke

Az XAML Studio nyílt forráskódú projektként való megjelenése egy olyan időszakban történt, amikor sok fejlesztő elégedetlenségét fejezte ki a Visual Studio vizuális tervezőivel kapcsolatban . A teljesítményproblémák, az összeomlások, az inkonzisztens viselkedés és az összetett XAML hibakeresésének nehézségei visszatérő panaszok voltak.

Ebben a forgatókönyvben az XAML Studio egyfajta menekülőszelepként jelenik meg: egy pehelykönnyű eszköz, amely kifejezetten az XAML tervezésére és tesztelésére összpontosít, és csökkenti a hagyományos szerkesztés-fordítás-futtatás ciklus súrlódásait . Nem célja a Visual Studio leváltása, hanem inkább annak szakértelmének kiegészítése azon a területen, ahol a leginkább fáj: a felület gyors iterációja.

Ez a megközelítés összhangban van az olyan tanulási technológiák aggályaival is, mint a WinUI, a WPF vagy az UWP. Sokak számára a .sln fájlok, az összetett konfigurációk és a végrehajtható fájlokba csomagolás kombinációja igazi fejfájást okozhat, különösen az elején. Egy önálló eszköz, amely kizárólag az XAML rétegre összpontosít, sokkal gördülékenyebbé teszi a tanulási és kísérletezési folyamatot.

Röviden, az XAML Studio megtalálta a helyét, mint nagyra értékelt alkalmazás azok számára, akik idejük jelentős részét a Windows ökoszisztéma felhasználói felületeinek építésére és finomítására fordítják, egy agilisabb és kevésbé nehézkes környezetet kínálva az XAML napi szintű kezeléséhez.

Bárki számára, aki most ismerkedik a C#, WPF, UWP vagy WinUI nyelvekkel, vagy azoknak, akik már őszülnek az XAML-ben, de még mindig küzdenek a lassú teszteléssel és a zavaros hibakereséssel, egy olyan eszköz, mint az XAML Studio, kéznél tartása jelentős változást jelent a prototípus-készítés, az összetett kötések hibakeresése és a tervek validálásának módjában, mielőtt azokat nagy projektekbe integrálnánk – mindezt egy nyílt forráskódú projekt rugalmasságával és azzal a nyugalommal, hogy szabályozhatjuk, milyen adatok kerülnek megosztásra és hogyan használják fel azokat.