Delen via

De juiste visuele boomweergave voor uw Windows-app kiezen

Een visuele boomviewer, ook wel bekend als een UI-visualisator, is een hulpmiddel dat wordt gebruikt om UI-componenten in een Windows-app tijdens runtime te inspecteren en te manipuleren.

nl-NL: Dit kan behulpzaam zijn voor het maken van prototypen, het verbeteren van gebruikerservaringen en het opsporen van fouten in de gebruikersinterface via mogelijkheden zoals het weergeven en doorlopen van de hiërarchie van onderdelen, het markeren van onderdelen, het ophalen en instellen van de toestand en het diep linken naar gekoppelde code.

De volgende tabel identificeert verschillende hulpprogramma's voor ui-visualisatie en de UI-frameworks en de Windows-app-platforms die ze ondersteunen. Een samenvatting van elk hulpmiddel vindt u na de tabel.

UI-platform/raamwerk Visual Studio - Live visuele boom Spion++ Toegankelijkheidsinzichten Chromium UI DevTools
WinUI in de Windows App SDK Ondersteund Niet ondersteund Ondersteund Niet ondersteund
WPF Ondersteund Niet ondersteund Ondersteund Niet ondersteund
React Native voor Desktop Ondersteund Niet ondersteund Ondersteund Ondersteund
.NET MAUI Ondersteund Niet ondersteund Ondersteund Niet ondersteund
WinFormulieren Ondersteund Ondersteund Ondersteund Niet ondersteund
WinUI 2 voor UWP Ondersteund Niet ondersteund Ondersteund Niet ondersteund
Klassieke Visual Basic-apps Niet ondersteund Ondersteund Niet ondersteund Niet ondersteund
Klassieke Win32-apps Niet ondersteund Ondersteund Niet ondersteund Niet ondersteund
Op Chromium gebaseerde apps Niet ondersteund Niet ondersteund Niet ondersteund Ondersteund

Visual Studio - Live visuele boom

De functies Live Visual Tree en Live Property Explorer worden geleverd met Visual Studio en werken samen om een interactieve runtimeweergave van de UI-elementen in uw app te bieden.

Wanneer gebruikt u Live Visual Tree?

Gebruik deze hulpprogramma's bij het bouwen van apps met WinUI in de Windows App SDK, WinUI 2 voor UWP, WPF, .NET MAUI, WinForms of React Native voor Desktop.

Opmerking

De WPF Tree Visualizer is een verouderde functie en is niet actief in ontwikkeling. U kunt de WPF Tree visualizer gebruiken om de visuele structuur van een WPF-object te verkennen en om de WPF-afhankelijkheidseigenschappen weer te geven voor de objecten die zich in die structuur bevinden.

Live Visual Tree gebruiken

XAML Hot Reload moet zijn ingeschakeld om de Live Visual Tree weer te geven (deze functie is standaard ingeschakeld in Visual Studio 2019 en hoger).

Als u wilt controleren of XAML Hot Reload is ingeschakeld, voert u uw app uit met het gekoppelde Visual Studio-foutopsporingsprogramma (F5 of Debug -> Start Debugging). Wanneer de app wordt gestart, ziet u de werkbalk in de app, die bevestigt dat XAML Hot Reload beschikbaar is (zoals wordt weergegeven in de volgende afbeelding).

Schermopname van de in-app foutopsporingstoolbar in Visual Studio.

Als u de werkbalk in de app niet ziet, selecteert u Opties > voor foutopsporing > XAML Hot Reload in de menubalk van Visual Studio. Zorg ervoor dat in het dialoogvenster Opties de optie XAML Hot Reload inschakelen is geselecteerd.

Screenshot van het dialoogvenster Foutopsporingsopties in Visual Studio met inschakelen van XAML Hot Reload gemarkeerd.

Zodra uw app wordt uitgevoerd in de foutopsporingsconfiguratie (met het bijgevoegde foutopsporingsprogramma), gaat u naar de menubalk van Visual Studio (Fouten opsporen > in Windows > Live Visual Tree). Hiermee opent u het deelvenster Live Visual Tree met een realtime weergave van uw XAML-code.

Standaard is de optie Just My XAML voor de Live Visual Tree geselecteerd. Dit biedt een vereenvoudigde weergave van de XAML-elementverzameling in uw app en kan worden in- of uitgeschakeld via de knop Alleen mijn XAML weergeven, zoals wordt weergegeven in de volgende afbeelding.

