XAML Studio: Kompletan vodič za izradu prototipa XAML interfejsa u Windowsu

Informatec Digital » Resursi » XAML Studio: Kompletan vodič za izradu prototipa XAML interfejsa u Windowsu

Ako radite sa XAML-om za kreiranje interfejsa u Windowsu , vjerovatno ste naišli na probleme sa Visual Studio dizajnerom, beskrajnim vremenima kompajliranja ili nemogućim lociranjem grešaka pri povezivanju podataka. Tu nastupa XAML Studio, aplikacija dizajnirana upravo da vam omogući brzo testiranje, otklanjanje grešaka i eksperimentisanje sa XAML-om uz manje trenja.

U ovom članku ćemo detaljno pogledati šta je XAML Studio, kako vam pomaže da napravite prototipove WinUI i UWP interfejsa za nekoliko minuta, koje alate nudi za otklanjanje grešaka u linkovima, upravljanje testnim podacima, navigaciju kroz vizuelno stablo i još mnogo toga. Također ćete vidjeti kako ga preuzeti iz Microsoft Store-a, koji su zahtjevi ako ga želite kompajlirati iz izvornog koda i kako se sve ovo uklapa u trenutni kontekst programera koji su pomalo siti Visual Studio dizajnera.

Šta je XAML Studio i kome je namijenjen?

XAML Studio je Windows aplikacija fokusirana na XAML razvoj , prvobitno kreirana kao Microsoft Garage projekat, a sada objavljena kao projekat otvorenog koda unutar .NET Foundation-a. Njena glavna svrha je da vam omogući da pišete XAML, vidite ga kako radi odmah i komunicirate sa interfejsom kao da je dio vaše vlastite aplikacije.

Posebno je namijenjen programerima koji rade s WinUI XAML i UWP aplikacijama , iako je vrlo koristan i ako dolazite iz WPF-a i želite eksperimentirati s modernim Fluent dizajnerskim konceptima, stilovima, predlošcima i vizualnim stanjima bez potrebe da svaki put gradite kompletno rješenje.

Za razliku od Visual Studija, koji je više usmjeren na kompletan ciklus razvoja, XAML Studio djeluje kao laboratorija ideja za vizualni sloj : kopirate XAML fragment, lijepite ga, prilagođavate, odmah vidite rezultat, igrate se s podacima, provjeravate povezivanja i kada ste zadovoljni, prenosite kod na svoj stvarni projekat.

Nadalje, budući da je projekt otvorenog koda, njegov razvoj je otvoren za zajednicu: svaki programer može pregledati kod, predložiti promjene , poslati poboljšanja i sudjelovati u raspravi o novim funkcijama putem javnog repozitorija.

Ključne karakteristike XAML Studija za prototipiranje interfejsa

Jedna od prednosti XAML Studija je ta što objedinjuje skup alata u jednoj aplikaciji dizajniranoj za testiranje dizajna, kreiranje rasporeda ekrana i otklanjanje grešaka u linkovima uz minimalno vrijeme zastoja. To nije samo XAML preglednik, već interaktivno okruženje za brzo mijenjanje korisničkog interfejsa.

Među njegovim najvažnijim mogućnostima je uređivanje uživo: možete pisati ili mijenjati XAML kod u editoru i odmah vidjeti potpuno funkcionalan pregled . Ovaj prozor za pregled omogućava stvarnu interakciju: pritiskanje dugmadi, promjenu stanja, pomicanje klizača ili testiranje ponašanja baš kao što biste to učinili u konačnoj aplikaciji.

Još jedna upečatljiva karakteristika je mogućnost eksperimentisanja sa XAML navigacijom korištenjem breadcrumb traga. Ovo vam omogućava da se lako krećete kroz složene strukture, vidite tačno gdje u stablu radite i brzo pronađete elemente koje želite prilagoditi.

Osim toga, XAML Studio uključuje skup prečica i opcija za brzi pregled: ponovno učitavanje sadržaja, aktiviranje mreža za poravnanje, primjena izrezivanja ili promjena tema, sve iz menija za brzi pristup dizajniranog za pojednostavljenje ciklusa pokušaja i grešaka.

Interakcija uređivanja uživo i pregleda

