XAML Studio: Täydellinen opas XAML-rajapintojen prototyyppien luomiseen Windowsissa

Informatec Digital » Resurssit » XAML Studio: Täydellinen opas XAML-rajapintojen prototyyppien luomiseen Windowsissa

Jos työskentelet XAML:n kanssa luodaksesi käyttöliittymiä Windowsissa , olet luultavasti kohdannut vaikeuksia Visual Studio -suunnittelijan kanssa, loputtomia käännösaikoja tai mahdottomia paikantaa datasidontavirheitä. Tässä kohtaa XAML Studio astuu kuvaan, sovellus, joka on suunniteltu juuri XAML:n nopeaa ja kitkatonta testaamista, virheenkorjausta ja kokeilua varten.

Tässä artikkelissa tarkastelemme yksityiskohtaisesti, mitä XAML Studio on, miten se auttaa sinua luomaan WinUI- ja UWP-käyttöliittymien prototyyppejä muutamassa minuutissa, mitä työkaluja se tarjoaa linkkien virheenkorjaukseen, testidatan hallintaan, visuaalisen puun navigointiin ja paljon muuta. Näet myös, miten voit ladata sen Microsoft Storesta, mitkä ovat vaatimukset, jos haluat kääntää sen lähdekoodista, ja miten kaikki tämä sopii nykyiseen kontekstiin kehittäjille, jotka ovat hieman kyllästyneitä Visual Studio -suunnittelijoihin.

Mikä on XAML Studio ja kenelle se on tarkoitettu?

XAML Studio on Windows-sovellus, joka keskittyy XAML-kehitykseen . Se luotiin alun perin Microsoft Garage -projektina ja on nyt julkaistu avoimen lähdekoodin projektina .NET Foundationin sisällä. Sen päätarkoitus on mahdollistaa XAML:n kirjoittaminen, sen toiminnan näkeminen välittömästi ja käyttöliittymän käyttö ikään kuin se olisi osa omaa sovellustasi.

Se on erityisesti suunnattu WinUI XAML- ja UWP-sovellusten parissa työskenteleville kehittäjille , vaikka se on myös erittäin hyödyllinen, jos olet kokenut WPF:n ja haluat kokeilla moderneja Fluent-suunnittelukonsepteja, tyylejä, malleja ja visuaalisia tiloja ilman, että sinun tarvitsee rakentaa täydellistä ratkaisua joka kerta.

Toisin kuin Visual Studio, joka on suunnattu enemmän koko kehityssykliin, XAML Studio toimii visuaalisen kerroksen idealaboratoriona : kopioit XAML-fragmentin, liität sen, muokkaat sitä, näet tuloksen välittömästi, leikit datalla, tarkistat sidokset ja kun olet tyytyväinen, viet koodin varsinaiseen projektiisi.

Lisäksi avoimen lähdekoodin projektina sen kehitys on avointa yhteisölle: kuka tahansa kehittäjä voi tarkastella koodia, ehdottaa muutoksia , lähettää parannuksia ja osallistua uusien ominaisuuksien keskusteluun julkisen arkiston kautta.

XAML Studion tärkeimmät ominaisuudet prototyyppirajapintojen suunnittelussa

Yksi XAML Studion vahvuuksista on, että se yhdistää useita työkaluja yhteen sovellukseen, joka on suunniteltu suunnittelujen testaamiseen, näyttöasettelujen luomiseen ja linkkien virheenkorjaukseen minimaalisella käyttökatkoksella. Se ei ole vain XAML-katseluohjelma, vaan vuorovaikutteinen ympäristö käyttöliittymän nopeaan iterointiin.

Yksi sen tärkeimmistä ominaisuuksista on reaaliaikainen muokkaus: voit kirjoittaa tai muokata XAML-koodia editorissa ja nähdä heti täysin toimivan esikatselun . Tämä esikatseluikkuna mahdollistaa todellisen vuorovaikutuksen: painikkeiden painamisen, tilojen muuttamisen, liukusäätimien siirtämisen tai toiminnan testaamisen aivan kuten lopullisessa sovelluksessa.

