Vybrat správný prohlížeč vizuálního stromu pro vaši aplikaci pro Windows

Prohlížeč vizuálního stromu, označovaný také jako vizualizér uživatelského rozhraní, je nástroj sloužící ke kontrole komponent uživatelského rozhraní a interakci s nimi v Windows app za běhu.

To může být užitečné pro vytváření prototypů, vylepšení uživatelského prostředí a ladění problémů s uživatelským rozhraním prostřednictvím funkcí, jako je zobrazení a procházení hierarchie součástí, zvýraznění komponent, získávání a nastavení stavu a hloubkové propojení s přidruženým kódem.

Doporučené nástroje

Následující tabulka uvádí několik nástrojů pro vizualizaci uživatelského rozhraní a architektur uživatelského rozhraní a Windows app platforem, které podporují. Souhrn jednotlivých nástrojů najdete za tabulkou.

Platforma nebo architektura uživatelského rozhraní	Visual Studio – Live Visual Tree	Spy++	Přehledy přístupnosti	Chromium UI DevTools
WinUI v Windows App SDK	Supported	Není podporováno	Supported	Není podporováno
WPF	Supported	Není podporováno	Supported	Není podporováno
React Native pro stolní počítače	Supported	Není podporováno	Supported	Supported
.NET MAUI	Supported	Není podporováno	Supported	Není podporováno
Formuláře WinForms	Supported	Supported	Supported	Není podporováno
WinUI pro UWP pro UWP	Supported	Není podporováno	Supported	Není podporováno
Classic Visual Basic aplikace	Není podporováno	Supported	Není podporováno	Není podporováno
Klasické aplikace Win32	Není podporováno	Supported	Není podporováno	Není podporováno
Chromiové aplikace	Není podporováno	Není podporováno	Není podporováno	Supported

Visual Studio – živý vizuální strom

Funkce Live Visual Tree a Live Property Explorer se dodávají s Visual Studio a společně fungují a poskytují interaktivní zobrazení prvků uživatelského rozhraní ve vaší aplikaci.

Kdy použít dynamický vizuální strom

Tyto nástroje použijte při vytváření aplikací pomocí WinUI 3 v Windows App SDK, WinUI pro UPW pro UWP, WPF, .NET MAUI, WinForms, nebo React Native for Desktop.

• Další informace o WinUI a WPF naleznete v tématu Kontrola vlastností XAML při ladění.

Poznámka:

Vizualizér stromu WPF je starší funkce a není aktivní ve vývoji. Vizualizér stromu WPF můžete použít k prozkoumání vizuálního stromu objektu WPF a k zobrazení vlastností WPF závislostí pro objekty obsažené v tomto stromu.

Jak používat živý vizuální strom

XAML Hot Reload musí být povolená pro zobrazení živého vizuálního stromu (tato funkce je ve výchozím nastavení povolená v Visual Studio 2019 a novějším).

Pokud chcete zkontrolovat, jestli je povolený Hot Reload XAML, spusťte aplikaci s připojeným ladicím programem Visual Studio (F5 nebo Debug -> Spustit ladění). Po spuštění aplikace by se měl zobrazit panel nástrojů v aplikaci, který potvrzuje, že Hot Reload XAML je k dispozici (jak je znázorněno na následujícím obrázku).

Pokud panel nástrojů v aplikaci nevidíte, vyberte Debug > Options > XAML Hot Reload v panelu nabídek Visual Studio. V dialogovém okně Options zkontrolujte, jestli je vybraná možnost Enable XAML Hot Reload.

Po spuštění aplikace v konfiguraci ladění (s připojeným ladicím programem) přejděte na nabídkovou lištu Visual Studio (Debug > Windows > Live Visual Tree). Tím se otevře podokno Dynamický vizuální strom s zobrazením kódu XAML v reálném čase.

