XAML Studio: En komplett guide til prototyping av XAML-grensesnitt i Windows

Informatec Digital » Ressurser » XAML Studio: En komplett guide til prototyping av XAML-grensesnitt i Windows

Hvis du jobber med XAML for å lage grensesnitt i Windows , har du sannsynligvis støtt på problemer med Visual Studio-designeren, uendelige kompileringstider eller databindingsfeil som er umulige å finne. Det er her XAML Studio kommer inn i bildet, et program som er designet nettopp for å la deg teste, feilsøke og eksperimentere med XAML raskt og med mindre friksjon.

Gjennom denne artikkelen skal vi se nærmere på hva XAML Studio er, hvordan det hjelper deg med å prototype WinUI- og UWP-grensesnitt på få minutter, hvilke verktøy det tilbyr for feilsøking av lenker, administrasjon av testdata, navigering i det visuelle treet og mye mer. Du vil også se hvordan du laster det ned fra Microsoft Store, hva kravene er hvis du vil kompilere det fra kildekode, og hvordan alt dette passer inn i den nåværende konteksten til utviklere som er litt lei av Visual Studio-designere.

Hva er XAML Studio, og hvem er det for?

XAML Studio er et Windows-program fokusert på XAML-utvikling , opprinnelig laget som et Microsoft Garage-prosjekt og nå utgitt som et åpen kildekode-prosjekt innenfor .NET Foundation. Hovedformålet er å la deg skrive XAML, se det fungere umiddelbart og samhandle med grensesnittet som om det var en del av din egen app.

Den er spesielt rettet mot utviklere som jobber med WinUI XAML- og UWP-applikasjoner , selv om den også er veldig nyttig hvis du kommer fra WPF og ønsker å eksperimentere med moderne Fluent-designkonsepter, stiler, maler og visuelle tilstander uten å måtte bygge en komplett løsning hver gang.

I motsetning til Visual Studio, som er mer rettet mot hele utviklingssyklusen, fungerer XAML Studio som et idélaboratorium for det visuelle laget : du kopierer et XAML-fragment, limer det inn, justerer det, ser resultatet umiddelbart, leker med dataene, sjekker bindinger, og når du er fornøyd, tar du koden med til det virkelige prosjektet ditt.

Videre, siden det er et åpen kildekode-prosjekt, er utviklingen åpen for fellesskapet: enhver utvikler kan gjennomgå koden, foreslå endringer , sende inn forbedringer og delta i diskusjonen om nye funksjoner gjennom det offentlige depotet.

Viktige funksjoner i XAML Studio for prototyping av grensesnitt

En av XAML Studios styrker er at det samler et sett med verktøy i én applikasjon designet for testing av design, oppretting av skjermoppsett og feilsøking av lenker med minimal nedetid. Det er ikke bare en XAML-visningsprogramvare, men et interaktivt miljø for rask iterasjon i brukergrensesnittet ditt.

Blant de viktigste funksjonene er live-redigering: du kan skrive eller endre XAML-kode i editoren og umiddelbart se en fullt funksjonell forhåndsvisning . Dette forhåndsvisningsvinduet gir mulighet for reell interaksjon: å trykke på knapper, endre tilstander, flytte glidebrytere eller teste atferd akkurat som du ville gjort i den endelige appen.

En annen slående funksjon er muligheten til å eksperimentere med XAML-navigasjon ved hjelp av en brødsmulespor. Dette lar deg enkelt navigere gjennom komplekse strukturer, se nøyaktig hvor i treet du jobber, og raskt finne elementene du vil justere.

I tillegg inkluderer XAML Studio et sett med snarveier og alternativer for rask forhåndsvisning: last inn innhold på nytt, aktiver justeringsrutenett, bruk klipping eller endre temaer, alt fra en hurtigmeny som er utformet for å effektivisere prøving og feiling-syklusen.

Direkte redigering og forhåndsvisningsinteraksjon

