XAML Studio: Isang Kumpletong Gabay sa Paggawa ng Prototyping ng mga XAML Interface sa Windows

Informatec Digital » Kayamanan » XAML Studio: Isang Kumpletong Gabay sa Paggawa ng Prototyping ng mga XAML Interface sa Windows

Kung gumagamit ka ng XAML para lumikha ng mga interface sa Windows , malamang ay nakaranas ka na ng mga problema sa Visual Studio designer, walang katapusang oras ng compilation, o mga error sa data binding na imposibleng mahanap. Dito pumapasok ang XAML Studio, isang application na dinisenyo nang tumpak para mabilis at mas kaunting aberya ang subukan, i-debug, at mag-eksperimento sa XAML .

Sa buong artikulong ito, tatalakayin natin nang detalyado kung ano ang XAML Studio, kung paano nito natutulungan kang mag-prototype ng mga interface ng WinUI at UWP sa loob ng ilang minuto, kung anong mga tool ang iniaalok nito para sa pag-debug ng mga link, pamamahala ng test data, pag-navigate sa visual tree, at marami pang iba. Makikita mo rin kung paano ito i-download mula sa Microsoft Store, ano ang mga kinakailangan kung gusto mong i-compile ito mula sa source code, at kung paano umaangkop ang lahat ng ito sa kasalukuyang konteksto ng mga developer na medyo sawa na sa mga Visual Studio designer.

Ano ang XAML Studio at para kanino ito?

Ang XAML Studio ay isang aplikasyon sa Windows na nakatuon sa pagbuo ng XAML , na orihinal na nilikha bilang isang proyekto ng Microsoft Garage at ngayon ay inilabas bilang isang open-source na proyekto sa loob ng .NET Foundation. Ang pangunahing layunin nito ay pahintulutan kang magsulat ng XAML, makita itong gumagana agad, at makipag-ugnayan sa interface na parang bahagi ito ng iyong sariling app.

Ito ay partikular na nakatuon sa mga developer na gumagamit ng mga aplikasyon ng WinUI XAML at UWP , bagama't kapaki-pakinabang din ito kung ikaw ay nagmula sa WPF at gustong mag-eksperimento sa mga modernong konsepto, istilo, template, at visual na estado ng disenyo ng Fluent nang hindi kinakailangang bumuo ng kumpletong solusyon sa bawat pagkakataon.

Hindi tulad ng Visual Studio, na mas nakatuon sa kumpletong siklo ng pag-unlad, ang XAML Studio ay gumaganap bilang isang ideas lab para sa visual layer : kinokopya mo ang isang XAML fragment, ipini-paste ito, inaayos ito, agad na nakikita ang resulta, pinaglalaruan ang data, sinusuri ang mga binding, at kapag nasiyahan ka na, dadalhin mo ang code sa iyong tunay na proyekto.

Bukod pa rito, bilang isang open source na proyekto, ang ebolusyon nito ay bukas sa komunidad: maaaring suriin ng sinumang developer ang code, magmungkahi ng mga pagbabago , magsumite ng mga pagpapabuti at lumahok sa talakayan ng mga bagong tampok sa pamamagitan ng pampublikong repositoryo.

Mga pangunahing tampok ng XAML Studio para sa paggawa ng prototyping ng mga interface

Isa sa mga kalakasan ng XAML Studio ay ang pagsasama-sama nito ng isang hanay ng mga tool sa isang application na idinisenyo para sa pagsubok ng mga disenyo, paglikha ng mga layout ng screen, at pag-debug ng mga link nang may kaunting downtime. Hindi lamang ito isang XAML viewer, kundi isang interactive na kapaligiran para sa mabilis na pag-ulit sa iyong UI.

Kabilang sa pinakamahalagang kakayahan nito ay ang live editing: maaari mong isulat o baguhin ang XAML code sa editor at agad na makita ang isang ganap na gumaganang preview . Ang preview window na ito ay nagbibigay-daan para sa totoong interaksyon: pagpindot sa mga button, pagpapalit ng mga estado, paggalaw ng mga slider, o pagsubok ng mga gawi tulad ng gagawin mo sa huling app.