Toinen huomionarvoinen ominaisuus on mahdollisuus kokeilla XAML-navigointia navigointipolun avulla. Näin voit helposti liikkua monimutkaisissa rakenteissa, nähdä tarkalleen, missä puussa työskentelet, ja löytää nopeasti muokattavat elementit.

Lisäksi XAML Studio sisältää joukon pikanäppäimiä ja nopeita esikatseluvaihtoehtoja: sisällön uudelleenlataus, tasausruudukoiden aktivointi, rajauksen lisääminen tai teemojen vaihtaminen – kaikki tämä pikavalikosta, joka on suunniteltu yksinkertaistamaan kokeilu- ja erehdysprosessia.

Live-muokkaus ja esikatselu

XAML Studion perustana on sen reaaliaikainen muokkaus- ja vuorovaikutusjärjestelmä , reaaliaikainen muokkaustoiminto, joka poistaa tarpeen kääntää koko ratkaisua joka kerta, kun muutat väriä, välistystä tai mallia. Kirjoitat koodia, tallennat sen tai jopa jätät sen tallentamatta, ja käyttöliittymä päivittyy, jotta näet tuloksen välittömästi.

Tämä esikatselu on täysin interaktiivinen, mikä tarkoittaa, että voit testata käyttöliittymän toimintaa tosielämässä : navigoida ohjaimissa, laukaista tapahtumia ja nähdä, miten elementit käyttäytyvät, kun tyylejä, laukaisimia ja visuaalisia tiloja yhdistetään. Se on prototyyppien tekoon pelastus, koska se auttaa sinua päättämään paljon nopeammin, mikä näyttää hyvältä ja mikä ei.

Lisäksi XAML Studio sisältää suunnittelupinnalla tasausohjaimia , joiden avulla elementtien johdonmukainen sijoittelu ja muuten huomaamatta jääneiden virheellisten kohdistusten havaitseminen on helppoa. Näin saat siistimmän asettelun ilman lukemattomia sokeamarginaalien säätöjä.

Monimutkaisissa suunnittelujärjestelmissä, joissa WinUI ja Fluent tarjoavat paljon mahdollisuuksia varjojen, pyöristettyjen reunojen ja mukautuvien asettelujen avulla, hyvin integroitu interaktiivinen esikatselu auttaa välttämään suuren osan hienosäätöön liittyvästä turhautumisesta tuotannossa.

Sidonnan virheenkorjaus ja visuaalisen puun tutkiminen

Yksi WPF:n, UWP:n ja WinUI:n todellisista ongelmista ovat hiljaiset datasidontavirheet . Kun sidonta epäonnistuu, näet usein vain tyhjän arvon eikä juuri muuta, mikä vaikeuttaa tapahtumien ymmärtämistä. XAML Studio sisältää sidontavirheenkorjaajan, joka on suunniteltu valaisemaan tällaisia ​​ongelmia.

Sidontavirheenkorjaajan avulla voit tarkastella visuaalisesti, miten mallisi ominaisuudet liittyvät käyttöliittymän ohjaimiin. Työkalu näyttää kunkin sidonnan tilan, viimeksi käytetyt arvot ja auttaa sinua nopeasti paikantamaan, mikä sidonta epäonnistuu ja miksi. Tämä säästää merkittävästi aikaa monimutkaisissa mallipohjissa, joissa on paljon dataa.

Tähän liittyen XAML Studio integroi visuaalisen puun selaustyökalut ja visuaaliset tilat , joihin pääsee käsiksi Ominaisuudet-paneelista. Visuaalisen puun selaustyökalu näyttää näytön muodostavien ohjausobjektien ja elementtien täydellisen hierarkian, jolloin voit valita minkä tahansa solmun ja tarkastella sen ominaisuuksia, tyylejä ja suhteita.

Visuaalinen tilaselain puolestaan ​​helpottaa näkymän eri tilojen (esimerkiksi normaali, osoittimella merkitty, painettu, poistettu käytöstä) tarkastelua ja niiden välillä vaihtamista, mikä on ratkaisevan tärkeää työskenneltäessä mukautettujen ohjausobjektien tai edistyneiden mallien kanssa. Näin voit nopeasti testata, miten kukin tila vaikuttaa suunnitteluusi ilman, että sinun tarvitsee pakottaa jokaista tilannetta manuaalisesti varsinaisessa sovelluksessa.

