Freigeben über

Auswählen des richtigen visuellen Struktur-Viewers für Ihre Windows-App

Eine visuelle Strukturanzeige, auch als UI-Visualisierung bezeichnet, ist ein Tool zur Überprüfung der UI-Komponenten in einer Windows-App zur Laufzeit und zur Interaktion mit ihnen.

Dies kann hilfreich für die Prototyperstellung, die Verbesserung der Benutzeroberfläche und das Debuggen von UI-Problemen durch Funktionen wie Anzeigen und Durchlaufen der Komponentenhierarchie, Hervorheben von Komponenten, Abrufen und Festlegen des Status und Deep-Linking mit zugeordnetem Code sein.

In der folgenden Tabelle sind mehrere Tools für die Ui-Visualisierung sowie die unterstützten Benutzeroberflächenframeworks und Windows-App-Plattformen aufgeführt. Eine Zusammenfassung der einzelnen Tools finden Sie nach der Tabelle.

UI-Plattform/-Framework Visual Studio – Visuelle Livestruktur Spion++ Einblicke in die Barrierefreiheit DevTools für die Chromium-Benutzeroberfläche
WinUI im Windows-App-SDK Unterstützt Nicht unterstützt Unterstützt Nicht unterstützt
WPF Unterstützt Nicht unterstützt Unterstützt Nicht unterstützt
React Native für Desktop Unterstützt Nicht unterstützt Unterstützt Unterstützt
.NET MAUI Unterstützt Nicht unterstützt Unterstützt Nicht unterstützt
WinForms Unterstützt Unterstützt Unterstützt Nicht unterstützt
WinUI 2 für UWP Unterstützt Nicht unterstützt Unterstützt Nicht unterstützt
Klassische Visual Basic-Apps Nicht unterstützt Unterstützt Nicht unterstützt Nicht unterstützt
Klassische Win32-Apps Nicht unterstützt Unterstützt Nicht unterstützt Nicht unterstützt
Chromium-basierte Apps Nicht unterstützt Nicht unterstützt Nicht unterstützt Unterstützt

Visual Studio – Visuelle Livestruktur

Die Features "Visuelle Livestruktur“ und „Live-Eigenschaften-Explorer“ werden mit Visual Studio ausgeliefert und arbeiten zusammen, um eine interaktive Laufzeitansicht der UI-Elemente in Ihrer App bereitzustellen.

Gründe für die Verwendung der visuellen Livestruktur

Verwenden Sie diese Tools beim Erstellen von Apps mit WinUI im Windows App SDK, WinUI 2 für UWP, WPF, .NET MAUI, WinForms oder React Native für Desktop.

Hinweis

Die WPF-Strukturanzeige ist ein veraltetes Feature und befindet sich nicht in der aktiven Entwicklung. Sie können den WPF Tree visualizer (WPF-Strukturschnellansicht) verwenden, um die visuelle Struktur eines WPF-Objekts zu untersuchen und die WPF-Abhängigkeitseigenschaften für die Objekte anzuzeigen, die in dieser Struktur enthalten sind.

Verwenden der visuellen Livestruktur

Xaml Hot Reload muss aktiviert sein, um die visuelle Livestruktur anzuzeigen (dieses Feature ist standardmäßig in Visual Studio 2019 und höher aktiviert).

Führen Sie Ihre App mit dem angefügten Visual Studio-Debugger (F5 oder Debuggen –> Debuggen starten) aus, um zu überprüfen, ob „XAML Hot Reload“ aktiviert ist. Wenn die App gestartet wird, sollte die In-App-Symbolleiste angezeigt werden, die bestätigt, dass XAML Hot Reload verfügbar ist (wie in der folgenden Abbildung dargestellt).

Screenshot der Visual Studio-Symbolleiste für das In-App-Debugging.

Wenn die App-Symbolleiste nicht angezeigt wird, klicken Sie auf der Visual Studio-Menüleiste auf Debuggen > Optionen > XAML Hot Reload. Stellen Sie im Dialogfeld Optionen sicher, dass die Option XAML Hot Reload aktivieren ausgewählt ist.

Screenshot des Dialogfelds „Visual Studio Debugging Options“ mit markierter Option Enable XAML Hot Reload.

Nachdem Ihre App in der Debugkonfiguration ausgeführt wird (mit dem angefügten Debugger), navigieren Sie zur Visual Studio-Menüleiste (Debuggen von> Windows > Visuelle Livestruktur). Dadurch wird der Bereich„Visuelle Livestruktur“ mit einer Echtzeitansicht des XAML-Codes geöffnet.

Standardmäßig ist die Option Nur mein XAML für die visuelle Livestruktur ausgewählt. Dies bietet eine vereinfachte Ansicht der XAML-Elementsammlung in Ihrer App und kann über die Schaltfläche Nur mein XAML anzeigen ein- oder ausgeschaltet werden, wie in der folgenden Abbildung dargestellt.

