XAML Studio: Një udhëzues i plotë për prototipimin e ndërfaqeve XAML në Windows

Informatec Digital » Burime » XAML Studio: Një udhëzues i plotë për prototipimin e ndërfaqeve XAML në Windows

Nëse punoni me XAML për të krijuar ndërfaqe në Windows , ndoshta keni hasur vështirësi me projektuesin e Visual Studio, kohë të pafundme përpilimi ose gabime të pamundura për t'u gjetur në lidhjen e të dhënave. Këtu hyn në lojë XAML Studio, një aplikacion i projektuar pikërisht për t'ju lejuar të testoni, debugoni dhe eksperimentoni me XAML shpejt dhe me më pak vështirësi.

Gjatë gjithë këtij artikulli, do të hedhim një vështrim të detajuar se çfarë është XAML Studio, si ju ndihmon të krijoni prototipa të ndërfaqeve WinUI dhe UWP brenda pak minutash, çfarë mjetesh ofron për debugging lidhjesh, menaxhim të të dhënave të testimit, lundrim në pemën vizuale dhe shumë më tepër. Gjithashtu do të shihni se si ta shkarkoni nga Microsoft Store, cilat janë kërkesat nëse doni ta kompiloni nga kodi burimor dhe si përshtatet e gjithë kjo në kontekstin aktual të zhvilluesve që janë disi të ngopur me dizajnerët e Visual Studio.

Çfarë është XAML Studio dhe për kë është?

XAML Studio është një aplikacion për Windows i fokusuar në zhvillimin e XAML , i krijuar fillimisht si një projekt i Microsoft Garage dhe tani i publikuar si një projekt me burim të hapur brenda .NET Foundation. Qëllimi i tij kryesor është t'ju lejojë të shkruani XAML, ta shihni atë duke punuar menjëherë dhe të bashkëveproni me ndërfaqen sikur të ishte pjesë e aplikacionit tuaj.

Është veçanërisht i orientuar drejt zhvilluesve që punojnë me aplikacionet WinUI XAML dhe UWP , megjithëse është gjithashtu shumë i dobishëm nëse vini nga WPF dhe dëshironi të eksperimentoni me koncepte, stile, shabllone dhe gjendje vizuale moderne të dizajnit Fluent pa pasur nevojë të ndërtoni një zgjidhje të plotë çdo herë.

Ndryshe nga Visual Studio, i cili është më i orientuar drejt ciklit të plotë të zhvillimit, XAML Studio vepron si një laborator idesh për shtresën vizuale : ju kopjoni një fragment XAML, e ngjisni, e rregulloni, e shihni rezultatin menjëherë, luani me të dhënat, kontrolloni lidhjet dhe kur jeni të kënaqur, e çoni kodin në projektin tuaj të vërtetë.

Për më tepër, duke qenë një projekt me burim të hapur, evolucioni i tij është i hapur për komunitetin: çdo zhvillues mund ta rishikojë kodin, të propozojë ndryshime , të paraqesë përmirësime dhe të marrë pjesë në diskutimin e veçorive të reja përmes depozitës publike.

Karakteristikat kryesore të XAML Studio për prototipimin e ndërfaqeve

Një nga pikat e forta të XAML Studio është se ai bashkon një sërë mjetesh në një aplikacion të vetëm të projektuar për testimin e dizajneve, krijimin e paraqitjeve të ekranit dhe debugging-un e lidhjeve me kohë minimale ndërprerjeje. Nuk është vetëm një shikues XAML, por një mjedis interaktiv për iterim të shpejtë në UI-në tuaj.

Ndër aftësitë e tij më të rëndësishme është redaktimi i drejtpërdrejtë: mund të shkruani ose modifikoni kodin XAML në redaktues dhe menjëherë të shihni një pamje paraprake plotësisht funksionale . Kjo dritare pamjeje paraprake lejon ndërveprim real: shtypjen e butonave, ndryshimin e gjendjeve, lëvizjen e rrëshqitësve ose testimin e sjelljeve njësoj siç do të bënit në aplikacionin përfundimtar.