Schermopname van de Visual Studio Live Visual Tree met de optie Just My Xaml ingeschakeld.

Mogelijkheden van Live Visual Tree

De werkbalk Live Visual Tree biedt verschillende opties voor het selecteren van elementen die u tijdens runtime kunt onderzoeken via de gebruikersinterface van uw toepassing.

  • Selecteer het element in de actieve toepassing. Wanneer u met deze modus een UI-element in de toepassing selecteert, wordt de Live Visual Tree automatisch bijgewerkt om het knooppunt weer te geven en worden de eigenschappen ervan weergegeven in de structuur die overeenkomt met dat element.

    Schermopname van de Visual Studio Live Visual Tree met de optie Select Element In The Running Application ingeschakeld.

  • Schermindeling versieringen in de lopende applicatie. Als deze modus is ingeschakeld, worden in het toepassingsvenster horizontale en verticale lijnen weergegeven langs de grenzen van een geselecteerd object en een rechthoek met een overzicht van de marges.

    Schermopname van de Visual Studio Live Visual Tree met de optie Display Layout Adorners in de optie Actieve toepassing ingeschakeld.

  • Voorbeeldselectie. Als deze modus is ingeschakeld, toont Visual Studio de XAML waar het element wordt gedeclareerd (als u toegang hebt tot de broncode van de toepassing).

    Schermopname van de Visual Studio Live Visual Tree met de optie Preview ingeschakeld.

Spy++

Spy++ (SPYXX.EXE) is een win32-hulpprogramma dat wordt geleverd met Visual Studio en een grafische weergave biedt van de processen, threads, vensters en vensterberichten van het systeem.

Wanneer gebruikt u Spy++

Gebruik Spy++ bij het bouwen van een klassieke Win32-toepassing of een toepassing die Gebruikmaakt van Win32-API's om de UI-elementen te tekenen, zoals WinForms en Klassieke Visual Basic-apps.

Opmerking

Voor .NET Framework-apps is Spy++ van beperkte bruikbaarheid omdat de vensterberichten en klassen die worden onderschept door Spy++ niet overeenkomen met beheerde gebeurtenissen en eigenschapswaarden.

Spy++ gebruiken

Spy++ kan worden gestart vanuit Visual Studio of de opdrachtprompt voor ontwikkelaars voor Visual Studio.

Spy++ starten vanuit Visual Studio:

  • Controleer of uw Visual Studio-installatie het C++ kernonderdeel desktopfuncties bevat van de desktopontwikkeling met C++ -werkbelasting. (Dit is standaard geïnstalleerd met Visual Studio 2022.) Schermopname van het Visual Studio-installatieprogramma waarin de kaart 'Desktopontwikkeling met C++' is aangevinkt en de installatiestatus van de C++ core desktopfuncties is gemarkeerd.
  • Bij installatie is Spy++ beschikbaar via het menu Extra .
  • Spy++ wordt onafhankelijk van Visual Studio uitgevoerd, die kan worden gesloten als dat niet meer nodig is.

Om Spy++ te starten vanaf de opdrachtprompt voor Ontwikkelaars voor Visual Studio:

  • Start de opdrachtprompt voor Ontwikkelaars voor Visual Studio vanuit het menu Start van Windows. Schermopname van het menu Start van Windows met de opdrachtprompt voor ontwikkelaars voor VS 2022 gemarkeerd.
  • Voer bij de opdrachtprompt spyxx.exe (of spyxx_amd64.exe voor de 64-bits versie) in en druk op Enter.

Zie Spy ++ Werkbalk voor meer specifieke informatie over het gebruik van Spy++ vanuit Visual Studio.

Mogelijkheden van Spy++

Spy++ geeft een grafische structuur weer van relaties tussen systeemobjecten, met het huidige bureaubladvenster bovenaan de structuur en onderliggende knooppunten die alle andere vensters vertegenwoordigen die worden vermeld volgens de standaardvensterhiërarchie. Het kan waardevol inzicht bieden in het gedrag van een toepassing dat niet beschikbaar is via het foutopsporingsprogramma van Visual C++ .

Schermopname van het venster van de Spy++-toepassing.