Screenshot des Visual Studio Live Visual Tree mit aktivierter Option Just My Xaml.

Funktionen der visuellen Livestruktur

Die Symbolleiste „Visuelle Livestruktur“ bietet mehrere Optionen zum Auswählen von Elementen, die zur Laufzeit über die Benutzeroberfläche Ihrer Anwendung untersucht werden sollen.

  • Auswählen eines Elements in der aktiven Anwendung. Wenn dieser Modus aktiviert ist und Sie ein Benutzeroberflächenelement in der Anwendung auswählen, wird die visuelle Livestruktur automatisch aktualisiert, um den Knoten in der Struktur anzuzeigen, die diesem Element und der zugehörigen Eigenschaften entspricht.

    Screenshot des Visual Studio Live Visual Tree mit aktivierter Option Element in der laufenden Anwendung auswählen.

  • Anzeigen der Layoutadorner in der ausgeführten Anwendung. In diesem Modus zeigt das Anwendungsfenster horizontale und vertikale Linien entlang der Grenzen eines ausgewählten Objekts und ein Rechteck, das seine Ränder ausgibt.

    Screenshot des Visual Studio Live Visual Tree mit aktivierter Option Display Layout Adorners in the Running Application.

  • Vorschau für Auswahl. Wenn dieser Modus aktiviert ist, zeigt Visual Studio die XAML an, in der das Element deklariert wurde (wenn Sie über Zugriff auf den Quellcode der Anwendung verfügen).

    Screenshot des Visual Studio Live Visual Tree mit aktivierter Auswahloption Vorschau.

Spy++

Spy++ (SPYXX.EXE) ist ein Win32-basiertes Hilfsprogramm, das mit dem Visual Studio geliefert wird und eine grafische Ansicht der Prozesse, Threads, Fenster und Fenstermeldungen des Systems bietet.

Einsatzgebiete von Spy++

Verwenden Sie Spy++ beim Erstellen einer klassischen Win32-Anwendung oder einer Anwendung, die Win32-APIs zum Zeichnen seiner UI-Elemente verwendet, z. B. WinForms und klassische Visual Basic-Apps.

Hinweis

Für .NET Framework-Apps ist Spy++ von begrenztem Nutzen, da die von Spy++ abgefangenen Fenstermeldungen und Klassen verwalteten Ereignissen und Eigenschaftswerten nicht entsprechen.

Verwenden von Spy++

Spy++ kann entweder über Visual Studio oder über die Developer-Eingabeaufforderung für Visual Studio gestartet werden.

Starten von Spy++ über Visual Studio:

  • Vergewissern Sie sich, dass Ihre Visual Studio-Installation die Komponente wichtige C++Desktopfeatures aus der Workload Desktopentwicklung mit C++ enthält. (In Visual Studio 2022 ist dieser Dienst standardmäßig installiert.) Screenshot des Visual Studio-Installationsprogramms mit aktivierter Karte Desktop-Entwicklung mit C++ und hervorgehobenem Installationsstatus der C++-Kernfunktionen für den Desktop.
  • Nach der Installation ist Spy++ über das Menü Tools verfügbar.
  • Spy++ läuft unabhängig von Visual Studio, das geschlossen werden kann, wenn es nicht mehr benötigt wird.

Starten von Spy++ über die Developer-Eingabeaufforderung für Visual Studio:

  • Starten Sie Developer-Eingabeaufforderung für Visual Studio über das Windows-Menü Start. Screenshot des Windows-Startmenüs, in dem die Developer-Eingabeaufforderung für VS 2022 hervorgehoben ist.
  • Geben Sie in der Eingabeaufforderung spyxx.exe (oder spyxx_amd64.exe für die 64-Bit-Version) ein, und drücken Sie die EINGABETASTE.

Spezifischere Informationen zur Verwendung von Spy++ aus Visual Studio finden Sie unter Spy++ Toolbar.

Funktionen von Spy++

Spy++ zeigt eine grafische Struktur der Beziehungen zwischen Systemobjekten. Dabei befindet sich das aktuelle Desktopfenster oben in der Struktur und über den untergeordneten Knoten, die alle anderen Fenster darstellen, die gemäß der Standardfensterhierarchie aufgeführt sind. Die Anwendung bietet wertvolle Einblicke in das Verhalten einer Anwendung, die nicht über den Visual C++-Debugger verfügbar ist.

Screenshot des Anwendungsfensters von Spy++.

Mit Spy++ können Sie Folgendes:

  • Suchen nach bestimmten Fenstern, Threads, Prozessen oder Nachrichten
  • Anzeigen der Eigenschaften von ausgewählten Fenstern, Threads, Prozessen oder Nachrichten
  • Auswählen von Fenstern, Threads, Prozessen oder Nachrichten direkt in der Ansicht
  • Verwenden Sie dasSuchtool, um ein Fenster mit dem Mauszeiger auszuwählen (Search –> Find Window). Screenshot des Spy++ Suchfenster-Dialogs.
  • Legen Sie eine Nachrichtenoption über komplexe Auswahlparameter für die Nachrichtenprotokollierung fest.

