Den richtigen Baumstruktur-Viewer für Ihre Windows-App auswählen

Ein visueller Strukturbetrachter, auch als UI-Visualizer bekannt, ist ein Tool, mit dem UI-Komponenten in einer Windows-App zur Laufzeit geprüft und mit ihnen interagiert werden kann.

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 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 – 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 2 für UWP	Supported	Nicht unterstützt	Supported	Nicht unterstützt
Klassische 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 Features "Live Visual Tree" und "Live Property Explorer" werden mit Visual Studio ausgeliefert 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 im Windows App SDK, WinUI 2 für UWP, WPF, .NET MAUI, WinForms oder React Native für Desktop.

• Weitere Informationen zu WinUI im Windows App SDK, WinUI 2 für UWP und WPF finden Sie unter Überprüfen von XAML-Eigenschaften beim Debuggen.
• Weitere Informationen zu .NET MAUI finden Sie unter Untersuchen Sie den visuellen Baum einer .NET MAUI-Anwendung.

Hinweis

Die WPF-Strukturschnellansicht ist eine veraltete Funktion und wird nicht aktiv weiterentwickelt. Mit der WPF-Strukturschnellansicht können Sie die visuelle Struktur eines WPF-Objekts untersuchen und die WPF-Abhängigkeitseigenschaften für die Objekte anzeigen, die in dieser Struktur enthalten sind.

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

Xaml Hot Reload muss aktiviert sein, um die Live Visual Tree 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 "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).

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

Nachdem Ihre App in der Debugkonfiguration ausgeführt wird (mit dem angefügten Debugger), navigieren Sie zur Visual Studio-Menüleiste (Debuggen > von 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. In diesem Modus zeigt Visual Studio den XAML-Code an, in dem das Element deklariert wird (wenn Sie Zugriff auf den 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 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 nicht verwalteten Ereignissen und Eigenschaftswerten entsprechen.

So verwenden Sie Spy++

Spy++ kann entweder aus Visual Studio oder aus der Entwicklereingabeaufforderung für Visual Studio gestartet werden.

So starten Sie Spy++ von Visual Studio:

• Vergewissern Sie sich, dass Ihre Visual Studio-Installation die C++-Core-Desktopfeature-Komponente aus der Desktopentwicklung 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 die Entwickler-Eingabeaufforderung für Visual Studio über das 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++ aus Visual Studio finden Sie unter Spy++ Toolbar.

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 für Windows – Live Inspect ist eine herunterladbare Microsoft-Anwendung, die Entwicklern helfen kann, Barrierefreiheitsprobleme in Windows-Apps zu finden und zu beheben, die die Benutzeroberflächenautomatisierung unterstützen. Es hilft Entwicklern zu überprüfen, ob ein Element in einer App über die richtigen Benutzeroberflächenautomatisierungseigenschaften 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 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.

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 Eigenschaften und Muster der Benutzeroberflächenautomatisierung 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 Benutzeroberflächenautomatisierungseigenschaften 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 zur 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.

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

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 in der DevTools-Erweiterung auf GitHub.

Verwenden von Chromium-UI DevTools für Windows

Die Chromium-UI DevTools für Windows-Codebasis 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