Një tjetër veçori mbresëlënëse është aftësia për të eksperimentuar me navigimin XAML duke përdorur një gjurmë të thërrimeve të bukës. Kjo ju lejon të lëvizni lehtësisht nëpër struktura komplekse, të shihni saktësisht se ku po punoni në pemë dhe të gjeni shpejt elementët që dëshironi të rregulloni.

Për më tepër, XAML Studio përfshin një sërë shkurtoresh dhe opsionesh të shpejta paraprake: ringarkoni përmbajtjen, aktivizoni rrjetat e rreshtimit, aplikoni prerjen ose ndryshoni temat, të gjitha nga një menu me akses të shpejtë e projektuar për të përmirësuar ciklin e provës dhe gabimit.

Redaktimi i drejtpërdrejtë dhe ndërveprimi paraprak i pamjes paraprake

Themeli i XAML Studio është sistemi i tij i Redaktimit dhe Ndërveprimit të Drejtpërdrejtë , një veçori e redaktimit të drejtpërdrejtë që eliminon nevojën për të kompiluar të gjithë zgjidhjen sa herë që ndryshoni një ngjyrë, hapësirë ​​ose shabllon. Ju shkruani kod, e ruani ose edhe e lini të paruajtur, dhe ndërfaqja rifreskohet në mënyrë që të mund ta shihni rezultatin menjëherë.

Ky parapamje është plotësisht interaktive, që do të thotë se mund të testoni sjelljet e ndërfaqes në botën reale : të lundroni nëpër kontrolle, të aktivizoni ngjarje dhe të shihni se si sillen elementët kur kombinohen stilet, aktivizuesit dhe gjendjet vizuale. Është një shpëtim jete për prototipimin sepse ju ndihmon të vendosni shumë më shpejt se çfarë duket mirë dhe çfarë jo.

Për më tepër, XAML Studio përfshin udhëzues rreshtimi në sipërfaqen e dizajnit , duke e bërë të lehtë pozicionimin e elementëve në mënyrë të qëndrueshme dhe zbulimin e keqrreshtimeve që përndryshe mund të kalonin pa u vënë re. Kjo ju lejon të arrini një paraqitje më të pastër pa pasur nevojë të bëni rregullime të panumërta të margjinave të verbëra.

Në sisteme komplekse dizajni, ku WinUI dhe Fluent ofrojnë shumë mundësi me hije, skaje të rrumbullakosura dhe paraqitje adaptive, të paturit e një pamjeje paraprake interaktive të integruar mirë ju ndihmon të shmangni shumë nga zhgënjimet tipike të rregullimit të imët në prodhim.

Debugimi i lidhjeve dhe eksplorimi i pemës vizuale

Një nga problemet e vërteta në WPF, UWP ose WinUI janë gabimet e heshtura të lidhjes së të dhënave . Kur një lidhje dështon, shpesh shihni vetëm një vlerë boshe dhe pak gjëra të tjera, duke e bërë të vështirë të kuptoni se çfarë po ndodh. XAML Studio përfshin një Binding Debugger të projektuar për të hedhur dritë mbi këto lloj problemesh.

Me Binding Debugger, mund të rishikoni vizualisht se si lidhen vetitë e modelit tuaj me kontrollet në ndërfaqe. Mjeti shfaq statusin e çdo lidhjeje, vlerat e fundit të përdorura dhe ju ndihmon të përcaktoni shpejt se cila lidhje po dështon dhe pse. Për modele komplekse me sasi të mëdha të dhënash, kjo kursen një sasi të konsiderueshme kohe.

Lidhur me këtë, XAML Studio integron eksploruesit e pemës vizuale dhe gjendjet vizuale , të arritshme nga paneli i Vetive. Eksploruesi i pemës vizuale ju tregon hierarkinë e plotë të kontrolleve dhe elementëve që përbëjnë ekranin, duke ju lejuar të zgjidhni çdo nyje dhe të shikoni vetitë, stilet dhe marrëdhëniet e saj.