Isa pang kapansin-pansing tampok ay ang kakayahang mag-eksperimento sa XAML navigation gamit ang breadcrumb trail. Nagbibigay-daan ito sa iyong madaling gumalaw sa mga kumplikadong istruktura, makita kung saan mismo sa tree ka nagtatrabaho, at mabilis na mahanap ang mga elementong gusto mong ayusin.

Bukod pa rito, ang XAML Studio ay may kasamang hanay ng mga shortcut at mabilisang opsyon sa preview: i-reload ang nilalaman, i-activate ang mga alignment grid, ilapat ang clipping, o baguhin ang mga tema, lahat mula sa isang quick access menu na idinisenyo upang gawing mas madali ang trial-and-error cycle.

Interaksyon sa live na pag-edit at preview

Ang pundasyon ng XAML Studio ay ang Live Edit and Interaction system nito , isang live editing feature na nag-aalis ng pangangailangang i-compile ang buong solusyon sa tuwing babaguhin mo ang kulay, espasyo, o template. Isusulat mo ang code, ise-save, o iiwan mo pa itong hindi naka-save, at magre-refresh ang interface para makita mo agad ang resulta.

Ang preview na ito ay ganap na interactive, ibig sabihin ay maaari mong subukan ang mga totoong gawi ng interface : mag-navigate sa mga kontrol, mag-trigger ng mga kaganapan, at makita kung paano kumikilos ang mga elemento kapag pinagsama ang mga estilo, trigger, at visual na estado. Malaking tulong ito para sa prototyping dahil nakakatulong ito sa iyong mas mabilis na magpasya kung ano ang maganda at kung ano ang hindi.

Bukod pa rito, ang XAML Studio ay may kasamang mga gabay sa pagkakahanay sa ibabaw ng disenyo , na ginagawang madali ang pagpoposisyon ng mga elemento nang pare-pareho at pagtuklas ng mga maling pagkakahanay na maaaring hindi mapansin. Nagbibigay-daan ito sa iyo na makamit ang isang mas malinis na layout nang hindi kinakailangang gumawa ng hindi mabilang na mga pagsasaayos ng blind margin.

Sa mga kumplikadong sistema ng disenyo, kung saan ang WinUI at Fluent ay nag-aalok ng maraming posibilidad na may mga anino, bilugan na mga gilid, at mga adaptive na layout, ang pagkakaroon ng isang mahusay na pinagsamang interactive na preview ay nakakatulong sa iyo na maiwasan ang karamihan sa mga aberya na tipikal ng fine-tuning sa produksyon.

Pag-debug ng mga binding at paggalugad sa visual tree

Isa sa mga tunay na sakit ng ulo sa WPF, UWP, o WinUI ay ang mga silent data binding error . Kapag nabigo ang isang binding, kadalasan ay isang blangkong value lang ang nakikita mo at halos wala nang iba pa, kaya mahirap intindihin kung ano ang nangyayari. Kasama sa XAML Studio ang isang Binding Debugger na idinisenyo upang magbigay-liwanag sa mga ganitong uri ng problema.

Gamit ang Binding Debugger, maaari mong biswal na suriin kung paano kumokonekta ang mga katangian ng iyong modelo sa mga kontrol sa interface. Ipinapakita ng tool ang katayuan ng bawat binding, ang mga huling halagang ginamit , at tinutulungan kang mabilis na matukoy kung aling binding ang nabigo at bakit. Para sa mga kumplikadong mockup na may malalaking halaga ng data, nakakatipid ito ng malaking oras.

Kaugnay nito, isinasama ng XAML Studio ang mga visual tree explorer at visual states , na maa-access mula sa Properties panel. Ipinapakita sa iyo ng visual tree explorer ang kumpletong hierarchy ng mga kontrol at elemento na bumubuo sa screen, na nagbibigay-daan sa iyong pumili ng anumang node at tingnan ang mga katangian, istilo, at relasyon nito.

Samantala, ginagawang madali ng visual state explorer ang pagtingin at paglipat sa pagitan ng iba't ibang estado ng isang view (halimbawa, normal, pointed, pressed, disabled), na mahalaga kapag gumagamit ng mga custom na kontrol o advanced na template. Nagbibigay-daan ito sa iyong mabilis na subukan kung paano nakakaapekto ang bawat estado sa iyong disenyo nang hindi kinakailangang manu-manong pilitin ang bawat sitwasyon sa aktwal na aplikasyon.

