Wählen Sie die richtige visuelle Strukturanzeige für Ihre Windows app

Ein visueller Baum-Viewer, auch bekannt als UI-Visualizer, ist ein Tool, das zum Überprüfen und Interagieren mit UI-Komponenten in einer Windows-App zur Laufzeit verwendet wird.

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, Hervorhebung von Komponenten, Abrufen und Festlegen des Zustands und Deep-Linking mit zugeordneten Code sein.

Empfohlene Tools

In der folgenden Tabelle sind mehrere Tools für die Ui-Visualisierung sowie die von ihnen unterstützten Ui-Frameworks und Windows app Plattformen aufgeführt. Eine Zusammenfassung der einzelnen Tools finden Sie nach der Tabelle.

UI-Plattform/Framework	Visual Studio - Live Visual Tree	Spy++	Barrierefreiheitserkenntnisse	Chromium UI DevTools
WinUI im Windows App SDK	Supported	Nicht unterstützt	Supported	Nicht unterstützt
WPF	Supported	Nicht unterstützt	Supported	Nicht unterstützt
React Native für Desktop	Supported	Nicht unterstützt	Supported	Supported
.NET MAUI	Supported	Nicht unterstützt	Supported	Nicht unterstützt
WinForms	Supported	Supported	Supported	Nicht unterstützt
WinUI für UWP für UWP	Supported	Nicht unterstützt	Supported	Nicht unterstützt
Classic Visual Basic Apps	Nicht unterstützt	Supported	Nicht unterstützt	Nicht unterstützt
Klassische Win32-Apps	Nicht unterstützt	Supported	Nicht unterstützt	Nicht unterstützt
Chromium-basierte Apps	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Supported

Visual Studio – Live Visual-Baum

Die Funktionen "Live Visual Tree" und "Live Property Explorer" sind in Visual Studio enthalten und arbeiten zusammen, um eine interaktive Laufzeitansicht der UI-Elemente in Ihrer App bereitzustellen.

Wann man die visuelle Live-Struktur verwendet

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

• Weitere Informationen zu WinUI in den Windows App SDK, WinUI für UWP und WPF finden Sie unter Inspect XAML-Eigenschaften beim Debuggen.
• Weitere Informationen zu .NET MAUI finden Sie unter Untersuchen Sie den visuellen Baum einer .NET MAUI-App.

Hinweis

Die WPF Tree Visualizer ist ein Legacyfeature und befindet sich nicht in der aktiven Entwicklung. Sie können die 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.

So verwenden Sie die Live Visual Tree (visuelle Live-Struktur)

XAML Hot Reload muss aktiviert sein, um die Visuelle Live-Struktur anzuzeigen (dieses Feature ist in Visual Studio 2019 und höher standardmäßig aktiviert).

Um zu überprüfen, ob XAML-Hot Reload aktiviert ist, führen Sie Ihre App mit dem angefügten Visual Studio Debugger aus (F5 oder Debug -> Debugging starten). 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).

Wenn die In-App-Symbolleiste nicht angezeigt wird, wählen Sie Debug > Optionen > XAML-Hot Reload in der Menüleiste Visual Studio aus. Stellen Sie im Dialogfeld Options sicher, dass die Option Enable XAML-Hot Reload ausgewählt ist.

Navigieren Sie nach ausführung der App in der Debugkonfiguration (mit angefügtem Debugger) zur menüleiste Visual Studio (Debug > Windows > Live Visual Tree). Dies öffnet den Bereich "Visuelle Live-Struktur" mit einer Echtzeitansicht des XAML-Codes.

Standardmäßig ist die Option "Nur mein XAML" für den visuellen Live-Baum 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.

Funktionen des Live-Visual-Trees

Die Symbolleiste "Live Visual Tree" bietet mehrere Optionen zum Auswählen von Elementen, die zur Laufzeit über die Benutzeroberfläche Ihrer Anwendung untersucht werden sollen.

• Wählen Sie "Element" in der ausgeführten Anwendung aus. Wenn Sie in diesem Modus ein UI-Element in der Anwendung auswählen, wird die Live Visual Tree automatisch aktualisiert, um den Knoten und dessen Eigenschaften im entsprechenden Element der Struktur anzuzeigen.

  

• Anzeigen von Layout-Adornern in der laufenden 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.

  

• Vorschauauswahl. Mit diesem Modus zeigt Visual Studio den XAML-Code an, in dem das Element deklariert wird (wenn Sie access zum Anwendungsquellcode haben).

  

Spy++

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

Wann sie Spy++ verwenden

Verwenden Sie Spy++ beim Erstellen einer klassischen Win32-Anwendung oder einer, die Win32-APIs verwendet, um ihre UI-Elemente wie WinForms und Classic Visual Basic Apps zu zeichnen.

Hinweis

Für .NET Framework-Apps ist Spy++ von eingeschränkter Nützlichkeit, da die von Spy++ abgefangenen Fensternachrichten und Klassen nicht verwalteten Ereignissen und Eigenschaftswerten entsprechen.

So verwenden Sie Spy++