Ve výchozím nastavení je vybrána možnost Just My XAML pro živý vizuální strom. To poskytuje zjednodušené zobrazení kolekce elementů XAML ve vaší aplikaci a lze ji zapnout nebo vypnout pomocí tlačítka Zobrazit jen můj XAML , jak je znázorněno na následujícím obrázku.

Možnosti živého vizuálního stromu

Panel nástrojů Dynamický vizuální strom nabízí několik možností pro výběr prvků pro prozkoumání uživatelského rozhraní aplikace za běhu.

• Vyberte prvek ve spuštěné aplikaci. Když v tomto režimu vyberete prvek uživatelského rozhraní v aplikaci, dynamický vizuální strom se automaticky aktualizuje, aby zobrazil uzel a jeho vlastnosti ve stromu odpovídající danému prvku.

  

• Zobrazit doplňky rozložení ve spuštěné aplikaci V tomto režimu se v okně aplikace zobrazují vodorovné a svislé čáry podél hranic vybraného objektu a obdélníku s ohraničením okrajů.

  

• Výběr náhledu Když je tento režim zapnutý, Visual Studio zobrazí XAML, kde je element deklarován (pokud máte access do zdrojového kódu aplikace).

  

Spy++

Spy++ (SPYXX.EXE) je nástroj založený na Win32, který se dodává s Visual Studio a poskytuje grafické zobrazení procesů systému, vláken, oken a zpráv oken.

Kdy použít Nástroj Spy++

Nástroj Spy++ použijte při vytváření klasické aplikace Win32 nebo aplikace, která používá rozhraní API Win32 k kreslení prvků uživatelského rozhraní, jako jsou WinForms a Classic Visual Basic aplikace.

Poznámka:

Pro .NET Framework aplikace je užitečnost nástroje Spy++ omezená, protože zprávy oken a třídy zachycené nástrojem Spy++ neodpovídají spravovaným událostem a hodnotám vlastností.

Jak používat Nástroj Spy++

Nástroj Spy++ lze spustit z Visual Studio nebo z příkazového řádku pro vývojáře pro Visual Studio.

Spuštění nástroje Spy++ z Visual Studio:

• Ověřte, že instalace Visual Studio zahrnuje komponentu základní funkce desktopu pro C++ z pracovní sady Vývoj desktopu s C++. (Ve výchozím nastavení se instaluje s Visual Studio 2026.)
• Po instalaci je nástroj Spy++ k dispozici v nabídce Nástroje .
• Spy++ běží nezávisle na Visual Studio, které lze zavřít, pokud už není potřeba.

Spuštění nástroje Spy++ z příkazového řádku pro vývojáře pro Visual Studio:

• Spusťte příkazový řádek Developer pro Visual Studio z nabídky Windows Start.
• Na příkazovém řádku zadejte spyxx.exe (nebo spyxx_amd64.exe pro 64bitovou verzi) a stiskněte Enter.

Konkrétnější informace o používání nástroje Spy++ z Visual Studio najdete v tématu Panel nástrojůSpy++.

Možnosti nástroje Spy++

Nástroj Spy++ zobrazuje grafický strom vztahů mezi systémovými objekty s oknem pracovní plochy na vrcholu stromu a podřízené uzly představující všechna ostatní okna uvedená podle standardní hierarchie oken. Může poskytnout cenný přehled o chování aplikace, které není dostupné prostřednictvím ladicího programu Visual C++.

Pomocí nástroje Spy++ můžete:

• Vyhledejte konkrétní okna, vlákna, procesy nebo zprávy.
• Umožňuje zobrazit vlastnosti vybraných vláken procesů nebo zpráv.
• Vyberte okno, vlákno, proces nebo zprávu přímo ve stromovém zobrazení.
• Pomocí vyhledávacího nástroje vyberte okno pomocí ukazatele myši (Hledání –> Najít okno).
• Nastavte možnost zprávy pomocí komplexního parametru volby protokolu zpráv.