Pamamahala ng datos gamit ang Data Context Editor

Ang pagsubok sa isang interface nang walang totoong data ay parang pagdidisenyo nang walang pahintulot. Kaya naman kasama sa XAML Studio ang isang Data Context Editor , isang tool na nagbibigay-daan sa iyong madaling tukuyin ang konteksto ng data ng iyong view upang mapunan ito ng impormasyon sa pagsubok.

Mula sa editor na ito, maaari mong ikonekta ang iyong UI sa parehong static at dynamic na mga pinagmumulan ng data: halimbawa, i-load ang JSON mula sa isang lokal na file o isang REST API at gamitin ito bilang DataContext para sa iyong mga kontrol. Nagbibigay-daan ito sa iyong makita kung paano kumikilos ang layout gamit ang mahahabang teksto, malalaking koleksyon, o mga boundary value, na mahalaga para sa matatag na disenyo.

Ang kakayahang ito na paghaluin ang XAML sa test data, nang hindi kinakailangang i-set up ang iyong buong imprastraktura ng aplikasyon, ay nagbibigay-daan sa iyong mas mabilis na ulitin ang visual na anyo at pamamahagi ng impormasyon, at nakakatipid sa iyo mula sa pag-set up ng mga ad hoc sample project para lang makita kung ano ang hitsura ng isang form gamit ang totoong data.

Maaari ring ibalik ng XAML Studio ang mga dokumento at ang konteksto ng kanilang data kapag binuksan mo muli ang application, salamat sa auto-save system nito, na nakakatipid sa iyo mula sa kinakailangang muling i-configure ang pinagmulan ng data sa bawat oras na gusto mong ipagpatuloy ang pagsubok sa isang partikular na disenyo.

Mga tool sa produktibidad: IntelliSense, auto-save, at higit pa

Bukod sa mga purong biswal na tampok nito, isinasama ng XAML Studio ang ilang mga tool sa produktibidad na nagpapadali sa iyong pang-araw-araw na trabaho kapag masinsinang nagsusulat ng XAML . Isa sa mga pinakakapaki-pakinabang ay ang suporta ng IntelliSense, na nagmumungkahi ng mga katangian, uri, pangalan ng kontrol, at mga namespace habang nagta-type ka.

Hindi lamang pinapabilis ng IntelliSense na ito ang pagsulat ng code, kundi nakakatulong din itong maiwasan ang mga typo sa mga binding, path, at attribute , lalo na sa mahahabang istruktura ng mga estilo, template, o mga pinagsasaluhang mapagkukunan. Kung pamilyar ka na sa IntelliSense sa Visual Studio, tiyak na magiging komportable ka.

Isa pang praktikal na tampok ay ang awtomatikong pag-save at pagpapanumbalik ng mga dokumento . Awtomatikong maise-save ng XAML Studio ang iyong trabaho at, kapag binuksan mo muli ang application, makukuha mo ang mga tab at dokumentong ginagamit mo, para makapagpatuloy ka nang eksakto kung saan ka tumigil nang hindi kinakailangang buksan ang mga file nang paisa-isa.

Kasama sa interface ang isang Documentation Toolbox na nagsisilbing shortcut sa mga halimbawa, tulong, at mga sanggunian para sa mga kontrol at katangian. Nagbibigay-daan ito sa iyong sumangguni sa dokumentasyon nang hindi umaalis sa tool , na lalong maginhawa kapag sinusubukan ang mga hindi gaanong pamilyar na API o mga katangiang partikular sa WinUI.

Mga pantulong sa disenyo: Matatas na UI, mga gabay, at mga namespace

Ang mga kamakailang bersyon ng proyekto ay nagtampok ng isang binagong interface batay sa Fluent UI , ang modernong sistema ng disenyo ng Microsoft. Ang update na ito ay kapansin-pansin kapwa sa biswal na anyo ng tool at sa paraan ng pagsasama nito ng mga kasalukuyang kontrol, tema, at layout.