Grunnlaget for XAML Studio er Live Edit and Interaction -systemet , en live-redigeringsfunksjon som eliminerer behovet for å kompilere hele løsningen hver gang du endrer en farge, avstand eller mal. Du skriver kode, lagrer eller lar den være ulagret, og grensesnittet oppdateres slik at du kan se resultatet umiddelbart.

Denne forhåndsvisningen er fullstendig interaktiv, noe som betyr at du kan teste grensesnittets atferd i den virkelige verden : navigere i kontroller, utløse hendelser og se hvordan elementer oppfører seg når stiler, utløsere og visuelle tilstander kombineres. Det er en livredder for prototyping fordi det hjelper deg å bestemme mye raskere hva som ser bra ut og hva som ikke gjør det.

Videre inkluderer XAML Studio justeringsguider på designoverflaten , noe som gjør det enkelt å plassere elementer konsekvent og oppdage feiljusteringer som ellers ville gått ubemerket hen. Dette lar deg oppnå en renere layout uten å måtte gjøre utallige justeringer av blindmarginer.

I komplekse designsystemer, der WinUI og Fluent tilbyr mange muligheter med skygger, avrundede kanter og adaptive oppsett, hjelper en godt integrert interaktiv forhåndsvisning deg med å unngå mye av frustrasjonen som er typisk for finjustering i produksjon.

Feilsøking av bindinger og utforskning av det visuelle treet

En av de virkelige hodepinene i WPF, UWP eller WinUI er stille databindingsfeil . Når en binding mislykkes, ser du ofte bare en tom verdi og lite annet, noe som gjør det vanskelig å forstå hva som skjer. XAML Studio inkluderer en bindingsfeilsøker som er utviklet for å belyse denne typen problemer.

Med Binding Debugger kan du visuelt se hvordan modellens egenskaper kobles til kontrollene i grensesnittet. Verktøyet viser statusen til hver binding, de siste verdiene som ble brukt , og hjelper deg med å raskt finne ut hvilken binding som feiler og hvorfor. For komplekse mockups med store mengder data sparer dette betydelig tid.

Relatert til dette integrerer XAML Studio visuelle treutforskere og visuelle tilstander , tilgjengelig fra Egenskaper-panelet. Den visuelle treutforskeren viser deg det komplette hierarkiet av kontroller og elementer som utgjør skjermen, slik at du kan velge en hvilken som helst node og se dens egenskaper, stiler og relasjoner.

Den visuelle tilstandsutforskeren gjør det derimot enkelt å se og bytte mellom ulike tilstander i en visning (for eksempel normal, spiss, trykket, deaktivert), noe som er avgjørende når du arbeider med tilpassede kontroller eller avanserte maler. Dette lar deg raskt teste hvordan hver tilstand påvirker designet ditt uten å måtte tvinge frem hver situasjon manuelt i det faktiske programmet.

Datahåndtering med Data Context Editor

Å teste et grensesnitt uten reelle data er som å designe blindt. Derfor inkluderer XAML Studio en Data Context Editor , et verktøy som lar deg enkelt definere visningens datakontekst for å fylle den med testinformasjon.

Fra denne editoren kan du koble brukergrensesnittet ditt til både statiske og dynamiske datakilder: for eksempel laste inn JSON fra en lokal fil eller et REST API og bruke det som DataContext for kontrollene dine. Dette lar deg se hvordan layouten oppfører seg med lang tekst, store samlinger eller grenseverdier, noe som er avgjørende for robust design.

Denne muligheten til å blande XAML med testdata, uten å måtte sette opp hele applikasjonsinfrastrukturen, lar deg iterere raskere på det visuelle utseendet og distribusjonen av informasjon, og sparer deg for å sette opp ad hoc-eksempelprosjekter bare for å se hvordan et skjema ser ut med ekte data.

XAML Studio kan også gjenopprette dokumenter og deres datakontekst når du åpner programmet på nytt, takket være systemet for automatisk lagring, som sparer deg for å måtte konfigurere datakilden på nytt hver gang du vil fortsette å teste et bestemt design.