Dokumentaci nástroje Spy++ naleznete v nápovědě nástroje Spy++.

Přehledy přístupnosti pro Windows – Live Inspect

Accessibility Insights pro Windows – Live Inspect je aplikace Microsoft ke stažení, která vývojářům pomůže najít a opravit problémy s přístupností v aplikacích pro Windows, které podporují UI Automation. Pomáhá vývojářům ověřit, že prvek v aplikaci má správné UI Automation vlastnosti jednoduše tak, že na něj najedete myší na prvek nebo nastavíte fokus klávesnice.

Kdy použít Přehledy přístupnosti – Live Inspect

Funkce Live Inspect se obvykle používá ve spojení se stromem Live Visual Tree, Spy++ a dalšími nástroji při vytváření aplikací pomocí WinUI v Windows App SDK, WinUI pro UPW pro UWP, WPF, .NET MAUI, WinForms nebo React Native for Desktop.

Jak používat Přehledy přístupnosti – Live Inspect

Přehledy přístupnosti je nutné stáhnout a nainstalovat ze služby Download Accessibility Insights.

Možnosti přehledů přístupnosti – Živá kontrola

Live Inspect zobrazuje grafický strom vztahů mezi systémovými objekty s podokny podrobností obsahujícími UI Automation vlastnosti a vzory odpovídající vybranému prvku. Aktuální hlavní okno se zobrazuje v horní části stromu a uzly podřízených oken reprezentující všechna ostatní okna jsou uvedeny podle standardní hierarchie oken.

Pomocí funkce Live Inspect můžete:

• Ověřte, že prvek v aplikaci má správné UI Automation vlastnosti jednoduše tak, že na něj najedete myší nebo nastavíte fokus klávesnice.
• Vizuálně zvýrazní prvky v cílové aplikaci.
• Testování ovládacích prvků nebo vzorů pomocí ručních nebo automatizovaných kontrol dodržování řady pravidel a pokynů pro usnadnění přístupu

Další informace o UI Automation najdete v tématu UI Automation Přehled.

Další informace o přehledech přístupnosti najdete v tématu Přehledy přístupnosti pro Windows.

Nástroje pro vývoj UI Chromium pro Windows

Chromium UI DevTools pro Windows je nástroj od Googlu, který umožňuje zkontrolovat systém uživatelského rozhraní jako webovou stránku pomocí front-end DevTools Inspectoru.

Kdy používat Nástroje DevTools uživatelského rozhraní Chromium pro Windows

Pokud vyvíjíte Chromium project, včetně progresivních web apps nebo desktopových aplikací Electron, použijte Chrome UI DevTools. Další informace o Electron naleznete v rozšíření DevTools na GitHub.

Jak používat Chromium UI DevTools pro Windows

Chromium UI DevTools for Windows codebase musí být stažen z GitHub a sestaven pomocí Visual Studio. Další informace najdete v přehledu nástrojů uživatelského rozhraní.

Možnosti DevTools uživatelského rozhraní Chromium pro Windows

Chromium UI DevTools ve Windows používá webové rozhraní k zobrazení a procházení pohledů, oken a dalších prvků uživatelského rozhraní.

S nástroji DevTools uživatelského rozhraní Chromium pro Windows můžete:

• Ke kontrole prvků uživatelského rozhraní a jejich vlastností použijte hierarchický strom prvků uživatelského rozhraní.
• Použijte režim kontroly, který zvýrazní prvek uživatelského rozhraní, když na něj najedete myší a odhalí uzly elementu ve stromu prvků uživatelského rozhraní.
• Pomocí panelu Prvky otevřete panel hledání a najděte prvek ve stromu prvků uživatelského rozhraní pomocí vlastností názvu, značky a stylu.
• Pomocí panelu Zdroje otevřete soubor záhlaví třídy ve vyhledávání kódu Chromium a stáhněte kód z místních souborů.

Související obsah