Para matulungan ka sa layout, may kasamang mga gabay sa pag-align at grid ang XAML Studio sa preview surface. Pinapadali ng mga gabay na ito ang pag-align ng mga margin, padding, at mga layout, at lalong kapaki-pakinabang kapag sinusubukan mong gayahin ang mga disenyong perpekto ang pixel o kapag gusto mong tiyakin na ang mga elemento ay maayos na nakahanay nang hindi kinakailangang manu-manong sukatin ang lahat.

Isa pang aspeto kung saan nakakatulong ang tool na ito ay ang pamamahala ng mga XAML namespace. Gamit ang mga Namespace Helper nito, mas mahusay mong maidaragdag at maiwawasto ang mga xmln, na maiiwasan ang karaniwang problema ng mga hindi kumpleto o dobleng deklarasyon na sumisira sa markup o lumilikha ng mga nakakainis na babala.

Isinama rin ang maliliit na pagpapabuti para sa pang-araw-araw na paggamit, tulad ng kakayahang kopyahin ang mga bukas na tab mula sa context menu , na mainam kapag gusto mong mag-eksperimento sa dalawang baryasyon ng parehong layout nang hindi nawawala ang iyong orihinal na bersyon o kinakailangang gumawa ng bagong file mula sa simula.

Suporta sa folder at pamamahala ng mapagkukunan

Isa sa mga pangunahing pag-unlad sa XAML Studio ay ang suporta para sa mga panlabas na folder at mga mapagkukunan . Nangangahulugan ito na maaari kang gumamit ng isang hanay ng mga magkakaugnay na file, hindi lamang isang nakahiwalay na XAML file.

Dahil sa feature na ito, kayang pangasiwaan ng application ang paglo-load ng mga imahe mula sa mga folder, mga design data file , at iba pang karagdagang resource na karaniwang kasama ng mga aktwal na interface. Halimbawa, maaaring mayroon kang isang set ng mga test image para sa isang carousel, mga icon para sa mga button, o mga JSON file na nagsisilbing data source.

Ang suportang ito sa folder ay naglalapit sa XAML Studio sa isang totoong daloy ng trabaho, sa halip na maging isang simpleng sandbox lamang. Pinapayagan ka nitong mag-set up ng maliliit na senaryo ng pagsubok na ginagaya ang istruktura ng mapagkukunan ng isang buong aplikasyon , ngunit may magaan na katangian ng isang kapaligirang idinisenyo lamang para sa prototyping.

Ang lahat ng ito, kasama ang iba pang mga tool sa preview, binding, at navigation, ay ginagawang isang kaakit-akit na opsyon ang XAML Studio para sa mga gustong pinuhin ang kanilang mga screen bago isama ang mga ito sa isang mabibigat na solusyon.

I-download mula sa Microsoft Store at manu-manong pag-install

Para sa karamihan ng mga gumagamit, ang pinakamadaling paraan upang makapagsimula ay ang direktang pag-download ng XAML Studio mula sa Microsoft Store . Makukuha ito roon bilang isang libreng app, kaya ang kailangan mo lang gawin ay hanapin ito, i-install, at simulan ang pag-eksperimento sa XAML sa loob ng ilang minuto.

Ang bersyon ng tindahan, ayon sa makukuhang impormasyon, ay nasa branch 1.1 pa rin, habang ang pinakaaktibong pag-develop ay nagaganap sa dev branch ng repositoryo ng proyekto. Mahalaga ito kung gusto mong ma-access ang mga pinakabagong feature o makapag-ambag sa pag-develop, dahil maaaring may mga pagkakaiba sa pagitan ng nakikita mo sa tindahan at ng nasa source code.

Kung mas gusto mong i-install ito nang manu-mano mula sa repository, o i-compile ito nang mag-isa, mayroong ilang minimum na kinakailangan na may kaugnayan sa Visual Studio na dapat mong tandaan upang matiyak na gumagana nang maayos ang lahat.

I-compile ang XAML Studio mula sa source code

Kung gusto mong gumawa ng mas malalim na hakbang at i-compile ang XAML Studio mula sa source code nito , kakailanganin mong ihanda ang iyong kapaligiran sa Visual Studio na may mga partikular na bahagi na nakatuon sa pagbuo ng mga modernong aplikasyon sa Windows.