Produktivitetsverktøy: IntelliSense, automatisk lagring og mer

I tillegg til de rent visuelle funksjonene integrerer XAML Studio flere produktivitetsverktøy som gjør det daglige arbeidet enklere når du skriver XAML intensivt . Et av de mest nyttige er IntelliSense-støtte, som foreslår egenskaper, typer, kontrollnavn og navnerom mens du skriver.

Denne IntelliSense-funksjonen fremskynder ikke bare kodeskriving, men bidrar også til å forhindre skrivefeil i bindinger, stier og attributter , spesielt i lange strukturer med stiler, maler eller delte ressurser. Hvis du allerede er kjent med IntelliSense i Visual Studio, vil du føle deg hjemme.

En annen veldig praktisk funksjon er automatisk lagring og gjenoppretting av dokumenter . XAML Studio kan automatisk lagre arbeidet ditt, og når du åpner programmet på nytt, henter den frem fanene og dokumentene du brukte, slik at du kan fortsette nøyaktig der du slapp uten å måtte åpne filer én etter én.

Grensesnittet inkluderer en dokumentasjonsverktøykasse som fungerer som en snarvei til eksempler, hjelp og referanser for kontroller og egenskaper. Dette lar deg konsultere dokumentasjon uten å forlate verktøyet , noe som er spesielt praktisk når du tester mindre kjente API-er eller WinUI-spesifikke egenskaper.

Designhjelpemidler: Flytende brukergrensesnitt, guider og navnerom

Nyere versjoner av prosjektet har hatt et oppdatert grensesnitt basert på Fluent UI , Microsofts moderne designsystem. Denne oppdateringen er merkbar både i verktøyets visuelle utseende og i måten det integrerer nåværende kontroller, temaer og oppsett.

For å hjelpe deg med layouten, inkluderer XAML Studio justeringshjelpelinjer og rutenett på forhåndsvisningsflaten. Disse hjelpelinjene gjør det enkelt å justere marger, utfylling og layouter, og er spesielt nyttige når du prøver å gjenskape pikselperfekte design eller når du vil sikre at elementene er riktig justert uten å måtte måle alt manuelt.

Et annet område der verktøyet hjelper til er administrasjon av XAML-navnerom. Med navneromshjelperne kan du legge til og korrigere xml-er mer effektivt, og unngå det vanlige problemet med ufullstendige eller dupliserte deklarasjoner som ødelegger markup eller genererer irriterende advarsler.

Små forbedringer for daglig bruk er også innlemmet, som muligheten til å duplisere åpne faner fra hurtigmenyen , noe som er flott når du vil eksperimentere med to varianter av samme layout uten å miste den opprinnelige versjonen eller måtte opprette en ny fil fra bunnen av.

Mappestøtte og ressursadministrasjon

En av de viktigste utviklingene i XAML Studio har vært støtte for eksterne mapper og ressurser . Dette betyr at du kan jobbe med et sett med relaterte filer, ikke bare én isolert XAML-fil.

Takket være denne funksjonen kan applikasjonen håndtere lasting av bilder fra mapper, designdatafiler og andre tilleggsressurser som vanligvis følger med de faktiske grensesnittene. Du kan for eksempel ha et sett med testbilder for en karusell, ikoner for knapper eller JSON-filer som fungerer som en datakilde.

Denne mappestøtten bringer XAML Studio mye nærmere en virkelig arbeidsflyt, i stedet for bare å være en enkel sandkasse. Den lar deg sette opp små testscenarier som etterligner ressursstrukturen til en full applikasjon , men med den lette naturen til et miljø designet utelukkende for prototyping.

Alt dette, kombinert med resten av forhåndsvisnings-, bindings- og navigasjonsverktøyene, gjør XAML Studio til et svært attraktivt alternativ for de som ønsker å forbedre skjermbildene sine før de integreres i en kraftig løsning.

Last ned fra Microsoft Store og manuell installasjon