Spy++ kann entweder von Visual Studio oder der Entwickler-Eingabeaufforderung für Visual Studio gestartet werden.

Um Spy++ von Visual Studio zu starten:

• Vergewissern Sie sich, dass Ihre Visual Studio-Installation die C++-Kerndesktopfeatures komponente aus der Desktop-Entwicklung mit C++ Workload enthält. (Dies ist standardmäßig mit Visual Studio 2022 installiert.)
• Bei der Installation ist Spy++ über das Menü "Extras " verfügbar.
• Spy++ läuft unabhängig von Visual Studio, die geschlossen werden kann, wenn sie nicht mehr benötigt wird.

So starten Sie Spy++ über die Entwickler-Eingabeaufforderung für Visual Studio:

• Starten Sie Developer-Eingabeaufforderung für Visual Studio aus dem Windows StartMenü.
• Geben Sie an 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++ von Visual Studio finden Sie unter Spy++-Symbolleiste.

Funktionen von Spy++

Spy++ zeigt einen grafischen Baum der Beziehungen zwischen Systemobjekten, mit dem aktuellen Desktopfenster oben auf dem Baum und untergeordneten Knoten, die alle anderen Fenster gemäß der Standardfensterhierarchie darstellen. Sie kann wertvolle Einblicke in das Verhalten einer Anwendung bieten, das nicht über den Visual C++-Debugger verfügbar ist.

Mit Spy++ können Sie:

• Suchen Sie nach bestimmten Fenstern, Threads, Prozessen oder Nachrichten.
• Zeigen Sie die Eigenschaften der ausgewählten Threads, Prozesse oder Nachrichten an.
• Wählen Sie ein Fenster, einen Thread, einen Prozess oder eine Nachricht direkt in der Strukturansicht aus.
• Verwenden Sie das Finder-Tool , um ein Fenster mit dem Mauszeiger auszuwählen (Suchen -> Suchfenster).
• Legen Sie eine Nachrichtenoption mithilfe eines komplexen Nachrichtenprotokollauswahlparameters fest.

For Spy++ documentation, see Spy++ Help.

Barrierefreiheitserkenntnisse für Windows – Live Inspect

Accessibility Insights for Windows – Live Inspect ist eine herunterladbare Microsoft-Anwendung, die Entwicklern helfen kann, Barrierefreiheitsprobleme in Windows-Apps zu finden und zu beheben, die UI Automation unterstützen. Es hilft Entwicklern zu überprüfen, ob ein Element in einer App über die richtigen UI Automation Eigenschaften verfügt, indem sie einfach auf das Element zeigen oder den Tastaturfokus darauf festlegen.

Wann man Accessibility Insights – Live Inspect verwendet

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

So verwenden Sie Accessibility Insights – Live Inspect

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

Funktionen von Accessibility Insights – Live Inspect

Live Inspect zeigt eine grafische Struktur der Beziehungen zwischen Systemobjekten mit Detailbereichen an, die die UI Automation Eigenschaften und Muster enthalten, die dem ausgewählten Element entsprechen. Das aktuelle Desktopfenster wird oben in der Struktur angezeigt, und untergeordnete Knoten stellen alle anderen Fenster dar, die gemäß der Standardfensterhierarchie aufgelistet sind.

Mit Live Inspect können Sie:

• Stellen Sie sicher, dass ein Element in einer App über die richtigen UI Automation Eigenschaften verfügt, indem Sie einfach auf das Element zeigen oder den Tastaturfokus darauf festlegen.
• Hebt Elemente in der Zielanwendung visuell hervor.
• Testen Sie Steuerelemente oder Muster mit manuellen oder automatisierten Prüfungen auf Einhaltung zahlreicher Barrierefreiheitsregeln und Richtlinien.

Weitere Informationen zu UI Automation finden Sie unter UI Automation Overview.

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.

Wann man die Chromium-UI DevTools für Windows verwendet

Verwenden Sie Chrome UI DevTools, wenn Sie ein Chromium-project entwickeln, einschließlich progressiver web apps oder Electron-Desktop-Apps. Weitere Informationen zu Electron finden Sie in der Erweiterung DevTools zu GitHub.

Verwenden von Chromium-UI DevTools für Windows

Die Chromium-UI DevTools für Windows-Codebase muss von GitHub heruntergeladen und mit Visual Studio erstellt werden. Weitere Informationen finden Sie in der Ü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 UI-Elementen.

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

• Verwenden Sie eine hierarchische UI-Elementstruktur, um UI-Elemente und deren Eigenschaften zu prüfen.
• Verwenden Sie den Inspect-Modus, der ein UI-Element hervorhebt, wenn Sie mit der Maus darüber fahren und die Knoten des UI-Elements in der UI-Elementstruktur anzeigen.
• Verwenden Sie den Bereich "Elemente", um eine Suchleiste zu öffnen und ein Element in der Ui-Elementstruktur mithilfe von Namen-, Tag- und Formateigenschaften zu suchen.
• Verwenden Sie den Bereich "Quellen", um die Klassenheaderdatei in der Chromium-Codesuche zu öffnen und den Code aus lokalen Dateien abzurufen.

Verwandte Inhalte