Tiedonhallinta Data Context Editorilla

Rajapinnan testaaminen ilman oikeaa dataa on kuin sokkona suunnittelua. Siksi XAML Studio sisältää datakontekstin editorin , työkalun, jonka avulla voit helposti määrittää näkymäsi datakontekstin ja täyttää sen testitiedoilla.

Tästä editorista voit yhdistää käyttöliittymäsi sekä staattisiin että dynaamisiin tietolähteisiin: esimerkiksi ladata JSON-tiedoston paikallisesta tiedostosta tai REST API:sta ja käyttää sitä ohjausobjektiesi DataContext-kontekstina. Näin voit nähdä, miten asettelu toimii pitkän tekstin, suurten kokoelmien tai raja-arvojen kanssa, mikä on ratkaisevan tärkeää vankan suunnittelun kannalta.

Tämä kyky yhdistää XAML testidataan ilman, että koko sovellusinfrastruktuuria tarvitsee määrittää erikseen, nopeuttaa tiedon visuaalisen ulkoasun ja jakelun iterointia ja säästää sinut yksittäisten esimerkkiprojektien perustamiselta vain nähdäksesi, miltä lomake näyttää todellisen datan kanssa.

XAML Studio voi myös palauttaa dokumentit ja niiden tietokontekstin, kun avaat sovelluksen uudelleen. Tämä johtuu sen automaattisesta tallennusjärjestelmästä, jonka ansiosta sinun ei tarvitse määrittää tietolähdettä uudelleen joka kerta, kun haluat jatkaa tietyn suunnittelun testaamista.

Tuottavuustyökalut: IntelliSense, automaattinen tallennus ja paljon muuta

Puhtaasti visuaalisten ominaisuuksiensa lisäksi XAML Studio integroi useita tuottavuustyökaluja, jotka helpottavat päivittäistä työtäsi intensiivisesti XAML:ää kirjoitettaessa . Yksi hyödyllisimmistä on IntelliSense-tuki, joka ehdottaa ominaisuuksia, tyyppejä, ohjausobjektien nimiä ja nimiavaruuksia kirjoittaessasi.

Tämä IntelliSense ei ainoastaan ​​nopeuta koodin kirjoittamista, vaan auttaa myös estämään kirjoitusvirheitä sidoksissa, poluissa ja attribuuteissa , erityisesti pitkissä tyylien, mallien tai jaettujen resurssien rakenteissa. Jos olet jo perehtynyt IntelliSenseen Visual Studiossa, tunnet olosi kotoisaksi.

Toinen erittäin käytännöllinen ominaisuus on asiakirjojen automaattinen tallennus ja palautus . XAML Studio voi tallentaa työsi automaattisesti ja kun avaat sovelluksen uudelleen, palauttaa käyttämäsi välilehdet ja asiakirjat, jotta voit jatkaa täsmälleen siitä, mihin jäit, ilman että sinun tarvitsee avata tiedostoja yksi kerrallaan.

Käyttöliittymä sisältää dokumentaatiotyökalupakin, joka toimii oikopolkuna esimerkkeihin, ohjeisiin ja viitteisiin ohjausobjekteista ja ominaisuuksista. Näin voit tarkastella dokumentaatiota poistumatta työkalusta , mikä on erityisen kätevää testattaessa vähemmän tuttuja API-rajapintoja tai WinUI-kohtaisia ​​ominaisuuksia.

Suunnittelun apuvälineet: Sujuva käyttöliittymä, oppaat ja nimiavaruudet

Projektin viimeaikaisissa versioissa on uudistettu käyttöliittymä, joka perustuu Microsoftin moderniin suunnittelujärjestelmään Fluent UI:hin. Tämä päivitys näkyy sekä työkalun visuaalisessa ulkonäössä että tavassa, jolla se integroi nykyiset ohjausobjektit, teemat ja asettelut.