For de fleste brukere er den enkleste måten å komme i gang å laste ned XAML Studio direkte fra Microsoft Store . Den er tilgjengelig der som en gratis app, så alt du trenger å gjøre er å søke etter den, installere den og begynne å eksperimentere med XAML på få minutter.

Butikkversjonen er, ifølge tilgjengelig informasjon, fortsatt på gren 1.1, mens den mest aktive utviklingen foregår på utviklergrenen i prosjektarkivet . Dette er viktig hvis du vil ha tilgang til de nyeste funksjonene eller bidra til utvikling, da det kan være forskjeller mellom det du ser i butikken og det som er i kildekoden.

Hvis du foretrekker å installere det manuelt fra depotet, eller kompilere det selv, er det en rekke minimumskrav knyttet til Visual Studio som du bør huske på for å sikre at alt fungerer som det skal.

Kompiler XAML Studio fra kildekode

Hvis du vil gå et skritt videre og kompilere XAML Studio fra kildekoden , må du forberede miljøet ditt i Visual Studio med spesifikke komponenter rettet mot utvikling av moderne Windows-applikasjoner.

Først må du installere arbeidsmengden for Windows-applikasjonsutvikling i Visual Studio. Denne arbeidsmengden inkluderer alt relatert til UWP-applikasjoner, WinUI og andre moderne XAML-teknologier på Windows-plattformen.

I tillegg må du ha installert Universal Windows Platform- verktøyene , samt det spesifikke Windows SDK 17763. Uten dette SDK-et kan det hende at enkelte deler av prosjektet ikke kompileres riktig, så det anbefales å sjekke dette i installasjonsprogrammet for Visual Studio før du åpner løsningen.

Når du har alle komponentene, må du sørge for at prosjektet kalt XAMLStudio er merket som oppstartsprosjekt i løsningen når du åpner depotet. Trykk deretter bare F5 for å kjøre i feilsøkingsmodus og starte applikasjonen fra ditt eget utviklingsmiljø.

Åpen kildekode-prosjekt, lisenser og etiske retningslinjer

Fordi det er publisert som et .NET Foundation-prosjekt , distribueres XAML Studio under MIT-lisensen, en av de mest permissive lisensene for åpen kildekode. Dette betyr at du kan gjennomgå, endre, gjenbruke og bidra til koden ganske fritt, så lenge du respekterer de vanlige attribusjonsvilkårene.

Repositoriet inneholder en NOTICE.json-fil med tredjepartsattribusjoner , som samsvarer med informasjonen som vises i selve applikasjonen angående de eksterne bibliotekene som brukes. Hvis du er bekymret for lisenssamsvar i bedriftsmiljøer, er denne filen en nyttig referanse for å se hvilke komponenter som er innlemmet.

Prosjektet har tatt i bruk Microsofts etiske retningslinjer for åpen kildekode , så deltakelse i saker, pull requests eller diskusjoner krever overholdelse av klare atferdsregler: respekt, profesjonalitet og nulltoleranse for trakassering. Det finnes også en FAQ-side om atferdsreglene og en kontaktadresse ( [email protected] ) for spørsmål eller problemer.

For de som ønsker å samarbeide aktivt, beskriver CONTRIBUTING.md-filen hvordan man foreslår endringer, sender inn bidrag og rapporterer problemer . Den beskriver den anbefalte måten å jobbe med grener på, arbeidsflyten for kodegjennomgang og andre praktiske aspekter ved samarbeid på prosjektet.

Telemetri, personvern og datainnsamling

Som mange andre moderne applikasjoner inkluderte XAML Studio telemetri-mekanismer for å samle inn bruksinformasjon , med mål om å forstå hvilke funksjoner som brukes mest, hvordan appen yter på forskjellige dokumentstørrelser og hvilke typer feil som oppstår oftest.

Den gode nyheten er at selve applikasjonen gir tydelig kontroll over denne telemetrien: fra innstillingssiden, i Tilbakemeldingsdelen , kan du endre alternativet Diagnostiske data til "Nei" for å deaktivere datainnsamling fra selve den distribuerte applikasjonen.

