XAML Studio: En komplett guide till prototypframställning av XAML-gränssnitt i Windows

Informatec Digital » Resurser » XAML Studio: En komplett guide till prototypframställning av XAML-gränssnitt i Windows

Om du arbetar med XAML för att skapa gränssnitt i Windows har du förmodligen stött på problem med Visual Studio-designern, oändliga kompileringstider eller omöjliga att hitta databindningsfel. Det är här XAML Studio kommer in i bilden, ett program som är utformat just för att låta dig testa, felsöka och experimentera med XAML snabbt och med mindre friktion.

I den här artikeln kommer vi att titta närmare på vad XAML Studio är, hur det hjälper dig att prototypa WinUI- och UWP-gränssnitt på några minuter, vilka verktyg det erbjuder för felsökning av länkar, hantering av testdata, navigering i det visuella trädet och mycket mer. Du får också se hur du laddar ner det från Microsoft Store, vilka krav som ställs om du vill kompilera det från källkod och hur allt detta passar in i den nuvarande kontexten för utvecklare som är något trötta på Visual Studio-designers.

Vad är XAML Studio och vem är det för?

XAML Studio är ett Windows-program fokuserat på XAML-utveckling , ursprungligen skapat som ett Microsoft Garage-projekt och nu släppt som ett öppen källkodsprojekt inom .NET Foundation. Dess huvudsyfte är att låta dig skriva XAML, se det fungera direkt och interagera med gränssnittet som om det vore en del av din egen app.

Den är särskilt riktad mot utvecklare som arbetar med WinUI XAML- och UWP-applikationer , även om den också är mycket användbar om du kommer från WPF och vill experimentera med moderna Fluent-designkoncept, stilar, mallar och visuella tillstånd utan att behöva bygga en komplett lösning varje gång.

Till skillnad från Visual Studio, som är mer inriktat på hela utvecklingscykeln, fungerar XAML Studio som ett idélabb för det visuella lagret : du kopierar ett XAML-fragment, klistrar in det, justerar det, ser resultatet direkt, experimenterar med data, kontrollerar bindningar och när du är nöjd tar du koden till ditt riktiga projekt.

Dessutom, eftersom det är ett öppen källkodsprojekt, är dess utveckling öppen för communityn: alla utvecklare kan granska koden, föreslå ändringar , skicka in förbättringar och delta i diskussionen om nya funktioner via det offentliga arkivet.

Viktiga funktioner i XAML Studio för prototypgränssnitt

En av XAML Studios styrkor är att det samlar en uppsättning verktyg i en enda applikation som är utformad för att testa design, skapa skärmlayouter och felsöka länkar med minimal driftstopp. Det är inte bara en XAML-visare, utan en interaktiv miljö för snabb iteration i ditt användargränssnitt.

Bland dess viktigaste funktioner finns liveredigering: du kan skriva eller modifiera XAML-kod i redigeraren och direkt se en fullt fungerande förhandsgranskning . Detta förhandsgranskningsfönster möjliggör verklig interaktion: trycka på knappar, ändra tillstånd, flytta skjutreglage eller testa beteenden precis som du skulle göra i den slutliga appen.

En annan slående funktion är möjligheten att experimentera med XAML-navigering med hjälp av ett brödsmulespår. Detta gör att du enkelt kan navigera genom komplexa strukturer, se exakt var i trädet du arbetar och snabbt hitta de element du vill justera.

Dessutom innehåller XAML Studio en uppsättning genvägar och snabba förhandsgranskningsalternativ: ladda om innehåll, aktivera justeringsnät, tillämpa klippning eller ändra teman, allt från en snabbåtkomstmeny som är utformad för att effektivisera trial-and-error-cykeln.

Liveredigering och förhandsgranskningsinteraktion

Grunden i XAML Studio är dess Live Edit and Interaction -system , en liveredigeringsfunktion som eliminerar behovet av att kompilera hela lösningen varje gång du ändrar en färg, ett avstånd eller en mall. Du skriver kod, sparar eller till och med lämnar den osparad, och gränssnittet uppdateras så att du kan se resultatet direkt.

Den här förhandsvisningen är helt interaktiv, vilket innebär att du kan testa gränssnittsbeteenden i verkligheten : navigera i kontroller, utlösa händelser och se hur element beter sig när stilar, utlösare och visuella tillstånd kombineras. Det är en livräddare för prototyputveckling eftersom det hjälper dig att avgöra mycket snabbare vad som ser bra ut och vad som inte gör det.

Dessutom inkluderar XAML Studio justeringsguider på designytan , vilket gör det enkelt att placera element konsekvent och upptäcka feljusteringar som annars skulle kunna gå obemärkt förbi. Detta gör att du kan uppnå en renare layout utan att behöva göra otaliga justeringar av blindmarginaler.