XAML Studio sisältää esikatselualueella tasausohjaimia ja ruudukoita, jotka helpottavat asettelun kanssa . Näiden apuviivojen avulla on helppo tasata reunukset, täyte ja asettelut, ja ne ovat erityisen hyödyllisiä, kun yrität kopioida pikselintarkasti suunniteltuja malleja tai kun haluat varmistaa, että elementit ovat oikein kohdistettuja ilman, että kaikkea tarvitsee mitata manuaalisesti.

Toinen alue, jolla työkalusta on apua, on XAML-nimiavaruuksien hallinta. Sen nimiavaruusapujen avulla voit lisätä ja korjata XMLN-tiedostoja tehokkaammin, välttäen yleisen ongelman, joka johtuu epätäydellisistä tai kaksoiskappaleista, jotka rikkovat merkintöjä tai aiheuttavat ärsyttäviä varoituksia.

Päivittäiseen käyttöön on tehty myös pieniä parannuksia, kuten mahdollisuus kopioida avoimia välilehtiä pikavalikosta , mikä on kätevää, kun haluat kokeilla saman asettelun kahta variaatiota menettämättä alkuperäistä versiota tai luomatta uutta tiedostoa tyhjästä.

Kansioiden tuki ja resurssienhallinta

Yksi XAML Studion merkittävimmistä kehitysaskeleista on ollut ulkoisten kansioiden ja resurssien tuki . Tämä tarkoittaa, että voit työskennellä useiden toisiinsa liittyvien tiedostojen kanssa, etkä vain yhden erillisen XAML-tiedoston kanssa.

Tämän ominaisuuden ansiosta sovellus pystyy lataamaan kuvia kansioista, suunnitteludatatiedostoista ja muista täydentävistä resursseista, jotka tyypillisesti liittyvät varsinaisiin käyttöliittymiin. Sinulla voi esimerkiksi olla joukko testikuvia karusellia varten, kuvakkeita painikkeille tai JSON-tiedostoja, jotka toimivat tietolähteenä.

Tämä kansiotuki tuo XAML Studion paljon lähemmäksi todellista työnkulkua pelkän hiekkalaatikon sijaan. Sen avulla voit määrittää pieniä testiskenaarioita, jotka jäljittelevät täyden sovelluksen resurssirakennetta , mutta kevyellä, pelkästään prototyyppien tekoon suunnitellulla ympäristöllä.

Kaikki tämä yhdistettynä muihin esikatselu-, sidonta- ja navigointityökaluihin tekee XAML Studiosta erittäin houkuttelevan vaihtoehdon niille, jotka haluavat hioa näyttöjään ennen niiden integrointia raskaaseen ratkaisuun.

Lataa Microsoft Storesta ja asenna manuaalisesti

Useimmille käyttäjille helpoin tapa aloittaa on ladata XAML Studio suoraan Microsoft Storesta . Se on saatavilla sieltä ilmaisena sovelluksena, joten sinun tarvitsee vain etsiä se, asentaa se ja aloittaa XAML:n kokeilu muutamassa minuutissa.

Saatavilla olevien tietojen mukaan kauppaversio on edelleen haarassa 1.1, kun taas aktiivisin kehitys tapahtuu projektirepositorion dev-haarassa . Tämä on tärkeää, jos haluat käyttää uusimpia ominaisuuksia tai osallistua kehitykseen, koska kauppaversiossa näkemäsi ja lähdekoodissa olevan välillä voi olla eroja.

Jos haluat mieluummin asentaa sen manuaalisesti repositoriosta tai kääntää sen itse, Visual Studioon liittyy useita vähimmäisvaatimuksia, jotka sinun tulee pitää mielessä varmistaaksesi, että kaikki toimii oikein.

Käännä XAML Studio lähdekoodista

Jos haluat mennä askeleen pidemmälle ja kääntää XAML Studion sen lähdekoodista , sinun on valmisteltava ympäristösi Visual Studiossa erityisillä komponenteilla, jotka on suunnattu nykyaikaisten Windows-sovellusten kehittämiseen.