Ndërkohë, eksploruesi i gjendjes vizuale e bën të lehtë shikimin dhe kalimin midis gjendjeve të ndryshme të një pamjeje (për shembull, normale, e drejtuar, e shtypur, e çaktivizuar), gjë që është thelbësore kur punoni me kontrolle të personalizuara ose shabllone të përparuara. Kjo ju lejon të testoni shpejt se si secila gjendje ndikon në dizajnin tuaj pa pasur nevojë të detyroni manualisht secilën situatë në aplikacionin aktual.

Menaxhimi i të dhënave me Redaktorin e Kontekstit të të Dhënave

Testimi i një ndërfaqeje pa të dhëna reale është si dizajnimi i verbër. Kjo është arsyeja pse XAML Studio përfshin një Redaktor të Kontekstit të të Dhënave , një mjet që ju lejon të përcaktoni lehtësisht kontekstin e të dhënave të pamjes suaj për ta populluar atë me informacion testimi.

Nga ky redaktues, mund ta lidhni ndërfaqen tuaj të përdoruesit me burime të dhënash statike dhe dinamike: për shembull, ngarkoni JSON nga një skedar lokal ose një API REST dhe përdoreni atë si DataContext për kontrollet tuaja. Kjo ju lejon të shihni se si sillet paraqitja me tekst të gjatë, koleksione të mëdha ose vlera kufitare, gjë që është thelbësore për një dizajn të fuqishëm.

Kjo aftësi për të përzier XAML me të dhënat e testimit, pa pasur nevojë të konfiguroni të gjithë infrastrukturën e aplikacionit tuaj, ju lejon të përsërisni më shpejt pamjen vizuale dhe shpërndarjen e informacionit, dhe ju kursen nga konfigurimi i projekteve shembullore ad hoc vetëm për të parë se si duket një formular me të dhëna reale.

XAML Studio gjithashtu mund të rivendosë dokumentet dhe kontekstin e të dhënave të tyre kur rihapni aplikacionin, falë sistemit të tij të ruajtjes automatike, i cili ju kursen nga rikonfigurimi i burimit të të dhënave sa herë që dëshironi të vazhdoni testimin e një dizajni specifik.

Mjete produktiviteti: IntelliSense, ruajtja automatike dhe më shumë

Përveç veçorive të tij thjesht vizuale, XAML Studio integron disa mjete produktiviteti që e bëjnë punën tuaj të përditshme më të lehtë kur shkruani intensivisht XAML . Një nga më të dobishmet është mbështetja IntelliSense, e cila sugjeron veti, lloje, emra kontrollesh dhe hapësira emrash ndërsa shkruani.

Ky IntelliSense jo vetëm që përshpejton shkrimin e kodit, por gjithashtu ndihmon në parandalimin e gabimeve drejtshkrimore në lidhje, shtigje dhe atribute , veçanërisht në strukturat e gjata të stileve, shablloneve ose burimeve të përbashkëta. Nëse jeni tashmë të njohur me IntelliSense në Visual Studio, do të ndiheni si në shtëpi.

Një tjetër veçori shumë praktike është ruajtja dhe restaurimi automatik i dokumenteve . XAML Studio mund ta ruajë automatikisht punën tuaj dhe, kur ta rihapni aplikacionin, të rikuperojë skedat dhe dokumentet që po përdornit, në mënyrë që të mund të vazhdoni pikërisht aty ku e latë pa pasur nevojë të hapni skedarët një nga një.

Ndërfaqja përfshin një Kuti Mjetesh Dokumentacioni që shërben si një shkurtore për shembuj, ndihmë dhe referenca për kontrollet dhe vetitë. Kjo ju lejon të konsultoheni me dokumentacionin pa dalë nga mjeti , gjë që është veçanërisht e përshtatshme kur testoni API-të ose vetitë specifike të WinUI-t më pak të njohura.

Ndihma për dizajn: Ndërfaqe përdoruesi e rrjedhshme, udhëzues dhe hapësira emrash

Versionet e fundit të projektit kanë paraqitur një ndërfaqe të ripërpunuar bazuar në Fluent UI , sistemin modern të dizajnit të Microsoft. Ky përditësim është i dukshëm si në pamjen vizuale të mjetit ashtu edhe në mënyrën se si ai integron kontrollet, temat dhe paraqitjet aktuale.