I komplexa designsystem, där WinUI och Fluent erbjuder många möjligheter med skuggor, rundade kanter och anpassningsbara layouter, hjälper en välintegrerad interaktiv förhandsvisning dig att undvika mycket av den frustration som är typisk för finjusteringar i produktion.

Felsöka bindningar och utforska det visuella trädet

En av de verkliga huvudvärken i WPF, UWP eller WinUI är tysta databindningsfel . När en bindning misslyckas ser man ofta bara ett tomt värde och lite annat, vilket gör det svårt att förstå vad som händer. XAML Studio innehåller en bindningsfelsökare utformad för att belysa den här typen av problem.

Med Binding Debugger kan du visuellt granska hur din modells egenskaper ansluter till kontrollerna i gränssnittet. Verktyget visar statusen för varje bindning, de senast använda värdena och hjälper dig att snabbt identifiera vilken bindning som inte fungerar och varför. För komplexa mockups med stora mängder data sparar detta avsevärt mycket tid.

Relaterat till detta integrerar XAML Studio visuella trädutforskare och visuella tillstånd , tillgängliga från panelen Egenskaper. Den visuella trädutforskaren visar dig den kompletta hierarkin av kontroller och element som utgör skärmen, så att du kan välja valfri nod och visa dess egenskaper, stilar och relationer.

Den visuella tillståndsutforskaren gör det enkelt att se och växla mellan olika tillstånd i en vy (till exempel normal, pekad, nedtryckt, inaktiverad), vilket är avgörande när man arbetar med anpassade kontroller eller avancerade mallar. Detta gör att du snabbt kan testa hur varje tillstånd påverkar din design utan att behöva tvinga fram varje situation manuellt i den faktiska applikationen.

Datahantering med Data Context Editor

Att testa ett gränssnitt utan riktig data är som att designa i blindo. Det är därför XAML Studio innehåller en Data Context Editor , ett verktyg som låter dig enkelt definiera din vys datakontext för att fylla den med testinformation.

Från den här redigeraren kan du ansluta ditt användargränssnitt till både statiska och dynamiska datakällor: till exempel ladda JSON från en lokal fil eller ett REST API och använda det som DataContext för dina kontroller. Detta låter dig se hur layouten beter sig med lång text, stora samlingar eller gränsvärden, vilket är avgörande för robust design.

Denna möjlighet att blanda XAML med testdata, utan att behöva konfigurera hela din applikationsinfrastruktur, gör att du kan iterera snabbare med det visuella utseendet och distributionen av information, och du slipper skapa ad hoc-exempelprojekt bara för att se hur ett formulär ser ut med verkliga data.

XAML Studio kan också återställa dokument och deras datakontext när du öppnar programmet igen, tack vare sitt automatiska sparsystem, vilket gör att du slipper konfigurera om datakällan varje gång du vill fortsätta testa en specifik design.

Produktivitetsverktyg: IntelliSense, automatisk sparning och mer

Utöver sina rent visuella funktioner integrerar XAML Studio flera produktivitetsverktyg som gör ditt dagliga arbete enklare när du skriver intensivt XAML . Ett av de mest användbara är IntelliSense-stödet, vilket föreslår egenskaper, typer, kontrollnamn och namnrymder medan du skriver.

Denna IntelliSense snabbar inte bara upp kodskrivningen, utan hjälper också till att förhindra stavfel i bindningar, sökvägar och attribut , särskilt i långa strukturer med stilar, mallar eller delade resurser. Om du redan är bekant med IntelliSense i Visual Studio kommer du att känna dig som hemma.

En annan mycket praktisk funktion är automatisk sparning och återställning av dokument . XAML Studio kan automatiskt spara ditt arbete och, när du öppnar programmet igen, hämta flikar och dokument du använde, så att du kan fortsätta exakt där du slutade utan att behöva öppna filer en efter en.

Gränssnittet innehåller en dokumentationsverktygslåda som fungerar som en genväg till exempel, hjälp och referenser för kontroller och egenskaper. Detta gör att du kan konsultera dokumentationen utan att lämna verktyget , vilket är särskilt praktiskt när du testar mindre välbekanta API:er eller WinUI-specifika egenskaper.

Designhjälpmedel: Flytande användargränssnitt, guider och namnrymder

Nyare versioner av projektet har haft ett omarbetat gränssnitt baserat på Fluent UI , Microsofts moderna designsystem. Denna uppdatering märks både i verktygets visuella utseende och i hur det integrerar nuvarande kontroller, teman och layouter.