Ensin sinun on asennettava Windows-sovelluskehitystyökuorma Visual Studioon. Tämä työkuorma sisältää kaiken, mikä liittyy UWP-sovelluksiin, WinUI:hin ja muihin nykyaikaisiin XAML-teknologioihin Windows-alustalla.

Lisäksi sinulla on oltava asennettuna Universal Windows Platform -työkalut sekä erityinen Windows SDK 17763. Ilman tätä SDK:ta jotkin projektin osat eivät välttämättä käänny oikein, joten on suositeltavaa tarkistaa tämä Visual Studion asennusohjelmassa ennen ratkaisun avaamista.

Kun kaikki komponentit ovat valmiina, varmista avatessasi repositorion, että XAMLStudio-niminen projekti on merkitty ratkaisun käynnistysprojektiksi . Paina sitten F5-näppäintä suorittaaksesi sovelluksen virheenkorjaustilassa ja käynnistääksesi sen omasta kehitysympäristöstäsi.

Avoimen lähdekoodin projekti, lisenssit ja käytännesäännöt

Koska XAML Studio on julkaistu .NET Foundation -projektina , sitä jaellaan MIT-lisenssillä, joka on yksi sallivimmista avoimen lähdekoodin lisensseistä. Tämä tarkoittaa, että voit tarkastella, muokata, käyttää uudelleen ja osallistua koodiin melko vapaasti, kunhan noudatat tavanomaisia ​​attribuutioehtoja.

Tietovarasto sisältää NOTICE.json-tiedoston, jossa on kolmannen osapuolen attribuutiot , jotka vastaavat sovelluksessa itsessään näkyviä tietoja käytetyistä ulkoisista kirjastoista. Jos olet huolissasi lisenssiehtojen noudattamisesta yritysympäristöissä, tämä tiedosto on hyödyllinen viite, josta näet, mitkä komponentit on sisällytetty.

Projekti on omaksunut Microsoftin avoimen lähdekoodin käytännesäännöt , joten osallistuminen ongelmiin, pull-requesteihin tai keskusteluihin edellyttää selkeiden käytännesääntöjen noudattamista: kunnioitusta, ammattimaisuutta ja nollatoleranssia häirintää kohtaan. Sivustolta löytyy myös usein kysytyt kysymykset -sivu käytännesäännöistä ja yhteystiedot ( [email protected] ) kysymyksiä tai ongelmia varten.

Niille, jotka haluavat tehdä aktiivista yhteistyötä, CONTRIBUTING.md-tiedosto kuvaa muutosten ehdottamisen, kontribuutioiden lähettämisen ja ongelmien raportoinnin . Se kuvaa suositellun tavan työskennellä haarojen kanssa, koodin tarkistuksen työnkulun ja muita projektin yhteistyön käytännön näkökohtia.

Telemetria, yksityisyys ja tiedonkeruu

Kuten monet muutkin modernit sovellukset, XAML Studio sisälsi telemetria-mekanismeja käyttötietojen keräämiseksi tavoitteena ymmärtää, mitä ominaisuuksia käytetään eniten, miten sovellus toimii erikokoisten asiakirjojen kanssa ja minkä tyyppisiä virheitä esiintyy useimmin.

Hyvä uutinen on, että sovellus itse tarjoaa selkeän hallinnan tälle telemetrialle: asetussivun Palaute-osiossa voit muuttaa Diagnostiikkatiedot-vaihtoehdon arvoksi "Ei", jos haluat poistaa tiedonkeruun käytöstä hajautetusta sovelluksesta itsestään.

On syytä huomata, että projektitietojen mukaan App Center – telemetrian perustana käytetty alusta – on vanhentunut, eikä aktiivista telemetriaa tällä hetkellä käytetä versiossa v2, kun vaihtoehtoista diagnostiikkaratkaisua etsitään.