Për t'ju ndihmuar me paraqitjen, XAML Studio përfshin udhëzues dhe rrjeta për rreshtimin në sipërfaqen e pamjes paraprake. Këta udhëzues e bëjnë të lehtë rreshtimin e kufijve, mbushjes dhe paraqitjeve, dhe janë veçanërisht të dobishëm kur përpiqeni të replikoni dizajne perfekte për pikselët ose kur doni të siguroheni që elementët janë të rreshtuar siç duhet pa pasur nevojë të matni gjithçka manualisht.

Një fushë tjetër ku ky mjet ndihmon është menaxhimi i hapësirave të emrave XAML. Me Ndihmësit e Hapësirës së Emrave, ju mund të shtoni dhe korrigjoni xmln-e në mënyrë më efikase, duke shmangur problemin e zakonshëm të deklarimeve të paplota ose të dyfishta që prishin shënimin ose gjenerojnë paralajmërime bezdisëse.

Janë përfshirë gjithashtu përmirësime të vogla për përdorim të përditshëm, siç është aftësia për të dublikuar skedat e hapura nga menyja e kontekstit , gjë që është shumë e mirë kur doni të eksperimentoni me dy variante të të njëjtit paraqitje pa humbur versionin origjinal ose pa pasur nevojë të krijoni një skedar të ri nga e para.

Mbështetje për dosjet dhe menaxhim burimesh

Një nga zhvillimet kryesore në XAML Studio ka qenë mbështetja për dosjet dhe burimet e jashtme . Kjo do të thotë që ju mund të punoni me një grup skedarësh të lidhur, jo vetëm me një skedar të vetëm XAML të izoluar.

Falë kësaj veçorie, aplikacioni mund të trajtojë ngarkimin e imazheve nga dosjet, skedarët e të dhënave të dizajnit dhe burime të tjera plotësuese që zakonisht shoqërojnë ndërfaqet aktuale. Për shembull, mund të keni një grup imazhesh testimi për një karusel, ikona për butona ose skedarë JSON që veprojnë si burim të dhënash.

Kjo mbështetje për dosjet e sjell XAML Studio shumë më afër një rrjedhe pune në botën reale, në vend që të jetë thjesht një sandbox i thjeshtë. Ju lejon të konfiguroni skenarë të vegjël testimi që imitojnë strukturën e burimeve të një aplikacioni të plotë , por me natyrën e lehtë të një mjedisi të projektuar vetëm për prototipizim.

E gjithë kjo, e kombinuar me pjesën tjetër të mjeteve të parapamjes, lidhjes dhe navigimit, e bën XAML Studio një mundësi shumë tërheqëse për ata që duan të përsosin ekranet e tyre përpara se t'i integrojnë ato në një zgjidhje të fuqishme.

Shkarko nga Microsoft Store dhe instalo manualisht

Për shumicën e përdoruesve, mënyra më e lehtë për të filluar është të shkarkojnë XAML Studio direkt nga Microsoft Store . Është i disponueshëm atje si një aplikacion falas, kështu që e tëra çfarë duhet të bëni është ta kërkoni, ta instaloni dhe të filloni të eksperimentoni me XAML brenda pak minutash.

Versioni i dyqanit, sipas informacionit të disponueshëm, është ende në degën 1.1, ndërsa zhvillimi më aktiv zhvillohet në degën zhvilluese të depove të projektit. Kjo është e rëndësishme nëse doni të keni akses në veçoritë më të fundit ose të kontribuoni në zhvillim, pasi mund të ketë dallime midis asaj që shihni në dyqan dhe asaj që është në kodin burimor.

Nëse preferoni ta instaloni manualisht nga depoja ose ta kompiloni vetë, ekzistojnë një numër kërkesash minimale që lidhen me Visual Studio që duhet t'i mbani mend për t'u siguruar që gjithçka funksionon siç duhet.

Kompiloni XAML Studio nga kodi burimor

Nëse doni të shkoni një hap më tej dhe të kompiloni XAML Studio nga kodi i tij burimor , do t'ju duhet të përgatitni mjedisin tuaj në Visual Studio me komponentë specifikë të orientuar drejt zhvillimit të aplikacioneve moderne të Windows.