Una, kailangan mong i-install ang workload ng pagbuo ng aplikasyon ng Windows sa Visual Studio. Kasama sa workload na ito ang lahat ng bagay na may kaugnayan sa mga aplikasyon ng UWP, WinUI, at iba pang modernong teknolohiya ng XAML sa platform ng Windows.

Bukod pa rito, kakailanganin mong i-install ang mga tool ng Universal Windows Platform , pati na rin ang partikular na Windows SDK 17763. Kung wala ang SDK na ito, maaaring hindi ma-compile nang tama ang ilang bahagi ng proyekto, kaya ipinapayong suriin ito sa Visual Studio installer bago buksan ang solusyon.

Kapag naayos mo na ang lahat ng component, kapag binuksan mo ang repository, siguraduhing ang proyektong tinatawag na XAMLStudio ay minarkahan bilang startup project sa loob ng solusyon. Pagkatapos, pindutin lamang ang F5 upang tumakbo sa debug mode at ilunsad ang application mula sa iyong sariling development environment.

Proyektong open source, mga lisensya at kodigo ng pag-uugali

Dahil inilathala ito bilang isang proyektong .NET Foundation , ang XAML Studio ay ipinamamahagi sa ilalim ng MIT License, isa sa mga pinaka-mapagpahintulot na open-source na lisensya. Nangangahulugan ito na maaari mong suriin, baguhin, muling gamitin, at mag-ambag sa code nang malaya, hangga't nirerespeto mo ang karaniwang mga tuntunin sa pagpapatungkol.

Kasama sa repository ang isang NOTICE.json file na may mga third-party attribution , na tumutugma sa impormasyong ipinapakita sa loob mismo ng application patungkol sa mga external library na ginamit. Kung nag-aalala ka tungkol sa pagsunod sa lisensya sa mga enterprise environment, ang file na ito ay isang kapaki-pakinabang na sanggunian para makita kung aling mga component ang isinama.

Pinagtibay ng proyekto ang Microsoft Open Source Code of Conduct , kaya ang pakikilahok sa mga isyu, pull request, o talakayan ay nangangailangan ng pagsunod sa malinaw na mga tuntunin ng pag-uugali: respeto, propesyonalismo, at walang pagpaparaya sa panliligalig. Mayroon ding pahina ng FAQ tungkol sa code of conduct at isang contact address ( [email protected] ) para sa mga tanong o isyu.

Para sa mga gustong aktibong makipagtulungan, inilalarawan ng CONTRIBUTING.md file kung paano magmungkahi ng mga pagbabago, magsumite ng mga kontribusyon, at mag-ulat ng mga isyu . Dinedetalye nito ang inirerekomendang paraan ng pakikipagtulungan sa mga sangay, ang daloy ng trabaho sa pagsusuri ng code, at iba pang praktikal na aspeto ng pakikipagtulungan sa proyekto.

Telemetry, privacy, at pangongolekta ng datos

Tulad ng maraming iba pang modernong aplikasyon, isinama ng XAML Studio ang mga mekanismo ng telemetry upang mangolekta ng impormasyon sa paggamit , na may layuning maunawaan kung aling mga tampok ang pinakamadalas gamitin, kung paano gumagana ang app sa iba't ibang laki ng dokumento, at kung anong mga uri ng error ang pinakamadalas mangyari.

Ang magandang balita ay ang application mismo ay nag-aalok ng malinaw na kontrol sa telemetry na ito: mula sa pahina ng mga setting, sa seksyon ng Feedback , maaari mong baguhin ang opsyong Diagnostic Data sa "Hindi" upang i-disable ang pangongolekta ng data mula mismo sa distributed application.

Mahalagang tandaan na, ayon sa impormasyon ng proyekto, ang App Center —ang platapormang ginagamit bilang batayan para sa telemetry — ay hindi na ginagamit at, sa ngayon, ang aktibong telemetry ay hindi ginagamit sa bersyon v2 habang pinagpapasyahan pa ang alternatibong solusyon para sa mga diagnostic.

Sa anumang kaso, sinasabi ng Microsoft na maaaring mangolekta ang software ng impormasyon tungkol sa paggamit ng application, na maaaring gamitin upang mapabuti ang mga serbisyo at produkto . Kung ikaw, bilang isang developer, ay gagamit ng mga feature na maaaring mangolekta ng data ng end-user (halimbawa, mga integrasyon ng serbisyo sa iyong sariling mga app), dapat kang sumunod sa naaangkop na batas at magbigay ng mga naaangkop na abiso at patakaran sa privacy, na nagli-link sa pahayag ng privacy ng Microsoft kung naaangkop.