Temelj XAML Studija je njegov sistem za uređivanje uživo i interakciju (Live Edit and Interaction) , funkcija uređivanja uživo koja eliminira potrebu za kompajliranjem cijelog rješenja svaki put kada promijenite boju, razmak ili predložak. Pišete kod, spremate ga ili ga čak ostavljate nesačuvanim, a interfejs se osvježava tako da rezultat možete vidjeti odmah.

Ovaj pregled je potpuno interaktivan, što znači da možete testirati ponašanje interfejsa u stvarnom svijetu : navigirati kroz kontrole, pokretati događaje i vidjeti kako se elementi ponašaju kada se stilovi, okidači i vizualna stanja kombiniraju. To je spas za izradu prototipa jer vam pomaže da mnogo brže odlučite šta izgleda dobro, a šta ne.

Nadalje, XAML Studio uključuje vodiče za poravnanje na površini za dizajn , što olakšava dosljedno pozicioniranje elemenata i otkrivanje neusklađenosti koje bi inače mogle proći nezapaženo. Ovo vam omogućava da postignete čistiji raspored bez potrebe za bezbrojnim prilagođavanjima slijepih margina.

U složenim dizajnerskim sistemima, gdje WinUI i Fluent nude mnogo mogućnosti sa sjenama, zaobljenim ivicama i adaptivnim rasporedima, dobro integrirani interaktivni pregled pomaže vam da izbjegnete mnoge frustracije tipične za fino podešavanje u produkciji.

Debugging bindings i istraživanje vizualnog stabla

Jedna od pravih glavobolja u WPF-u, UWP-u ili WinUI-ju su tihe greške vezivanja podataka . Kada vezivanje ne uspije, često vidite samo praznu vrijednost i malo toga drugog, što otežava razumijevanje šta se dešava. XAML Studio uključuje Binding Debugger dizajniran da rasvijetli ovakve probleme.

Pomoću alata za otklanjanje grešaka u vezivanju (Binding Debugger) možete vizualno pregledati kako se svojstva vašeg modela povezuju s kontrolama u interfejsu. Alat prikazuje status svakog vezivanja, posljednje korištene vrijednosti i pomaže vam da brzo utvrdite koje vezivanje ne radi i zašto. Za složene makete s velikim količinama podataka, ovo štedi značajnu količinu vremena.

U vezi s tim, XAML Studio integrira vizualne istraživače stabala i vizualna stanja , dostupnima iz panela Svojstva. Vizualni istraživač stabala prikazuje vam kompletnu hijerarhiju kontrola i elemenata koji čine ekran, omogućavajući vam da odaberete bilo koji čvor i pregledate njegova svojstva, stilove i odnose.

Vizualni istraživač stanja, s druge strane, olakšava pregled i prebacivanje između različitih stanja prikaza (na primjer, normalno, usmjereno, pritisnuto, onemogućeno), što je ključno pri radu s prilagođenim kontrolama ili naprednim predlošcima. Ovo vam omogućava da brzo testirate kako svako stanje utiče na vaš dizajn bez potrebe da ručno forsirate svaku situaciju u stvarnoj aplikaciji.

Upravljanje podacima pomoću uređivača konteksta podataka

Testiranje interfejsa bez stvarnih podataka je kao dizajniranje na slijepo. Zato XAML Studio uključuje Data Context Editor , alat koji vam omogućava da lako definirate kontekst podataka vašeg prikaza kako biste ga popunili informacijama o testiranju.

Iz ovog editora možete povezati svoj korisnički interfejs sa statičkim i dinamičkim izvorima podataka: na primjer, učitati JSON iz lokalne datoteke ili REST API-ja i koristiti ga kao DataContext za svoje kontrole. Ovo vam omogućava da vidite kako se izgled ponaša s dugim tekstom, velikim kolekcijama ili graničnim vrijednostima, što je ključno za robustan dizajn.

Ova mogućnost kombinovanja XAML-a sa testnim podacima, bez potrebe za podešavanjem cijele infrastrukture aplikacije, omogućava vam brže ponavljanje vizualnog izgleda i distribucije informacija i štedi vas od postavljanja ad hoc probnih projekata samo da biste vidjeli kako obrazac izgleda sa stvarnim podacima.