Së pari, duhet të instaloni ngarkesën e punës së zhvillimit të aplikacioneve Windows në Visual Studio. Kjo ngarkesë pune përfshin gjithçka që lidhet me aplikacionet UWP, WinUI dhe teknologjitë e tjera moderne XAML në platformën Windows.

Përveç kësaj, do t'ju duhet të keni të instaluara mjetet Universal Windows Platform , si dhe SDK-në specifike të Windows 17763. Pa këtë SDK, disa pjesë të projektit mund të mos kompilohen saktë, prandaj këshillohet ta kontrolloni këtë në instaluesin e Visual Studio përpara se të hapni zgjidhjen.

Pasi të keni të gjithë komponentët, kur të hapni depozitën, sigurohuni që projekti i quajtur XAMLStudio të jetë shënuar si projekti fillestar brenda zgjidhjes. Pastaj, thjesht shtypni F5 për të ekzekutuar në modalitetin e debugimit dhe për të nisur aplikacionin nga mjedisi juaj i zhvillimit.

Projekt me burim të hapur, licenca dhe kod sjelljeje

Meqenëse është publikuar si një projekt i .NET Foundation , XAML Studio shpërndahet sipas Licencës MIT, një nga licencat më tolerante të burimit të hapur. Kjo do të thotë që ju mund ta rishikoni, modifikoni, ripërdorni dhe kontribuoni në kod mjaft lirisht, për sa kohë që respektoni kushtet e zakonshme të atribuimit.

Depozita përfshin një skedar NOTICE.json me atribuime të palëve të treta , i cili përputhet me informacionin e shfaqur brenda vetë aplikacionit në lidhje me bibliotekat e jashtme të përdorura. Nëse jeni të shqetësuar për pajtueshmërinë me licencën në mjediset e ndërmarrjeve, ky skedar është një referencë e dobishme për të parë se cilët komponentë janë përfshirë.

Projekti ka miratuar Kodin e Sjelljes së Microsoft-it për Burim të Hapur , kështu që pjesëmarrja në çështje, kërkesa për tërheqje ose diskutime kërkon respektimin e rregullave të qarta të sjelljes: respekt, profesionalizëm dhe tolerancë zero ndaj ngacmimit. Ekziston gjithashtu një faqe me pyetje të shpeshta rreth kodit të sjelljes dhe një adresë kontakti ( [email protected] ) për pyetje ose çështje.

Për ata që duan të bashkëpunojnë në mënyrë aktive, skedari CONTRIBUTING.md përshkruan se si të propozohen ndryshime, të dorëzohen kontribute dhe të raportohen probleme . Ai detajon mënyrën e rekomanduar për të punuar me degët, rrjedhën e punës së rishikimit të kodit dhe aspekte të tjera praktike të bashkëpunimit në projekt.

Telemetria, privatësia dhe mbledhja e të dhënave

Ashtu si shumë aplikacione të tjera moderne, XAML Studio përfshiu mekanizma telemetrie për të mbledhur informacion mbi përdorimin , me qëllim që të kuptohej se cilat veçori përdoren më shumë, si funksionon aplikacioni në madhësi të ndryshme dokumentesh dhe cilat lloje gabimesh ndodhin më shpesh.

Lajmi i mirë është se vetë aplikacioni ofron kontroll të qartë mbi këtë telemetri: nga faqja e cilësimeve, në seksionin Feedback , mund ta ndryshoni opsionin e të Dhënave Diagnostikuese në "Jo" për të çaktivizuar mbledhjen e të dhënave nga vetë aplikacioni i shpërndarë.

Vlen të përmendet se, sipas informacionit të projektit, App Center —platforma e përdorur si bazë për telemetrinë — është vjetëruar dhe, për momentin, telemetria aktive nuk po përdoret në versionin v2, ndërsa po vendoset për një zgjidhje alternative për diagnostikimin.