Tatak, mga logo at paggamit ng mga trademark

Ang repositoryo at ang application mismo ay maaaring maglaman ng mga trademark at logo ng Microsoft o iba pang mga ikatlong partido. Nilinaw ng proyekto na ang paggamit ng mga trademark na ito ay napapailalim sa mga opisyal na alituntunin sa pagba-brand ng Microsoft.

Kung magpasya kang lumikha ng mga binagong bersyon ng proyekto o mga alternatibong distribusyon, dapat mong gawin ito sa paraang hindi magdudulot ng kalituhan o magmumungkahi ng opisyal na pag-sponsor ng Microsoft kapag walang umiiral na ganitong ugnayan. Ang panuntunang ito ay lalong mahalaga kung muling ipamamahagi mo ang mga binary o isasama ang mga bahagi ng proyekto sa mga komersyal na produkto.

Gayundin, ang anumang mga logo o trademark ng ikatlong partido na ginamit sa code ay napapailalim sa mga patakaran ng mga ikatlong partidong iyon, kaya ipinapayong suriin ang mga aspetong ito kung balak mong gamitin muli ang malalaking bahagi ng application sa iyong sariling mga pampublikong proyekto.

Konteksto: Pagkadismaya sa mga taga-disenyo ng Visual Studio at ang halaga ng XAML Studio

Ang paglabas ng XAML Studio bilang isang open-source na proyekto ay dumating sa panahong maraming developer ang nagpapahayag ng kawalang-kasiyahan sa mga visual designer ng Visual Studio . Ang mga isyu sa pagganap, mga pag-crash, hindi pantay na pag-uugali, at mga kahirapan sa pag-debug ng kumplikadong XAML ay mga paulit-ulit na reklamo.

Sa ganitong sitwasyon, ang XAML Studio ay itinuturing na isang uri ng escape valve: isang magaan na tool, na partikular na nakatuon sa disenyo at pagsubok ng XAML, na nagbabawas sa ilan sa mga alitan ng tradisyonal na edit-compile-run cycle. Hindi nito nilalayon na palitan ang Visual Studio, kundi upang umakma sa kadalubhasaan nito sa larangan kung saan ito pinakamahirap: ang mabilis na pag-ulit sa interface.

Ang pamamaraang ito ay naaayon din sa mga alalahanin ng mga teknolohiya sa pag-aaral tulad ng WinUI, WPF, o UWP. Para sa marami, ang pagsasama-sama ng mga .sln file, mga kumplikadong configuration, at packaging sa mga executable ay maaaring maging isang tunay na sakit ng ulo, lalo na sa simula. Ang pagkakaroon ng isang standalone na tool na nakatuon lamang sa XAML layer ay ginagawang mas maayos ang proseso ng pag-aaral at pag-eeksperimento.

Sa madaling salita, natagpuan ng XAML Studio ang angkop na lugar nito bilang isang lubos na pinahahalagahang aplikasyon para sa mga naglalaan ng malaking bahagi ng kanilang oras sa pagbuo at pagpino ng mga user interface sa ecosystem ng Windows, na nag-aalok ng mas maliksi at hindi gaanong masalimuot na kapaligiran para sa pagmamanipula ng XAML araw-araw.

Para sa sinumang nagsisimula pa lamang sa C#, WPF, UWP, o WinUI, o para sa mga ubanin na sa XAML ngunit nahihirapan pa rin sa mabagal na pagsubok at nakalilitong pag-debug, ang pagkakaroon ng tool tulad ng XAML Studio ay kumakatawan sa isang makabuluhang pagbabago sa kung paano mo nilalapitan ang prototyping , i-debug ang mga kumplikadong binding, at i-validate ang mga disenyo bago isama ang mga ito sa malalaking proyekto—lahat ay may kakayahang umangkop ng isang open-source na proyekto at ang kapanatagan ng isip na makontrol kung anong data ang ibinabahagi at kung paano ito ginagamit.