XAML Studio također može vratiti dokumente i njihov kontekst podataka kada ponovo otvorite aplikaciju, zahvaljujući sistemu automatskog spremanja, koji vam štedi potrebu za ponovnim konfiguriranjem izvora podataka svaki put kada želite nastaviti testiranje određenog dizajna.

Alati za produktivnost: IntelliSense, automatsko spremanje i još mnogo toga

Pored svojih isključivo vizualnih funkcija, XAML Studio integriše nekoliko alata za produktivnost koji olakšavaju vaš svakodnevni rad pri intenzivnom pisanju XAML-a . Jedan od najkorisnijih je podrška za IntelliSense, koja predlaže svojstva, tipove, nazive kontrola i imenske prostore dok kucate.

Ovaj IntelliSense ne samo da ubrzava pisanje koda, već i pomaže u sprečavanju tipografskih grešaka u povezivanjima, putanjama i atributima , posebno u dugim strukturama stilova, predložaka ili dijeljenih resursa. Ako ste već upoznati s IntelliSenseom u Visual Studiju, osjećat ćete se kao kod kuće.

Još jedna vrlo praktična funkcija je automatsko spremanje i vraćanje dokumenata . XAML Studio može automatski spremiti vaš rad i, kada ponovo otvorite aplikaciju, preuzeti kartice i dokumente koje ste koristili, tako da možete nastaviti tačno tamo gdje ste stali bez potrebe da otvarate datoteke jednu po jednu.

Interfejs uključuje Alatnu kutiju za dokumentaciju koja služi kao prečica do primjera, pomoći i referenci za kontrole i svojstva. Ovo vam omogućava da konsultujete dokumentaciju bez napuštanja alata , što je posebno praktično prilikom testiranja manje poznatih API-ja ili svojstava specifičnih za WinUI.

Pomoć pri dizajniranju: Fluent UI, vodiči i imenski prostori

Nedavne verzije projekta imaju obnovljeni interfejs zasnovan na Fluent UI-ju , Microsoftovom modernom sistemu dizajna. Ovo ažuriranje je primjetno i u vizualnom izgledu alata i u načinu na koji integrira trenutne kontrole, teme i rasporede.

Kako bi vam pomogao s rasporedom, XAML Studio uključuje vodiče za poravnanje i mreže na površini za pregled. Ovi vodiči olakšavaju poravnavanje margina, paddinga i rasporeda, a posebno su korisni kada pokušavate replicirati dizajne savršene u pikselima ili kada želite osigurati da su elementi pravilno poravnati bez potrebe za ručnim mjerenjem svega.

Još jedno područje gdje ovaj alat pomaže je upravljanje XAML imenskim prostorima. Pomoću pomoćnika za imenske prostore možete efikasnije dodavati i ispravljati xmlnove, izbjegavajući uobičajeni problem nepotpunih ili dupliciranih deklaracija koje prekidaju označavanje ili generiraju dosadna upozorenja.

Uključena su i mala poboljšanja za svakodnevnu upotrebu, poput mogućnosti dupliciranja otvorenih kartica iz kontekstnog menija , što je odlično kada želite eksperimentirati s dvije varijacije istog izgleda bez gubitka originalne verzije ili potrebe za kreiranjem nove datoteke od nule.

Podrška za mape i upravljanje resursima

Jedan od glavnih napredaka u XAML Studiju je podrška za eksterne foldere i resurse . To znači da možete raditi sa skupom povezanih datoteka, a ne samo sa jednom izolovanom XAML datotekom.

Zahvaljujući ovoj funkciji, aplikacija može učitati slike iz foldera, datoteka s dizajnerskim podacima i drugih dodatnih resursa koji obično prate stvarne interfejse. Na primjer, možete imati skup testnih slika za kružnu traku, ikone za dugmad ili JSON datoteke koje djeluju kao izvor podataka.

Ova podrška za mape približava XAML Studio stvarnom radnom procesu, umjesto da bude samo jednostavan sandbox. Omogućava vam postavljanje malih testnih scenarija koji oponašaju strukturu resursa pune aplikacije , ali s laganom prirodom okruženja dizajniranog isključivo za izradu prototipa.

Sve ovo, u kombinaciji s ostatkom alata za pregled, povezivanje i navigaciju, čini XAML Studio vrlo atraktivnom opcijom za one koji žele poboljšati svoje ekrane prije nego što ih integriraju u kompleksno rješenje.