Sidoqoftë, Microsoft deklaron se softueri mund të mbledhë informacione rreth përdorimit të aplikacionit, të cilat mund të përdoren për të përmirësuar shërbimet dhe produktet . Nëse ju, si zhvillues, përdorni veçori që mund të mbledhin të dhëna të përdoruesit fundor (për shembull, integrimet e shërbimeve në aplikacionet tuaja), duhet të zbatoni ligjin në fuqi dhe të jepni njoftime dhe politika të përshtatshme për privatësinë, duke u lidhur me deklaratën e privatësisë së Microsoft-it aty ku është e përshtatshme.

Marka, logot dhe përdorimi i markave tregtare

Depozita dhe vetë aplikacioni mund të përmbajnë marka tregtare dhe logo të Microsoft-it ose palëve të treta. Projekti e bën të qartë se përdorimi i këtyre markave tregtare i nënshtrohet udhëzimeve zyrtare të markës së Microsoft-it.

Nëse vendosni të krijoni versione të modifikuara të projektit ose shpërndarje alternative, duhet ta bëni këtë në një mënyrë që nuk shkakton konfuzion ose nuk sugjeron sponsorizim zyrtar nga Microsoft kur nuk ekziston një marrëdhënie e tillë. Ky rregull është veçanërisht i rëndësishëm nëse rishpërndani skedarë binare ose integroni pjesë të projektit në produkte komerciale.

Në mënyrë të ngjashme, çdo logo ose markë tregtare e palëve të treta e përdorur në kod i nënshtrohet politikave të atyre palëve të treta, prandaj këshillohet të rishikoni këto aspekte nëse keni ndërmend të ripërdorni pjesë të mëdha të aplikacionit në projektet tuaja publike.

Konteksti: Zhgënjimi me dizajnerët e Visual Studio dhe vlera e XAML Studio

Publikimi i XAML Studio si një projekt me burim të hapur erdhi në një kohë kur shumë zhvillues shprehnin pakënaqësi me dizajnerët vizualë të Visual Studio . Problemet me performancën, bllokimet, sjellja jokonsistente dhe vështirësitë në debugging-un e XAML-së komplekse ishin ankesa të përsëritura.

Në këtë skenar, XAML Studio perceptohet si një lloj valvule shpëtimi: një mjet i lehtë, i fokusuar posaçërisht në projektimin dhe testimin e XAML, që zvogëlon disa nga vështirësitë e ciklit tradicional redaktim-kompilim-ekzekutim. Nuk synon të zëvendësojë Visual Studio, por më tepër të plotësojë ekspertizën e tij në fushën ku dëmton më shumë: përsëritjen e shpejtë në ndërfaqe.

Kjo qasje përputhet gjithashtu me shqetësimet e atyre teknologjive të të nxënit si WinUI, WPF ose UWP. Për shumë njerëz, kombinimi i skedarëve .sln, konfigurimeve komplekse dhe paketimit në skedarë ekzekutues mund të jetë një dhimbje koke e vërtetë, veçanërisht në fillim. Të kesh një mjet të pavarur për t'u përqendruar vetëm në shtresën XAML e bën procesin e të nxënit dhe eksperimentimit shumë më të lehtë.

Shkurt, XAML Studio ka gjetur vendin e vet si një aplikacion shumë i vlerësuar për ata që i kushtojnë një pjesë të konsiderueshme të kohës së tyre ndërtimit dhe rafinimit të ndërfaqeve të përdoruesit në ekosistemin Windows, duke ofruar një mjedis më të shkathët dhe më pak të rëndë për manipulimin e XAML në baza ditore.

Për këdo që sapo ka filluar të përdorë C#, WPF, UWP ose WinUI, ose për ata që tashmë janë thinjur në XAML, por ende kanë vështirësi me testime të ngadalta dhe debugging konfuz, të paturit e një mjeti si XAML Studio përfaqëson një ndryshim të rëndësishëm në mënyrën se si i qaseni prototipimit , debuggimit të lidhjeve komplekse dhe validimit të dizajneve përpara se t'i integroni ato në projekte të mëdha - të gjitha me fleksibilitetin e një projekti me burim të hapur dhe qetësinë shpirtërore të të qenit në gjendje të kontrolloni se cilat të dhëna ndahen dhe si përdoren ato.