Met Spy++ kunt u:

  • Zoek naar specifieke vensters, threads, processen of berichten.
  • Bekijk de eigenschappen van geselecteerde threadsprocessen of berichten.
  • Selecteer een venster, thread, proces of bericht rechtstreeks in de structuurweergave.
  • Gebruik het zoekprogramma om een venster te selecteren met behulp van de muis aanwijzer (Zoeken -> Venster zoeken). Schermopname van het Spy++ Zoekvenster dialoogvenster.
  • Stel een berichtoptie in met behulp van een complexe parameter voor het selecteren van berichtenlogboeken.

Voor documentatie over Spy++, zie Spy++ Help.

Toegankelijkheidsinzichten voor Windows - Live Inspect

Toegankelijkheidsinzichten voor Windows - Live Inspect is een downloadbare Microsoft-toepassing waarmee ontwikkelaars toegankelijkheidsproblemen kunnen vinden en oplossen in Windows-apps die UI Automation ondersteunen. Ontwikkelaars kunnen hiermee controleren of een element in een app de juiste eigenschappen van UI Automation heeft door de muisaanwijzer over het element te bewegen of de focus op het toetsenbord in te stellen.

Wanneer Toegankelijkheidsinzichten - Live Inspect gebruiken

Live Inspect wordt doorgaans gebruikt in combinatie met Live Visual Tree, Spy++en andere hulpprogramma's bij het bouwen van apps met WinUI in de Windows App SDK, WinUI 2 voor UWP, WPF, .NET MAUI, WinForms of React Native voor Desktop.

Toegankelijkheidsinzichten gebruiken - Live Inspect

Toegankelijkheidsinzichten moeten worden gedownload en geïnstalleerd via Download Accessibility Insights.

Mogelijkheden van toegankelijkheidsinzichten - Live inspect

Live Inspect geeft een grafische structuur weer van relaties tussen systeemobjecten met detailvensters met de eigenschappen en patronen van UI Automation die overeenkomen met het geselecteerde element. Het huidige bureaubladvenster wordt bovenaan in de boomstructuur weergegeven, en de onderliggende knooppunten representeren alle andere vensters, weergegeven volgens de hiërarchie van standaardvensters.

Met Live Inspect kunt u het volgende doen:

  • Controleer of een element in een app de juiste eigenschappen van UI Automation heeft door de muisaanwijzer over het element te bewegen of de focus op het toetsenbord in te stellen.
  • Elementen in de doeltoepassing worden visueel gemarkeerd.
  • Test controles of patronen met handmatige of geautomatiseerde controles op naleving van talloze toegankelijkheidsregels en richtlijnen.

Schermopname van het hulpprogramma Toegankelijkheidsinzichten naast een eenvoudige doel-app.

Zie Overzicht van UI Automation voor meer informatie over UI Automation.

Zie Toegankelijkheidsinzichten voor Windows voor meer informatie over toegankelijkheidsinzichten

Chromium UI DevTools voor Windows

Chromium UI DevTools voor Windows is een hulpprogramma van Google waarmee u het UI-systeem kunt inspecteren zoals een webpagina met behulp van de front-end DevTools Inspector.

Wanneer gebruikt u Chromium UI DevTools voor Windows

Gebruik Chrome UI DevTools als u een Chromium-project ontwikkelt, waaronder progressieve web-apps of Electron-bureaublad-apps. Zie de DevTools-extensie op GitHub voor meer informatie over Electron.

Chromium UI DevTools voor Windows gebruiken

De Chromium UI DevTools voor Windows-codebase moet worden gedownload van GitHub en gebouwd met Visual Studio. Zie het overzicht van UI DevTools voor meer informatie.

Mogelijkheden van Chromium UI DevTools voor Windows

Chromium UI DevTools voor Windows maakt gebruik van een front-end van een webpagina om weergaven, vensters en andere UI-elementen weer te geven en te doorlopen.

Met Chromium UI DevTools voor Windows kunt u het volgende doen:

  • Gebruik een hiërarchische structuur van ui-elementen om UI-elementen en de bijbehorende eigenschappen te inspecteren.
  • Gebruik de inspect-modus, waarmee een UI-element wordt gemarkeerd wanneer u de muisaanwijzer erop plaatst en de knooppunten van het element in de structuur van het ui-element zichtbaar maakt.
  • Gebruik het deelvenster Elementen om een zoekbalk te openen en een element in de structuur van het ui-element te vinden met behulp van de eigenschappen naam, tag en stijl.
  • Gebruik het deelvenster Bronnen om het klasseheaderbestand in Chromium-code te openen en de code op te halen uit lokale bestanden.

Verwante inhoud