Det er verdt å merke seg at App Center – plattformen som brukes som grunnlag for telemetri – ifølge prosjektinformasjon er avskrevet, og for øyeblikket brukes ikke aktiv telemetri i versjon v2 mens en alternativ løsning for diagnostikk blir bestemt.

Uansett opplyser Microsoft at programvaren kan samle inn informasjon om bruk av applikasjoner, som kan brukes til å forbedre tjenester og produkter . Hvis du som utvikler bruker funksjoner som kan samle inn sluttbrukerdata (for eksempel tjenesteintegrasjoner i dine egne apper), må du overholde gjeldende lov og oppgi passende personvernerklæringer og -policyer, med lenker til Microsofts personvernerklæring der det er aktuelt.

Merkevare, logoer og bruk av varemerker

Selve arkivet og applikasjonen kan inneholde varemerker og logoer tilhørende Microsoft eller andre tredjeparter. Prosjektet gjør det klart at bruken av disse varemerkene er underlagt Microsofts offisielle retningslinjer for merkevarebygging.

Hvis du bestemmer deg for å lage modifiserte versjoner av prosjektet eller alternative distribusjoner, må du gjøre det på en måte som ikke forårsaker forvirring eller antyder offisielt sponsing fra Microsoft når et slikt forhold ikke eksisterer. Denne regelen er spesielt viktig hvis du distribuerer binærfiler eller integrerer deler av prosjektet i kommersielle produkter.

På samme måte er eventuelle tredjepartslogoer eller varemerker som brukes i koden underlagt retningslinjene til disse tredjepartene, så det er lurt å gjennomgå disse aspektene hvis du har tenkt å gjenbruke store deler av applikasjonen i dine egne offentlige prosjekter.

Kontekst: Frustrasjon over Visual Studio-designere og verdien av XAML Studio

Lanseringen av XAML Studio som et åpen kildekode-prosjekt kom på et tidspunkt da mange utviklere uttrykte misnøye med Visual Studios visuelle designere . Ytelsesproblemer, krasj, inkonsekvent oppførsel og vanskeligheter med feilsøking av kompleks XAML var tilbakevendende klager.

I dette scenariet oppfattes XAML Studio som en slags rømningsventil: et lettvektsverktøy, spesielt fokusert på XAML-design og -testing, som reduserer noe av friksjonen i den tradisjonelle rediger-kompil-kjør-syklusen. Det har ikke som mål å erstatte Visual Studio, men snarere å utfylle ekspertisen deres på det området der det gjør mest vondt: rask iterasjon på grensesnittet.

Denne tilnærmingen er også i tråd med bekymringene knyttet til læringsteknologier som WinUI, WPF eller UWP. For mange kan kombinasjonen av .sln-filer, komplekse konfigurasjoner og pakking til kjørbare filer være en skikkelig hodepine, spesielt i begynnelsen. Å ha et frittstående verktøy som kun fokuserer på XAML-laget gjør lærings- og eksperimenteringsprosessen mye smidigere.

Kort sagt har XAML Studio funnet sin nisje som et høyt verdsatt program for de som bruker en betydelig del av tiden sin på å bygge og forbedre brukergrensesnitt i Windows-økosystemet, og tilbyr et mer smidig og mindre tungvint miljø for å manipulere XAML på daglig basis.

For alle som starter med C#, WPF, UWP eller WinUI, eller for de som allerede er gråhåret i XAML, men fortsatt sliter med treg testing og forvirrende feilsøking, representerer det å ha et verktøy som XAML Studio for hånden en betydelig endring i hvordan man nærmer seg prototyping , feilsøker komplekse bindinger og validerer design før man integrerer dem i store prosjekter – alt med fleksibiliteten til et åpen kildekode-prosjekt og tryggheten ved å kunne kontrollere hvilke data som deles og hvordan de brukes.