För att hjälpa dig med layouten innehåller XAML Studio justeringsstödlinjer och rutnät i förhandsgranskningsytan. Dessa stödlinjer gör det enkelt att justera marginaler, utfyllnad och layouter, och är särskilt användbara när du försöker replikera pixelperfekta designer eller när du vill se till att elementen är korrekt justerade utan att behöva mäta allt manuellt.

Ett annat område där verktyget är till hjälp är hanteringen av XAML-namnrymder. Med dess namnrymdshjälpare kan du lägga till och korrigera xmln-filer mer effektivt, vilket undviker det vanliga problemet med ofullständiga eller dubbla deklarationer som bryter mot uppmärkning eller genererar irriterande varningar.

Små förbättringar för daglig användning har också införlivats, till exempel möjligheten att duplicera öppna flikar från snabbmenyn , vilket är bra när du vill experimentera med två varianter av samma layout utan att förlora din ursprungliga version eller behöva skapa en ny fil från grunden.

Mappstöd och resurshantering

En av de största utvecklingarna i XAML Studio har varit stöd för externa mappar och resurser . Det betyder att du kan arbeta med en uppsättning relaterade filer, inte bara en enda isolerad XAML-fil.

Tack vare den här funktionen kan applikationen hantera laddning av bilder från mappar, designdatafiler och andra kompletterande resurser som vanligtvis medföljer de faktiska gränssnitten. Du kan till exempel ha en uppsättning testbilder för en karusell, ikoner för knappar eller JSON-filer som fungerar som en datakälla.

Detta mappstöd gör XAML Studio mycket mer likt ett verkligt arbetsflöde, snarare än att bara vara en enkel sandlåda. Det låter dig skapa små testscenarier som efterliknar resursstrukturen i en fullständig applikation , men med den lätta karaktären hos en miljö som är utformad enbart för prototypframställning.

Allt detta, i kombination med resten av förhandsgransknings-, bindnings- och navigeringsverktygen, gör XAML Studio till ett mycket attraktivt alternativ för dem som vill förfina sina skärmar innan de integreras i en kraftig lösning.

Ladda ner från Microsoft Store och manuell installation

För de flesta användare är det enklaste sättet att komma igång att ladda ner XAML Studio direkt från Microsoft Store . Den finns där som en gratisapp, så allt du behöver göra är att söka efter den, installera den och börja experimentera med XAML på några minuter.

Butiksversionen, enligt tillgänglig information, finns fortfarande på gren 1.1, medan den mest aktiva utvecklingen sker på utvecklingsgrenen i projektförrådet . Detta är viktigt om du vill komma åt de senaste funktionerna eller bidra till utvecklingen, eftersom det kan finnas skillnader mellan vad du ser i butiken och vad som finns i källkoden.

Om du föredrar att installera det manuellt från repository, eller kompilera det själv, finns det ett antal minimikrav relaterade till Visual Studio som du bör tänka på för att säkerställa att allt fungerar korrekt.

Kompilera XAML Studio från källkod

Om du vill gå ett steg längre och kompilera XAML Studio från dess källkod måste du förbereda din miljö i Visual Studio med specifika komponenter inriktade på utveckling av moderna Windows-applikationer.

Först måste du installera arbetsbelastningen för Windows-applikationsutveckling i Visual Studio. Denna arbetsbelastning inkluderar allt som rör UWP-applikationer, WinUI och andra moderna XAML-tekniker på Windows-plattformen.

Dessutom måste du ha Universal Windows Platform -verktygen installerade , såväl som det specifika Windows SDK 17763. Utan detta SDK kan det hända att vissa delar av projektet inte kompileras korrekt, så det är lämpligt att kontrollera detta i installationsprogrammet för Visual Studio innan du öppnar lösningen.

När du har alla komponenter, se till att projektet som heter XAMLStudio är markerat som startprojekt i lösningen när du öppnar arkivet. Tryck sedan helt enkelt på F5 för att köra i felsökningsläge och starta programmet från din egen utvecklingsmiljö.

Öppen källkodsprojekt, licenser och uppförandekod

Eftersom det publiceras som ett .NET Foundation-projekt distribueras XAML Studio under MIT-licensen, en av de mest tillåtande licenserna för öppen källkod. Det betyder att du kan granska, modifiera, återanvända och bidra till koden helt fritt, så länge du respekterar de vanliga attributionsvillkoren.

Arkivet innehåller en NOTICE.json-fil med tredjepartsattributioner , som matchar informationen som visas i själva applikationen angående de externa bibliotek som används. Om du är orolig för licensefterlevnad i företagsmiljöer är den här filen en användbar referens för att se vilka komponenter som har införlivats.