Die Dokumentation zu Spy++ finden Sie in der Spy++-Hilfe.

Erkenntnisse zur Barrierefreiheit für Windows – Live Inspect

Erkenntnisse zur Barrierefreiheit für Windows – Live Inspect ist eine herunterladbare Microsoft-Anwendung, die Entwicklern bei der Suche und Behebung von Problemen der Barrierefreiheit in Windows-Apps, die Benutzeroberflächenautomatisierung unterstützen, hilft. Damit können Entwickler überprüfen, ob ein Element in einer App über die richtigen Benutzeroberflächenautomatisierungs-Eigenschaften verfügt, indem sie einfach mit der Maus auf das Element zeigen oder den Tastaturfokus darauf setzen.

Verwenden der Erkenntnisse zur Barrierefreiheit – Inspect – Live

Live Inspect wird in der Regel in Verbindung mit Live Visual Tree, Spy++ und anderen Tools verwendet, wenn Sie Apps mit WinUI im Windows App SDK, WinUI 2 für UWP, WPF, .NET MAUI, WinForms oder React Native for Desktop erstellen.

Verwenden von Accessibility Insights – Inspect – Live

Accessibility Insights muss heruntergeladen und aus Accessibility Insights herunterladen installiert werden.

Funktionen von Accessibility Insights – Live Inspect

Live Inspect zeigt eine grafische Struktur der Beziehungen zwischen Systemobjekten mit Detailbereichen an, die die Eigenschaften und Muster der UI-Automatisierung enthalten, die dem ausgewählten Element entsprechen. Das aktuelle Desktopfenster wird oben in der Struktur und über den untergeordneten Knoten angezeigt, die alle anderen Fenster darstellen, die gemäß der Standardfensterhierarchie aufgeführt sind.

Live Inspect bietet folgende Möglichkeiten:

  • Überprüfen, ob ein Element in einer App über die richtigen Benutzeroberflächenautomatisierungs-Eigenschaften verfügt, indem mit der Maus auf das Element gezeigt oder der Tastaturfokus darauf gesetzt wird
  • Visuelle Hervorhebung der Elemente in der Zielanwendung
  • Testen der Steuerelemente oder Muster auf Einhaltung zahlreicher Barrierefreiheitsregeln und Richtlinien mit manuellen oder automatisierten Prüfungen

Screenshot des Tools Accessibility Insights neben einer einfachen Zielanwendung.

Weitere Informationen zu Benutzeroberflächenautomatisierung finden Sie unter Übersicht über die Benutzeroberflächenautomatisierung.

Weitere Informationen zu Accessibility Insights finden Sie unter Accessibility Insights für Windows

Chromium UI DevTools für Windows

Chromium UI DevTools für Windows ist ein Tool von Google, mit dem Sie das UI-System wie eine Webseite mit dem Frontend DevTools Inspector untersuchen können.

Verwendung von Chromium-UI DevTools für Windows

Verwenden Sie Chrome UI DevTools, wenn Sie ein Chromium-Projekt entwickeln, einschließlich progressiver Web-Apps oder Electron-Desktop-Apps. Weitere Informationen zu Electron finden Sie im Abschnitt DevTools-Erweiterung auf GitHub.

Verwendung von Chromium-UI DevTools für Windows

Chromium-UI DevTools für Windows-Codebasis muss von GitHub heruntergeladen und mit Visual Studio erstellt werden. Weitere Informationen finden Sie unter Übersicht über UI DevTools.

Funktionen von Chromium-UI DevTools für Windows

Chromium UI DevTools für Windows verwendet ein Webseiten-Front-End zum Anzeigen und Durchlaufen von Ansichten, Fenstern und anderen Benutzeroberflächenelementen.

Mit Chromium UI DevTools für Windows können Sie:

  • Verwenden einer hierarchischen UI-Elementstruktur, um UI-Elemente und deren Eigenschaften zu prüfen.
  • Verwenden des Inspect-Modus, indem ein UI-Element hervorgehoben wird, wenn Sie darauf zeigen und die Knoten des Elements in der UI-Elementstruktur anzeigen.
  • Verwenden des Bereichs „Elemente“, um eine Suchleiste zu öffnen und ein Element in der UI-Elementstruktur mithilfe von Namen-, Tag- und Formateigenschaften zu suchen.
  • Verwenden des Bereichs „Quellen“, um die Klassenheaderdatei in der Chromium-Codesuche zu öffnen und den Code aus lokalen Dateien abzurufen.

Zugehöriger Inhalt