Preuzimanje iz Microsoft trgovine i ručna instalacija

Za većinu korisnika, najlakši način za početak je preuzimanje XAML Studia direktno iz Microsoft Store-a . Tamo je dostupan kao besplatna aplikacija, tako da sve što trebate učiniti je pronaći ga, instalirati ga i početi eksperimentirati s XAML-om za nekoliko minuta.

Prema dostupnim informacijama, verzija u trgovini je još uvijek na grani 1.1, dok se najaktivniji razvoj odvija na dev grani repozitorija projekta. Ovo je važno ako želite pristupiti najnovijim funkcijama ili doprinijeti razvoju, jer mogu postojati razlike između onoga što vidite u trgovini i onoga što se nalazi u izvornom kodu.

Ako ga više volite ručno instalirati iz repozitorija ili ga sami kompajlirati, postoji niz minimalnih zahtjeva vezanih za Visual Studio koje biste trebali imati na umu kako biste osigurali da sve ispravno funkcionira.

Kompajlirajte XAML Studio iz izvornog koda

Ako želite ići korak dalje i kompajlirati XAML Studio iz njegovog izvornog koda , morat ćete pripremiti svoje okruženje u Visual Studiju sa specifičnim komponentama usmjerenim na razvoj modernih Windows aplikacija.

Prvo, potrebno je instalirati radno opterećenje razvoja Windows aplikacija u Visual Studiju. Ovo radno opterećenje uključuje sve što je vezano za UWP aplikacije, WinUI i druge moderne XAML tehnologije na Windows platformi.

Osim toga, morat ćete imati instalirane alate Universal Windows Platform , kao i specifični Windows SDK 17763. Bez ovog SDK-a, neki dijelovi projekta se možda neće ispravno kompajlirati, stoga je preporučljivo provjeriti ovo u instalacijskom programu Visual Studija prije otvaranja rješenja.

Kada imate sve komponente, kada otvorite repozitorij, provjerite je li projekt pod nazivom XAMLStudio označen kao početni projekt unutar rješenja. Zatim jednostavno pritisnite F5 da biste pokrenuli aplikaciju u debug modu i pokrenuli je iz vlastitog razvojnog okruženja.

Projekt otvorenog koda, licence i kodeks ponašanja

Budući da je objavljen kao .NET Foundation projekat , XAML Studio se distribuira pod MIT licencom, jednom od najpopustljivijih licenci otvorenog koda. To znači da možete pregledavati, mijenjati, ponovo koristiti i doprinositi kodu sasvim slobodno, sve dok poštujete uobičajene uslove navođenja autora.

Repozitorij uključuje datoteku NOTICE.json s atribucijama trećih strana , koja se podudara s informacijama prikazanim unutar same aplikacije u vezi s korištenim vanjskim bibliotekama. Ako ste zabrinuti zbog usklađenosti s licencama u poslovnim okruženjima, ova datoteka je korisna referenca za pregled koje su komponente ugrađene.

Projekat je usvojio Microsoftov kodeks ponašanja otvorenog koda , tako da učešće u problemima, zahtjevima za povlačenjem ili diskusijama zahtijeva pridržavanje jasnih pravila ponašanja: poštovanje, profesionalnost i nulta tolerancija prema uznemiravanju. Postoji i stranica s često postavljanim pitanjima o kodeksu ponašanja i kontakt adresa ( [email protected] ) za pitanja ili probleme.

Za one koji žele aktivno sarađivati, datoteka CONTRIBUTING.md opisuje kako predložiti promjene, poslati doprinose i prijaviti probleme . Detaljno opisuje preporučeni način rada s granama, tijek rada za pregled koda i druge praktične aspekte saradnje na projektu.

Telemetrija, privatnost i prikupljanje podataka

Kao i mnoge druge moderne aplikacije, XAML Studio je uključivao telemetrijske mehanizme za prikupljanje informacija o korištenju , s ciljem razumijevanja koje se funkcije najviše koriste, kako aplikacija radi na različitim veličinama dokumenata i koje se vrste grešaka najčešće javljaju.