Projektet har antagit Microsofts uppförandekod för öppen källkod , så deltagande i ärenden, pull requests eller diskussioner kräver att tydliga uppföranderegler följs: respekt, professionalism och nolltolerans mot trakasserier. Det finns också en FAQ-sida om uppförandekoden och en kontaktadress ( [email protected] ) för frågor eller problem.

För de som vill samarbeta aktivt beskriver filen CONTRIBUTING.md hur man föreslår ändringar, skickar in bidrag och rapporterar problem . Den beskriver i detalj det rekommenderade sättet att arbeta med grenar, arbetsflödet för kodgranskning och andra praktiska aspekter av samarbete i projektet.

Telemetri, integritet och datainsamling

Liksom många andra moderna applikationer inkluderade XAML Studio telemetrimekanismer för att samla in användningsinformation , med målet att förstå vilka funktioner som används mest, hur appen presterar på olika dokumentstorlekar och vilka typer av fel som uppstår oftast.

Den goda nyheten är att själva applikationen erbjuder tydlig kontroll över denna telemetri: från inställningssidan, i avsnittet Feedback , kan du ändra alternativet Diagnostikdata till "Nej" för att inaktivera datainsamling från själva den distribuerade applikationen.

Det är värt att notera att App Center – plattformen som används som bas för telemetri – enligt projektinformation har föråldrats och att aktiv telemetri för närvarande inte används i version v2 medan en alternativ lösning för diagnostik beslutas.

Microsoft uppger i vilket fall som helst att programvaran kan samla in information om applikationsanvändning, vilket kan användas för att förbättra tjänster och produkter . Om du som utvecklare använder funktioner som kan samla in slutanvändardata (till exempel tjänsteintegrationer i dina egna appar) måste du följa gällande lag och tillhandahålla lämpliga integritetsmeddelanden och policyer, med länkar till Microsofts integritetspolicy där så är lämpligt.

Varumärke, logotyper och användning av varumärken

Arkivet och själva applikationen kan innehålla varumärken och logotyper som tillhör Microsoft eller andra tredje parter. Projektet klargör att användningen av dessa varumärken omfattas av Microsofts officiella varumärkesriktlinjer.

Om du väljer att skapa modifierade versioner av projektet eller alternativa distributioner måste du göra det på ett sätt som inte orsakar förvirring eller antyder officiell sponsring av Microsoft när ingen sådan relation existerar. Denna regel är särskilt viktig om du omdistribuerar binärfiler eller integrerar delar av projektet i kommersiella produkter.

På samma sätt omfattas alla tredjepartslogotyper eller varumärken som används i koden av dessa tredjeparters policyer, så det är lämpligt att granska dessa aspekter om du avser att återanvända stora delar av applikationen i dina egna offentliga projekt.

Kontext: Frustration med Visual Studio-designers och värdet av XAML Studio

Lanseringen av XAML Studio som ett öppen källkodsprojekt kom vid en tidpunkt då många utvecklare uttryckte missnöje med Visual Studios visuella designers . Prestandaproblem, krascher, inkonsekvent beteende och svårigheter att felsöka komplex XAML var återkommande klagomål.

I det här scenariot uppfattas XAML Studio som ett slags flyktväg: ett lättviktsverktyg, specifikt inriktat på XAML-design och -testning, som minskar en del av friktionen i den traditionella redigering-kompilering-körningscykeln. Det syftar inte till att ersätta Visual Studio, utan snarare till att komplettera deras expertis inom det område där det gör mest ont: snabb iteration av gränssnittet.

Denna metod överensstämmer också med de problem som uppstår med inlärningstekniker som WinUI, WPF eller UWP. För många kan kombinationen av .sln-filer, komplexa konfigurationer och paketering till körbara filer vara ett riktigt huvudbry, särskilt i början. Att ha ett fristående verktyg som enbart fokuserar på XAML-lagret gör inlärnings- och experimenteringsprocessen mycket smidigare.

Kort sagt har XAML Studio funnit sin nisch som ett högt värderat program för dem som ägnar en betydande del av sin tid åt att bygga och förfina användargränssnitt i Windows-ekosystemet, och erbjuder en mer flexibel och mindre besvärlig miljö för att manipulera XAML dagligen.

För alla som börjar med C#, WPF, UWP eller WinUI, eller för de som redan är gråhåriga inom XAML men fortfarande kämpar med långsam testning och förvirrande felsökning, innebär ett verktyg som XAML Studio till hands en betydande förändring i hur man närmar sig prototyputveckling , felsöker komplexa bindningar och validerar design innan man integrerar dem i stora projekt – allt med flexibiliteten hos ett öppen källkodsprojekt och tryggheten i att kunna kontrollera vilken data som delas och hur den används.