- Mit XAML Studio können Sie XAML live bearbeiten und in der Vorschau anzeigen, wobei die Benutzeroberfläche direkt interaktiv ist.
- Es umfasst fortschrittliche Tools wie den Binding Debugger, den Data Context Editor und visuelle Explorer.
- Es kann aus dem Microsoft Store heruntergeladen oder aus seinem Open-Source-Repository unter der MIT-Lizenz kompiliert werden.
- Es bietet Kontrolle über die Telemetrie und ist darauf ausgerichtet, die Frustration von Visual Studio-Designern zu verringern.
Wer in Windows mit XAML Benutzeroberflächen erstellt , kennt wahrscheinlich die Probleme mit dem Visual Studio Designer, endlos lange Kompilierungszeiten oder schwer auffindbare Datenbindungsfehler. Hier kommt XAML Studio ins Spiel: Eine Anwendung, die speziell dafür entwickelt wurde, XAML schnell und unkompliziert zu testen, zu debuggen und damit zu experimentieren .
In diesem Artikel werfen wir einen detaillierten Blick auf XAML Studio, seine Funktionsweise beim Prototyping von WinUI- und UWP-Oberflächen in wenigen Minuten, die verfügbaren Tools zum Debuggen von Links, Verwalten von Testdaten, Navigieren in der visuellen Struktur und vieles mehr. Außerdem erfahren Sie, wie Sie XAML Studio aus dem Microsoft Store herunterladen, welche Voraussetzungen für die Kompilierung aus dem Quellcode gelten und wie all dies für Entwickler interessant ist, die mit den Designern von Visual Studio unzufrieden sind.
Was ist XAML Studio und für wen ist es gedacht?
XAML Studio ist eine Windows-Anwendung für die XAML-Entwicklung . Sie entstand ursprünglich als Microsoft Garage-Projekt und wird nun als Open-Source-Projekt innerhalb der .NET Foundation veröffentlicht. Ihr Hauptzweck ist es, Ihnen das Schreiben von XAML-Code zu ermöglichen, dessen Funktion sofort zu überprüfen und mit der Benutzeroberfläche zu interagieren, als wäre sie Teil Ihrer eigenen Anwendung.
Es richtet sich insbesondere an Entwickler, die mit WinUI XAML- und UWP-Anwendungen arbeiten , ist aber auch sehr nützlich, wenn Sie von WPF kommen und mit modernen Fluent-Designkonzepten, Stilen, Vorlagen und visuellen Zuständen experimentieren möchten, ohne jedes Mal eine komplette Lösung erstellen zu müssen.
Im Gegensatz zu Visual Studio, das eher auf den gesamten Entwicklungszyklus ausgerichtet ist, fungiert XAML Studio als Ideenlabor für die visuelle Ebene : Man kopiert ein XAML-Fragment, fügt es ein, passt es an, sieht sofort das Ergebnis, experimentiert mit den Daten, überprüft die Bindungen und wenn man zufrieden ist, übernimmt man den Code in sein eigentliches Projekt.
Da es sich um ein Open-Source-Projekt handelt, ist seine Weiterentwicklung zudem für die Community offen: Jeder Entwickler kann den Code überprüfen, Änderungen vorschlagen , Verbesserungen einreichen und sich über das öffentliche Repository an der Diskussion neuer Funktionen beteiligen.
Hauptmerkmale von XAML Studio für die Prototypentwicklung von Benutzeroberflächen
Eine der Stärken von XAML Studio ist die Integration verschiedener Tools in einer einzigen Anwendung. Diese ermöglicht das Testen von Designs, das Erstellen von Bildschirm-Layouts und das Debuggen von Links mit minimalen Ausfallzeiten. Es ist nicht nur ein XAML-Viewer, sondern eine interaktive Umgebung für die schnelle Iteration Ihrer Benutzeroberfläche.
Zu den wichtigsten Funktionen gehört die Live-Bearbeitung: Sie können XAML-Code im Editor schreiben oder ändern und sofort eine voll funktionsfähige Vorschau sehen . Dieses Vorschaufenster ermöglicht die Interaktion: Schaltflächen drücken, Zustände ändern, Schieberegler bewegen oder Verhaltensweisen testen – genau wie in der fertigen Anwendung.
Ein weiteres herausragendes Merkmal ist die Möglichkeit, die XAML-Navigation mithilfe einer Breadcrumb-Navigation zu testen. Dadurch können Sie sich einfach durch komplexe Strukturen bewegen, genau sehen, wo Sie sich im Baum befinden, und die Elemente, die Sie anpassen möchten, schnell finden.
Darüber hinaus bietet XAML Studio eine Reihe von Tastenkombinationen und Schnellvorschauoptionen: Inhalte neu laden, Ausrichtungsraster aktivieren, Clipping anwenden oder Designs ändern – alles über ein Schnellzugriffsmenü, das den Versuch-und-Irrtum-Zyklus vereinfachen soll.
Live-Bearbeitung und Vorschau-Interaktion
Das Herzstück von XAML Studio ist das Live-Bearbeitungs- und Interaktionssystem . Diese Funktion ermöglicht die Bearbeitung in Echtzeit und macht es überflüssig, die gesamte Projektmappe jedes Mal neu zu kompilieren, wenn Sie eine Farbe, Abstände oder Vorlage ändern. Sie schreiben Code, speichern ihn oder lassen ihn auch ungespeichert – die Benutzeroberfläche wird aktualisiert, sodass Sie das Ergebnis sofort sehen.
Diese Vorschau ist vollständig interaktiv. Sie können also das Verhalten der Benutzeroberfläche in der Praxis testen : Navigieren Sie durch die Steuerelemente, lösen Sie Ereignisse aus und beobachten Sie, wie sich Elemente verhalten, wenn Stile, Auslöser und visuelle Zustände kombiniert werden. Das ist besonders beim Prototyping hilfreich, da Sie so viel schneller entscheiden können, was gut aussieht und was nicht.
Darüber hinaus enthält XAML Studio Ausrichtungshilfen auf der Designoberfläche , die das einheitliche Positionieren von Elementen vereinfachen und Fehlausrichtungen erkennen lassen, die sonst unbemerkt bleiben würden. So erzielen Sie ein übersichtlicheres Layout, ohne unzählige blinde Randanpassungen vornehmen zu müssen.
In komplexen Designsystemen, in denen WinUI und Fluent viele Möglichkeiten mit Schatten, abgerundeten Kanten und adaptiven Layouts bieten, hilft eine gut integrierte interaktive Vorschau dabei, einen Großteil der Frustration zu vermeiden, die typisch für die Feinabstimmung in der Produktion ist.
Debuggen von Bindungen und Erkunden des visuellen Baums
Eines der größten Probleme in WPF, UWP oder WinUI sind stille Datenbindungsfehler . Schlägt eine Bindung fehl, sieht man oft nur einen leeren Wert und kaum weitere Informationen, was es schwierig macht, die Ursache zu ermitteln. XAML Studio enthält einen Bindungs-Debugger, der genau solche Probleme aufdeckt.
Mit dem Binding-Debugger können Sie visuell überprüfen, wie die Eigenschaften Ihres Modells mit den Steuerelementen der Benutzeroberfläche verknüpft sind. Das Tool zeigt den Status jeder Bindung, die zuletzt verwendeten Werte an und hilft Ihnen, schnell die fehlerhafte Bindung und deren Ursache zu ermitteln. Bei komplexen Mockups mit großen Datenmengen spart dies erheblich Zeit.
In diesem Zusammenhang integriert XAML Studio visuelle Baumstrukturen und visuelle Zustände , die über das Eigenschaftenfenster zugänglich sind. Die visuelle Baumstruktur zeigt die vollständige Hierarchie der Steuerelemente und Elemente des Bildschirms an, sodass Sie jeden Knoten auswählen und dessen Eigenschaften, Stile und Beziehungen anzeigen können.
Der visuelle Zustands-Explorer ermöglicht es, verschiedene Zustände einer Ansicht (z. B. normal, mit dem Mauszeiger markiert, gedrückt, deaktiviert) einfach anzuzeigen und zwischen ihnen zu wechseln. Dies ist besonders wichtig bei der Arbeit mit benutzerdefinierten Steuerelementen oder erweiterten Vorlagen. So können Sie schnell testen, wie sich die einzelnen Zustände auf Ihr Design auswirken, ohne jede Situation manuell in der Anwendung erzwingen zu müssen.
Datenverwaltung mit dem Datenkontext-Editor
Das Testen einer Benutzeroberfläche ohne reale Daten ist wie blindes Entwerfen. Deshalb enthält XAML Studio einen Datenkontext-Editor – ein Werkzeug, mit dem Sie den Datenkontext Ihrer Ansicht einfach definieren und mit Testinformationen füllen können.
Mit diesem Editor können Sie Ihre Benutzeroberfläche mit statischen und dynamischen Datenquellen verbinden: Laden Sie beispielsweise JSON aus einer lokalen Datei oder einer REST-API und verwenden Sie es als Datenkontext für Ihre Steuerelemente. So können Sie sehen, wie sich das Layout bei langen Texten, großen Sammlungen oder Grenzwerten verhält – ein entscheidender Faktor für ein robustes Design.
Durch die Möglichkeit, XAML mit Testdaten zu mischen, ohne die gesamte Anwendungsinfrastruktur einrichten zu müssen, können Sie die visuelle Darstellung und die Verteilung von Informationen schneller iterativ verbessern und müssen keine Ad-hoc-Beispielprojekte aufsetzen, nur um zu sehen, wie ein Formular mit echten Daten aussieht.
Dank des automatischen Speichersystems kann XAML Studio beim erneuten Öffnen der Anwendung auch Dokumente und deren Datenkontext wiederherstellen. Dadurch entfällt die Notwendigkeit, die Datenquelle jedes Mal neu zu konfigurieren, wenn Sie ein bestimmtes Design weiter testen möchten.
Produktivitätstools: IntelliSense, automatisches Speichern und mehr
Neben seinen rein visuellen Funktionen bietet XAML Studio zahlreiche Produktivitätstools, die die tägliche Arbeit beim intensiven Schreiben von XAML-Code erleichtern . Besonders hilfreich ist die IntelliSense-Unterstützung, die während der Eingabe Eigenschaften, Typen, Steuerelementnamen und Namensräume vorschlägt.
IntelliSense beschleunigt nicht nur das Schreiben von Code, sondern hilft auch, Tippfehler in Bindungen, Pfaden und Attributen zu vermeiden , insbesondere in komplexen Strukturen von Stilen, Vorlagen oder gemeinsam genutzten Ressourcen. Wenn Sie IntelliSense bereits in Visual Studio kennen, werden Sie sich sofort zurechtfinden.
Ein weiteres sehr praktisches Feature ist das automatische Speichern und Wiederherstellen von Dokumenten . XAML Studio speichert Ihre Arbeit automatisch und stellt beim erneuten Öffnen der Anwendung die zuletzt verwendeten Tabs und Dokumente wieder her, sodass Sie genau dort weitermachen können, wo Sie aufgehört haben, ohne die Dateien einzeln öffnen zu müssen.
Die Benutzeroberfläche enthält eine Dokumentations-Toolbox, die als Schnellzugriff auf Beispiele, Hilfe und Referenzen für Steuerelemente und Eigenschaften dient. So können Sie die Dokumentation konsultieren, ohne das Tool zu verlassen . Dies ist besonders praktisch beim Testen weniger bekannter APIs oder WinUI-spezifischer Eigenschaften.
Designhilfen: Fluent UI, Leitfäden und Namensräume
Die neueren Versionen des Projekts verfügen über eine überarbeitete Benutzeroberfläche, die auf Fluent UI , dem modernen Designsystem von Microsoft, basiert. Diese Aktualisierung ist sowohl im visuellen Erscheinungsbild des Tools als auch in der Integration aktueller Steuerelemente, Designs und Layouts erkennbar.
Um Ihnen das Layout zu erleichtern, bietet XAML Studio Ausrichtungshilfen und Raster in der Vorschau. Mithilfe dieser Hilfslinien lassen sich Ränder, Abstände und Layouts einfach ausrichten. Sie sind besonders nützlich, wenn Sie pixelgenaue Designs nachbilden oder die korrekte Ausrichtung von Elementen sicherstellen möchten, ohne alles manuell messen zu müssen.
Ein weiterer Bereich, in dem das Tool hilfreich ist, ist die Verwaltung von XAML-Namespaces. Mithilfe der Namespace-Helfer können Sie xmlns effizienter hinzufügen und korrigieren und so das häufige Problem unvollständiger oder doppelter Deklarationen vermeiden, die Markup-Fehler verursachen oder lästige Warnungen auslösen.
Es wurden auch kleine Verbesserungen für den täglichen Gebrauch vorgenommen, wie zum Beispiel die Möglichkeit, geöffnete Tabs über das Kontextmenü zu duplizieren . Dies ist besonders nützlich, wenn man mit zwei Varianten desselben Layouts experimentieren möchte, ohne die Originalversion zu verlieren oder eine neue Datei von Grund auf erstellen zu müssen.
Ordnerunterstützung und Ressourcenverwaltung
Eine der wichtigsten Neuerungen in XAML Studio ist die Unterstützung externer Ordner und Ressourcen . Das bedeutet, dass Sie mit mehreren zusammengehörigen Dateien arbeiten können, anstatt nur mit einer einzelnen, isolierten XAML-Datei.
Dank dieser Funktion kann die Anwendung Bilder aus Ordnern laden, Designdatendateien und andere ergänzende Ressourcen bereitstellen, die typischerweise zu den Benutzeroberflächen gehören. Beispielsweise könnten Sie Testbilder für ein Karussell, Symbole für Schaltflächen oder JSON-Dateien als Datenquelle verwenden.
Die Unterstützung von Ordnerstrukturen rückt XAML Studio deutlich näher an einen realen Arbeitsablauf heran, anstatt nur eine einfache Testumgebung zu sein. Sie ermöglicht es, kleine Testszenarien einzurichten, die die Ressourcenstruktur einer vollständigen Anwendung nachbilden , jedoch mit der schlanken Natur einer Umgebung, die ausschließlich für die Prototypentwicklung konzipiert wurde.
All dies, kombiniert mit den übrigen Vorschau-, Bindungs- und Navigationswerkzeugen, macht XAML Studio zu einer sehr attraktiven Option für diejenigen, die ihre Bildschirme verfeinern möchten, bevor sie sie in eine umfangreiche Lösung integrieren.
Download aus dem Microsoft Store und manuelle Installation
Für die meisten Nutzer ist der einfachste Einstieg, XAML Studio direkt aus dem Microsoft Store herunterzuladen . Dort ist es als kostenlose App verfügbar. Sie müssen es also nur suchen, installieren und können innerhalb weniger Minuten mit XAML experimentieren.
Die Store-Version basiert laut vorliegenden Informationen noch auf Branch 1.1, während die aktivste Entwicklung im Entwicklungszweig (dev) des Projekt-Repositorys stattfindet. Dies ist wichtig, wenn Sie auf die neuesten Funktionen zugreifen oder zur Entwicklung beitragen möchten, da es Unterschiede zwischen der Store-Version und dem Quellcode geben kann.
Wenn Sie es vorziehen, es manuell aus dem Repository zu installieren oder selbst zu kompilieren, gibt es eine Reihe von Mindestanforderungen in Bezug auf Visual Studio, die Sie beachten sollten, um sicherzustellen, dass alles ordnungsgemäß funktioniert.
XAML Studio aus dem Quellcode kompilieren
Wenn Sie noch einen Schritt weiter gehen und XAML Studio aus dem Quellcode kompilieren möchten , müssen Sie Ihre Umgebung in Visual Studio mit spezifischen Komponenten vorbereiten, die auf die Entwicklung moderner Windows-Anwendungen ausgerichtet sind.
Zuerst müssen Sie die Windows-Anwendungsentwicklungs-Workload in Visual Studio installieren. Diese Workload umfasst alles, was mit UWP-Anwendungen, WinUI und anderen modernen XAML-Technologien auf der Windows-Plattform zusammenhängt.
Zusätzlich benötigen Sie die Tools der Universellen Windows-Plattform sowie das spezifische Windows SDK 17763. Ohne dieses SDK lassen sich einige Teile des Projekts möglicherweise nicht korrekt kompilieren. Es empfiehlt sich daher, dies im Visual Studio-Installationsprogramm zu überprüfen, bevor Sie die Projektmappe öffnen.
Sobald alle Komponenten vorhanden sind, stellen Sie beim Öffnen des Repositorys sicher, dass das Projekt „XAMLStudio“ als Startprojekt in der Projektmappe festgelegt ist. Drücken Sie anschließend einfach F5, um den Debug-Modus zu starten und die Anwendung aus Ihrer Entwicklungsumgebung heraus auszuführen.
Open-Source-Projekt, Lizenzen und Verhaltenskodex
Da XAML Studio als .NET Foundation-Projekt veröffentlicht wird , unterliegt es der MIT-Lizenz, einer der freizügigsten Open-Source-Lizenzen. Das bedeutet, dass Sie den Code weitgehend frei einsehen, verändern, wiederverwenden und dazu beitragen können, solange Sie die üblichen Namensnennungsregeln beachten.
Das Repository enthält eine NOTICE.json-Datei mit Angaben zu Drittanbietern , die den in der Anwendung selbst angezeigten Informationen zu den verwendeten externen Bibliotheken entspricht. Wenn Sie in Unternehmensumgebungen die Einhaltung von Lizenzbestimmungen sicherstellen müssen, dient diese Datei als nützliche Referenz, um zu sehen, welche Komponenten eingebunden wurden.
Das Projekt hat den Microsoft Open Source Code of Conduct übernommen . Die Teilnahme an Issues, Pull Requests oder Diskussionen setzt daher die Einhaltung klarer Verhaltensregeln voraus: Respekt, Professionalität und absolute Nulltoleranz gegenüber Belästigung. Eine FAQ-Seite zum Verhaltenskodex sowie eine Kontaktadresse ( [email protected] ) für Fragen und Probleme stehen ebenfalls zur Verfügung.
Für alle, die aktiv mitarbeiten möchten, beschreibt die Datei CONTRIBUTING.md, wie man Änderungen vorschlägt, Beiträge einreicht und Probleme meldet . Sie erläutert die empfohlene Vorgehensweise beim Arbeiten mit Branches, den Ablauf von Code-Reviews und weitere praktische Aspekte der Projektzusammenarbeit.
Telemetrie, Datenschutz und Datenerfassung
Wie viele andere moderne Anwendungen enthielt auch XAML Studio Telemetriemechanismen zur Erfassung von Nutzungsinformationen mit dem Ziel, zu verstehen, welche Funktionen am häufigsten verwendet werden, wie die Anwendung bei unterschiedlichen Dokumentgrößen funktioniert und welche Arten von Fehlern am häufigsten auftreten.
Die gute Nachricht ist, dass die Anwendung selbst eine klare Kontrolle über diese Telemetrie bietet: Auf der Einstellungsseite können Sie im Abschnitt Feedback die Option Diagnosedaten auf „Nein“ ändern, um die Datenerfassung durch die verteilte Anwendung selbst zu deaktivieren.
Es ist erwähnenswert, dass App Center – die Plattform, die als Grundlage für die Telemetrie diente – laut Projektinformationen als veraltet gilt und derzeit in Version v2 keine aktive Telemetrie verwendet wird, während über eine alternative Diagnoselösung entschieden wird.
Microsoft weist darauf hin, dass die Software Informationen über die Anwendungsnutzung erfassen kann, die zur Verbesserung von Diensten und Produkten verwendet werden können . Wenn Sie als Entwickler Funktionen nutzen, die Endnutzerdaten erfassen (z. B. Dienstintegrationen in Ihren eigenen Apps), müssen Sie geltendes Recht einhalten und entsprechende Datenschutzhinweise und -richtlinien bereitstellen, gegebenenfalls mit einem Link zur Datenschutzerklärung von Microsoft.
Marken, Logos und Verwendung von Warenzeichen
Das Repository und die Anwendung selbst können Marken und Logos von Microsoft oder anderen Drittanbietern enthalten. Im Projekt wird klargestellt, dass die Verwendung dieser Marken den offiziellen Markenrichtlinien von Microsoft unterliegt.
Wenn Sie modifizierte Versionen des Projekts oder alternative Vertriebsformen erstellen, müssen Sie dies so tun, dass keine Verwirrung gestiftet oder der Eindruck einer offiziellen Unterstützung durch Microsoft entsteht, wenn keine solche Beziehung besteht. Diese Regel ist besonders wichtig, wenn Sie Binärdateien weiterverbreiten oder Teile des Projekts in kommerzielle Produkte integrieren.
Ebenso unterliegen alle im Code verwendeten Logos oder Marken Dritter den Richtlinien dieser Dritten. Daher ist es ratsam, diese Aspekte zu überprüfen, wenn Sie beabsichtigen, große Teile der Anwendung in Ihren eigenen öffentlichen Projekten wiederzuverwenden.
Kontext: Frustration mit Visual Studio-Designern und dem Wert von XAML Studio
Die Veröffentlichung von XAML Studio als Open-Source-Projekt erfolgte zu einem Zeitpunkt, als viele Entwickler ihre Unzufriedenheit mit den visuellen Designern von Visual Studio zum Ausdruck brachten . Leistungsprobleme, Abstürze, inkonsistentes Verhalten und Schwierigkeiten beim Debuggen komplexer XAML-Codes waren wiederkehrende Beschwerden.
In diesem Szenario wird XAML Studio als eine Art Ausweg wahrgenommen: ein schlankes Tool, das speziell auf XAML-Design und -Tests ausgerichtet ist und die Reibungsverluste des traditionellen Bearbeitungs-, Kompilierungs- und Ausführungszyklus reduziert. Es soll Visual Studio nicht ersetzen, sondern dessen Stärken in dem Bereich ergänzen, in dem es am meisten schwächelt: der schnellen Iteration der Benutzeroberfläche.
Dieser Ansatz entspricht auch den Bedenken derjenigen, die Technologien wie WinUI, WPF oder UWP erlernen. Für viele kann die Kombination aus .sln-Dateien, komplexen Konfigurationen und dem Erstellen ausführbarer Dateien, insbesondere zu Beginn, eine echte Herausforderung darstellen. Ein eigenständiges Tool, das sich ausschließlich auf die XAML-Schicht konzentriert, vereinfacht den Lern- und Experimentierprozess erheblich.
Kurz gesagt, hat sich XAML Studio als hochgeschätzte Anwendung für diejenigen etabliert, die einen erheblichen Teil ihrer Zeit dem Erstellen und Verfeinern von Benutzeroberflächen im Windows-Ökosystem widmen, und bietet eine agilere und weniger umständliche Umgebung für die tägliche Bearbeitung von XAML.
Für alle, die mit C#, WPF, UWP oder WinUI anfangen, oder für diejenigen, die bereits erfahrene XAML-Experten sind, aber immer noch mit langsamen Tests und verwirrendem Debugging zu kämpfen haben, stellt ein Tool wie XAML Studio eine bedeutende Veränderung in der Herangehensweise an Prototyping , das Debuggen komplexer Bindungen und die Validierung von Designs vor der Integration in große Projekte dar – und das alles mit der Flexibilität eines Open-Source-Projekts und der Gewissheit, kontrollieren zu können, welche Daten geteilt werden und wie sie verwendet werden.