Dobra vijest je da sama aplikacija nudi jasnu kontrolu nad ovom telemetrijom: na stranici postavki, u odjeljku Povratne informacije , možete promijeniti opciju Dijagnostički podaci na "Ne" kako biste onemogućili prikupljanje podataka iz same distribuirane aplikacije.

Vrijedi napomenuti da je, prema informacijama o projektu, App Center — platforma koja se koristi kao osnova za telemetriju — zastarjela i da se trenutno aktivna telemetrija ne koristi u verziji v2 dok se odlučuje o alternativnom rješenju za dijagnostiku.

U svakom slučaju, Microsoft navodi da softver može prikupljati informacije o korištenju aplikacije, što bi se moglo koristiti za poboljšanje usluga i proizvoda . Ako vi, kao programer, koristite funkcije koje mogu prikupljati podatke krajnjih korisnika (na primjer, integracije usluga u vašim vlastitim aplikacijama), morate se pridržavati važećeg zakona i pružiti odgovarajuće obavijesti i politike o privatnosti, povezujući se na Microsoftovu izjavu o privatnosti gdje je to prikladno.

Brend, logotipi i upotreba zaštitnih znakova

Repozitorij i sama aplikacija mogu sadržavati zaštitne znakove i logotipe Microsofta ili drugih trećih strana. Projekt jasno stavlja do znanja da je korištenje ovih zaštitnih znakova podložno službenim smjernicama za brendiranje Microsofta.

Ako odlučite kreirati modificirane verzije projekta ili alternativne distribucije, to morate učiniti na način koji ne izaziva zabunu ili ne sugerira službeno sponzorstvo od strane Microsofta kada takav odnos ne postoji. Ovo pravilo je posebno važno ako redistribuirate binarne datoteke ili integrirate dijelove projekta u komercijalne proizvode.

Slično tome, svi logotipi ili zaštitni znakovi trećih strana korišteni u kodu podliježu politikama tih trećih strana, stoga je preporučljivo pregledati ove aspekte ako namjeravate ponovno koristiti velike dijelove aplikacije u vlastitim javnim projektima.

Kontekst: Frustracija dizajnerima Visual Studija i vrijednost XAML Studija

Objavljivanje XAML Studija kao projekta otvorenog koda dogodilo se u vrijeme kada su mnogi programeri izražavali nezadovoljstvo vizualnim dizajnerima Visual Studija . Problemi s performansama, rušenja sistema, nedosljedno ponašanje i poteškoće s otklanjanjem grešaka u složenom XAML-u bile su ponavljajuće pritužbe.

U ovom scenariju, XAML Studio se doživljava kao svojevrsni ventil za evakuaciju: lagani alat, posebno fokusiran na XAML dizajn i testiranje, koji smanjuje dio trenja tradicionalnog ciklusa uređivanja-kompajliranja-izvršavanja. Njegov cilj nije da zamijeni Visual Studio, već da dopuni njegovu stručnost u području gdje najviše šteti: brzoj iteraciji na interfejsu.

Ovaj pristup je također u skladu s problemima tehnologija učenja poput WinUI-ja, WPF-a ili UWP-a. Za mnoge, kombinacija .sln datoteka, složenih konfiguracija i pakiranja u izvršne datoteke može biti prava glavobolja, posebno na početku. Posjedovanje samostalnog alata koji se fokusira isključivo na XAML sloj čini proces učenja i eksperimentiranja mnogo lakšim.

Ukratko, XAML Studio je pronašao svoju nišu kao visoko cijenjena aplikacija za one koji značajan dio svog vremena posvećuju izgradnji i usavršavanju korisničkih interfejsa u Windows ekosistemu, nudeći agilnije i manje glomazno okruženje za svakodnevnu manipulaciju XAML-om.

Za svakoga ko počinje sa C#, WPF, UWP ili WinUI, ili za one koji su već zaslijepljeni XAML-om, ali se i dalje bore sa sporim testiranjem i zbunjujućim otklanjanjem grešaka, posjedovanje alata poput XAML Studija pri ruci predstavlja značajnu promjenu u načinu na koji pristupate izradi prototipa , otklanjanju grešaka složenih povezivanja i validaciji dizajna prije njihove integracije u velike projekte - sve uz fleksibilnost projekta otvorenog koda i bezbrižnost kontrole nad podacima koji se dijele i kako se koriste.