Válassza ki a megfelelő vizuális fa nézőt a Windows alkalmazásához

A vizuális fa megjelenítő, más néven felhasználói felületvizualizáló, olyan eszköz, amellyel futtatás közben ellenőrizheti és interakcióba léphet a Windows alkalmazás felhasználói felületének összetevőivel.

Ez hasznos lehet a prototípuskészítéshez, a felhasználói élmény javításához és a felhasználói felülettel kapcsolatos problémák hibakereséséhez olyan képességek révén, mint az összetevők hierarchiájának megtekintése és bejárása, az összetevők kiemelése, az állapot lekérése és beállítása, valamint a társított kódhoz való mély csatolás.

Ajánlott eszközök

Az alábbi táblázat számos felhasználói felületi vizualizációs eszközt, valamint az általuk támogatott felhasználói felületi keretrendszereket és Windows app platformokat azonosítja. Az egyes eszközök összegzése a táblázat után található.

Visual Studio – Élő vizualizációs fa

Az Élő vizualizációs fa és az Élő tulajdonságvizsgáló a Visual Studio része, és együttműködve biztosítanak interaktív nézetet az alkalmazás felhasználói felületének elemeiről futás közben.

Mikor érdemes élő vizualizációs fát használni?

Ezeket az eszközöket használja, amikor WinUI 3-et épít az Windows App SDK-ban, WinUI for UWP az UWP számára, WPF, .NET MAUI, WinForms, vagy React Native for Desktop alkalmazásokkal dolgozik.

• További információ a WinUI-ról és a WPF-ről: XAML-tulajdonságok vizsgálata hibakeresés közben.

Élő vizualizációs fa használata

XAML Hot Reload engedélyezni kell az élő vizualizációs fa megtekintését (ez a funkció alapértelmezés szerint engedélyezve van a 2019-Visual Studio és újabb verziókban).

Az XAML-Hot Reload engedélyezésének ellenőrzéséhez futtassa az alkalmazást a csatolt Visual Studio hibakeresővel (F5 vagy Debug -> Hibakeresés indítása). Az alkalmazás indításakor meg kell jelennie az alkalmazáson belüli eszköztárnak, amely megerősíti, hogy az XAML Hot Reload elérhető (az alábbi képen látható módon).

Ha nem látja az alkalmazáson belüli eszköztárat, válassza a Debug > Beállítások > XAML Hot Reload lehetőséget a Visual Studio menüsávon. A Options párbeszédpanelen győződjön meg arról, hogy a Enable XAML Hot Reload beállítás van kiválasztva.

Ha az alkalmazás hibakeresési konfigurációban fut (a hibakereső csatlakoztatva van), lépjen a Visual Studio menüsávra (Debug > Windows > Élő vizualizációs fa). Ekkor megnyílik az Élő vizualizációfa panel, amelyen valós idejű nézet látható az XAML-kódról.

Alapértelmezés szerint a Just My XAML (Csak saját XAML ) lehetőség van kiválasztva az élő vizualizációfához. Ez az alkalmazás XAML elemgyűjteményének egyszerűsített nézetét nyújtja, és be- és kikapcsolható a Csak az én XAML megjelenítése gombon keresztül, ahogyan az alábbi képen látható.

Az élő vizualizációs fa képességei

Az Élő vizualizációs fa eszköztár számos lehetőséget kínál az alkalmazás felhasználói felületén keresztül megvizsgálandó elemek kiválasztására futásidőben.

• Válassza ki a futó alkalmazás elemét. Ha ezzel a móddal kiválaszt egy felhasználói felületi elemet az alkalmazásban, az élő vizualizációs fa automatikusan frissül, hogy megjelenjen a csomópont és annak tulajdonságai az adott elemnek megfelelő fában.

  

• Elrendezési díszítések megjelenítése a futó alkalmazásban. Ha ez a mód be van kapcsolva, az alkalmazásablak vízszintes és függőleges vonalakat jelenít meg egy kijelölt objektum határai mentén, és egy téglalapot, amely a margóit mutatja.

  

• Előnézeti kijelölés. Ezzel a móddal a Visual Studio megjeleníti azt az XAML-t, amelyben az elem deklarálva van (ha hozzáfér az alkalmazás forráskódjához).

  A Visual Studio élő vizualizációs fa képének képernyőképe az engedélyezett.

Spy++

A Spy++ (SPYXX.EXE) egy Win32-alapú segédprogram, amely Visual Studio szállít, és grafikus képet nyújt a rendszer folyamatáról, szálakról, ablakokról és ablaküzenetekről.

Mikor érdemes használni a Spy++ et?

Használja a Spy++ alkalmazást egy klasszikus Win32-alkalmazás létrehozásakor, vagy olyannál, amely Win32 API-kat használ felhasználói felületi elemeinek , például a WinForms és a Classic Visual Basic alkalmazások rajzolásához.

A Spy++ használata

A Spy++ elindítható a Visual Studio-ból vagy a Visual Studio fejlesztői parancssorából.

A Spy++ indítása a Visual Studio-ból:

• Győződjön meg arról, hogy a Visual Studio telepítése tartalmazza a C++ asztali alapfunkciók összetevőt az Asztali fejlesztés C++-szal számítási feladattal. (Ez alapértelmezés szerint telepítve van a Visual Studio 2026-tal.)
• Ha telepítve van, a Spy++ az Eszközök menüből érhető el.
• Spy+ fut függetlenül Visual Studio, amely bezárható, ha már nincs szükség.

A Spy++ indítása a fejlesztői parancssorból Visual Studio:

• Indítsa el a Developer parancssort Visual Studio a Windows Start menüből.
• A parancssorba írja be a spyxx.exe (vagy spyxx_amd64.exe a 64 bites verzióhoz), majd nyomja le az Enter billentyűt.

A Spy++ Visual Studio használatával kapcsolatos további információkért lásd: Spy++ Eszköztár.

A Spy++ képességei

A Spy++ a rendszerobjektumok közötti kapcsolatok grafikus fáját jeleníti meg, a fa tetején az aktuális asztali ablak, a gyermekcsomópontok pedig a standard ablakhierarchiának megfelelően felsorolt összes többi ablakot képviselik. Értékes betekintést nyújt egy alkalmazás viselkedésébe, amely nem érhető el a Visual C++ hibakeresőn keresztül.

A Spy++ segítségével:

• Adott ablakokat, szálakat, folyamatokat vagy üzeneteket kereshet.
• A kijelölt szálfolyamatok vagy üzenetek tulajdonságainak megtekintése.
• Jelöljön ki egy ablakot, szálat, folyamatot vagy üzenetet közvetlenül a fa nézetben.
• A Kereső eszközzel jelöljön ki egy ablakot az egérmutatóval (Keresés –> Ablak keresése).
• Üzenet opció beállítása összetett üzenetnapló választási paraméterrel.

A Spy++ dokumentációját a Spy++ súgójában találja.

Accessibility Insights for Windows – Élő ellenőrzés

Accessibility Insights for Windows – Live Inspect egy letölthető Microsoft-alkalmazás, amely segít a fejlesztőknek a UI Automation támogató Windows-alkalmazások akadálymentességi problémáinak megtalálásában és megoldásában. Segít a fejlesztőknek annak ellenőrzésében, hogy az alkalmazás egy eleme rendelkezik-e a megfelelő UI Automation tulajdonságokkal egyszerűen úgy, hogy rámutat az elemre, vagy beállítja a billentyűzetfókuszt.

Mikor érdemes használni az Accessibility Insightst – Élő vizsgálat

A Live Inspectet általában az Élő vizualizációs fával, a Spy++-tal és más eszközökkel együtt használják, amikor WinUI-t, a Windows App SDK-ban, WinUI for UWP-t UWP-hez, WPF-et, .NET MAUI-t, WinForms-t vagy React Native for Desktop-ot építenek.

Az Accessibility Insights használata – Élő vizsgálat

Az Accessibility Insights alkalmazást le kell tölteni és telepíteni a Download Accessibility Insights oldalról.

Az Accessibility Insights képességei – Élő vizsgálat

Az Élő vizsgálat a rendszerobjektumok közötti kapcsolatok grafikus fáját jeleníti meg a kiválasztott elemnek megfelelő UI Automation tulajdonságokat és mintákat tartalmazó részletes ablaktáblákkal. Az aktuális asztali ablak a fa és a gyermekcsomópontok tetején jelenik meg, amelyek a standard ablakhierarchia szerint felsorolt összes többi ablakot képviselik.

Az Élő vizsgálattal a következőket teheti:

• Ellenőrizze, hogy az alkalmazás egy eleme rendelkezik-e a megfelelő UI Automation tulajdonságokkal egyszerűen az elem fölé rámutatva vagy a billentyűzet fókuszának beállításával.
• Vizuálisan kiemeli a célalkalmazás elemeit.
• Tesztelje a vezérlőket vagy mintákat manuális vagy automatizált ellenőrzésekkel a számos akadálymentességi szabálynak és irányelvnek való megfelelés érdekében.

A UI Automation további információért lásd: UI Automation Áttekintés.

Az Accessibility Insightsról további információt a Windows Accessibility Insights című témakörben talál.

Chromium felhasználói felület fejlesztői eszközök Windowsra

A Windowshoz készült Chromium UI DevTools egy olyan eszköz a Google-ból, amely lehetővé teszi a felhasználói felületi rendszer, mint egy weboldal vizsgálatát az előtérbeli DevTools Inspector használatával.

Mikor érdemes használni a Chromium UI DevTools for Windowst?

A Chrome UI DevTools használata Chromium-project fejlesztésekor, beleértve a progresszív web apps vagy az Electron asztali alkalmazásait. További információ az Electronről: DevTools bővítmény a GitHub.

A Chromium UI DevTools használata Windowshoz

A Windows kódbázishoz tartozó Chromium UI fejlesztői eszközöket le kell tölteni GitHub-ról, majd Visual Studioval kell építeni. További információkért tekintse meg a felhasználói felület DevTools áttekintését.

A Windowshoz készült Chromium UI DevTools képességei

A Chromium UI DevTools for Windows weblap előtérrel jeleníti meg és hatja át a nézeteket, ablakokat és egyéb felhasználói felületi elemeket.

A Windowshoz készült Chromium UI DevTools segítségével:

• A felhasználói felület elemeinek és tulajdonságainak vizsgálatához használjon hierarchikus felhasználói felületi elemfát.
• Használja a Vizsgálat módot, amely kiemeli a felhasználói felület elemeit, amikor rámutat rá, és felfedi az elem csomópontjait a felhasználói felület elem fájában.
• Az Elemek panelen megnyithat egy keresősávot, és név- és címke- és stílustulajdonságok használatával megkereshet egy elemet a felhasználói felület elemfán.
• A Források panelen nyissa meg az osztályfejlécfájlt a Chromium-kódkeresésben, és kérje le a kódot a helyi fájlokból.

Kapcsolódó tartalom