Microsoft joka tapauksessa toteaa, että ohjelmisto voi kerätä tietoja sovelluksen käytöstä, joita voidaan käyttää palveluiden ja tuotteiden parantamiseen . Jos kehittäjänä käytät ominaisuuksia, jotka voivat kerätä loppukäyttäjän tietoja (esimerkiksi palveluintegraatiot omissa sovelluksissasi), sinun on noudatettava sovellettavaa lakia ja annettava asianmukaiset tietosuojailmoitukset ja -käytännöt, linkittämällä tarvittaessa Microsoftin tietosuojalausuntoon.

Tuotemerkki, logot ja tavaramerkkien käyttö

Säilytyspaikka ja itse sovellus voivat sisältää Microsoftin tai muiden kolmansien osapuolten tavaramerkkejä ja logoja. Projektissa tehdään selväksi, että näiden tavaramerkkien käyttöön sovelletaan Microsoftin virallisia brändäysohjeita.

Jos päätät luoda projektista muokattuja versioita tai vaihtoehtoisia jakeluita, sinun on tehtävä se tavalla, joka ei aiheuta sekaannusta tai anna ymmärtää Microsoftin virallista sponsorointia, jos tällaista suhdetta ei ole. Tämä sääntö on erityisen tärkeä, jos jaat binääritiedostoja uudelleen tai integroit projektin osia kaupallisiin tuotteisiin.

Vastaavasti kaikkiin koodissa käytettyihin kolmansien osapuolten logoihin tai tavaramerkkeihin sovelletaan kyseisten kolmansien osapuolten käytäntöjä, joten on suositeltavaa tarkistaa nämä näkökohdat, jos aiot käyttää uudelleen suuria osia sovelluksesta omissa julkisissa projekteissasi.

Konteksti: Turhautuminen Visual Studio -suunnittelijoihin ja XAML Studion arvo

XAML Studion julkaisu avoimen lähdekoodin projektina tapahtui aikana, jolloin monet kehittäjät ilmaisivat tyytymättömyytensä Visual Studion visuaalisiin suunnittelijoihin . Suorituskykyongelmat, kaatumiset, epäjohdonmukainen toiminta ja vaikeudet monimutkaisen XAML:n virheenkorjauksessa olivat toistuvia valituksia.

Tässä skenaariossa XAML Studio mielletään eräänlaiseksi pakoventtiiliksi: kevyeksi työkaluksi, joka on keskittynyt erityisesti XAML-suunnitteluun ja -testaukseen ja joka vähentää perinteisen muokkaus-kääntäminen-suoritus -syklin kitkaa . Sen tarkoituksena ei ole korvata Visual Studiota, vaan pikemminkin täydentää sen asiantuntemusta alueella, jossa se kärsii eniten: käyttöliittymän nopeassa iteraatiossa.

Tämä lähestymistapa on myös linjassa oppimisteknologioiden, kuten WinUI:n, WPF:n tai UWP:n, kanssa. Monille .sln-tiedostojen, monimutkaisten konfiguraatioiden ja suoritettavien tiedostojen pakkaaminen voi olla todellinen päänsärky, varsinkin alussa. Erillisen työkalun käyttö, joka keskittyy yksinomaan XAML-kerrokseen, tekee oppimis- ja kokeiluprosessista paljon sujuvamman.

Lyhyesti sanottuna XAML Studio on löytänyt oman markkinarakonsa erittäin arvostettuna sovelluksena niille, jotka omistavat merkittävän osan ajastaan ​​käyttöliittymien rakentamiseen ja parantamiseen Windows-ekosysteemissä. Se tarjoaa ketterämmän ja vähemmän hankalan ympäristön XAML:n päivittäiseen käsittelyyn.

Jos aloittelet C#:n, WPF:n, UWP:n tai WinUI:n parissa, tai jos XAML on jo harmaantunut, mutta kamppailet edelleen hitaan testauksen ja hämmentävän virheenkorjauksen kanssa, XAML Studion kaltainen työkalu tarjoaa merkittävän muutoksen prototyyppien luomisessa , monimutkaisten sidosten virheenkorjauksessa ja suunnitelmien validoinnissa ennen niiden integrointia suuriin projekteihin – kaikki tämä avoimen lähdekoodin projektin joustavuudella ja mielenrauhalla, kun voit hallita jaettujen tietojen määrää ja käyttöä.