Scegliere il corretto visualizzatore dell'albero visivo per la tua app Windows

Un visualizzatore ad albero visuale, noto anche come visualizzatore dell'interfaccia utente, è uno strumento usato per esaminare e interagire con i componenti dell'interfaccia utente in un Windows app in fase di esecuzione.

Ciò può essere utile per la creazione di prototipi, il miglioramento delle esperienze utente e il debug dei problemi dell'interfaccia utente tramite funzionalità quali la visualizzazione e l'attraversamento della gerarchia dei componenti, l'evidenziazione dei componenti, il recupero e l'impostazione dello stato e il deep linking al codice associato.

Strumenti consigliati

La tabella seguente identifica diversi strumenti di visualizzazione dell'interfaccia utente e i framework dell'interfaccia utente e le piattaforme Windows app supportati. Un riepilogo di ogni strumento è disponibile dopo la tabella.

Visual Studio - Struttura ad albero visuale attiva

Le funzionalità Live Visual Tree e Live Property Explorer vengono fornite con Visual Studio e funzionano insieme per fornire una visualizzazione interattiva in fase di esecuzione degli elementi dell'interfaccia utente nell'app.

Quando usare la struttura ad albero visuale attiva

Usa questi strumenti per la creazione di app con WinUI 3 nel Windows App SDK, WinUI per UWP per UWP, WPF, .NET MAUI, WinForms, o React Native for Desktop.

• Per altre informazioni su WinUI e WPF, vedere Esaminare le proprietà XAML durante il debug.

Come usare il Visual Tree attivo

XAML Hot Reload deve essere abilitata per visualizzare l'albero visuale attivo (questa funzionalità è abilitata per impostazione predefinita in Visual Studio 2019 e versioni successive).

Per verificare se la Hot Reload XAML è abilitata, eseguire l'app con il debugger Visual Studio collegato (F5 o Debug -> Avvia debug). All'avvio dell'app verrà visualizzata la barra degli strumenti in-app, che conferma che il Hot Reload XAML è disponibile (come illustrato nell'immagine seguente).

Se la barra degli strumenti in-app non è visualizzata, selezionare Debug > Options > XAML Hot Reload dalla barra dei menu Visual Studio. Nella finestra di dialogo Options assicurarsi che sia selezionata l'opzione Enable XAML Hot Reload.

Quando l'app è in esecuzione nella configurazione di debug (con il debugger collegato), passa alla barra dei menu di Visual Studio (Debug > Windows > Albero Visivo Live). Si aprirà il riquadro della Struttura ad albero visiva attiva con una visualizzazione in tempo reale del codice XAML.

Per impostazione predefinita, è selezionata l'opzione Just My XAML per la struttura ad albero visuale attiva. Ciò offre una visualizzazione semplificata della raccolta di elementi XAML nella tua app e può essere attivata o disattivata tramite il pulsante Show Just My XAML come illustrato nell'immagine seguente.

Funzionalità attive della struttura visuale ad albero

La barra degli strumenti Live Visual Tree fornisce diverse opzioni per la selezione di elementi da esaminare tramite l'interfaccia utente dell'applicazione durante l'esecuzione.

• Selezionare Elemento nell'applicazione in esecuzione. Con questa modalità attivata, quando si seleziona un elemento dell'interfaccia utente nell'applicazione, l'albero visuale attivo viene aggiornato automaticamente per visualizzare il nodo ed è proprietà nell'albero corrispondente a tale elemento.

  

• Mostrare i decoratori del layout nell'applicazione in esecuzione. Con questa modalità attivata, la finestra dell'applicazione mostra linee orizzontali e verticali lungo i limiti di un oggetto selezionato e un rettangolo che ne delinea i margini.

  

• Selezione anteprima. Con questa modalità attivata, Visual Studio mostra il codice XAML dove è dichiarato l'elemento (se hai accesso al codice sorgente dell'applicazione).

  

Spy++

Spy++ (SPYXX.EXE) è un'utilità basata su Win32 fornita con Visual Studio e offre una visualizzazione grafica dei processi, dei thread, delle finestre e dei messaggi delle finestre del sistema.

Quando usare Spy++

Usa Spy++ per creare un'applicazione Win32 classica o una che usa le API Win32 per disegnare i relativi elementi dell'interfaccia utente, ad esempio WinForms e Classic Visual Basic app.

Come usare Spy++

Spy++ può essere avviato da Visual Studio o dal prompt dei comandi per gli sviluppatori per Visual Studio.

Per avviare Spy++ da Visual Studio:

• Verificare che l'installazione di Visual Studio includa il componente funzionalità principali del desktop con C++ dal carico di lavoro Sviluppo desktop con C++. Questa opzione viene installata per impostazione predefinita con Visual Studio 2026.
• Quando è installato, Spy++ è disponibile dal menu Strumenti .
• Spy++ viene eseguito indipendentemente dal Visual Studio, che può essere chiuso se non è più necessario.

Per avviare Spy++ dal prompt dei comandi per gli sviluppatori per Visual Studio:

• Avvia Prompt dei comandi per sviluppatori per Visual Studio dal menu Windows Start.
• Al prompt dei comandi immettere spyxx.exe (o spyxx_amd64.exe per la versione a 64 bit) e premere INVIO.

Per informazioni più specifiche su come usare Spy++ da Visual Studio, vedere barra degli strumenti Spy++.

Funzionalità di Spy++

Spy++ visualizza un albero grafico delle relazioni tra gli oggetti di sistema, con la finestra desktop corrente nella parte superiore dell'albero e dei nodi figlio che rappresentano tutte le altre finestre elencate in base alla gerarchia di finestre standard. Può fornire informazioni dettagliate preziose sul comportamento di un'applicazione che non è disponibile tramite il debugger di Visual C++.

Con Spy++ è possibile:

• Cerca finestre, thread, processi o messaggi specifici.
• Visualizzare le proprietà dei processi o dei messaggi selezionati.
• Selezionare una finestra, un thread, un processo o un messaggio direttamente nella visualizzazione albero.
• Usa lo strumento Finder per selezionare una finestra usando il puntatore del mouse (Cerca -> Trova finestra).
• Impostare un'opzione di messaggio usando un parametro complesso di selezione del log dei messaggi.

Per la documentazione di Spy++, vedere la Guida di Spy++.

Informazioni dettagliate sull'accessibilità per Windows - Live Inspect

Accessibility Insights per Windows - Live Inspect è un'applicazione Microsoft scaricabile che consente agli sviluppatori di trovare e risolvere i problemi di accessibilità nelle app di Windows che supportano UI Automation. Consente agli sviluppatori di verificare che un elemento in un'app abbia le proprietà UI Automation corrette semplicemente passando il puntatore del mouse sull'elemento o impostando lo stato attivo della tastiera su di esso.

Quando usare Accessibility Insights - Live Inspect

Live Inspect viene in genere usato insieme a Live Visual Tree, Spy++e altri strumenti per la creazione di app con WinUI nel Windows App SDKWinUI per UWP per UWP, WPF, .NET MAUI, WinForms o React Native for Desktop.

Come usare Accessibility Insights - Live Inspect

Accessibility Insights deve essere scaricato e installato da Download Accessibility Insights.

Funzionalità di Accessibility Insights - Live Inspect

Live Inspect visualizza un albero grafico delle relazioni tra gli oggetti di sistema con riquadri di dettaglio contenenti le proprietà e i modelli UI Automation corrispondenti all'elemento selezionato. La finestra desktop corrente viene visualizzata nella parte superiore dell'albero, con i nodi figlio che rappresentano tutte le altre finestre elencate secondo la gerarchia standard delle finestre.

Con Live Inspect è possibile:

• Verificare che un elemento in un'app abbia le proprietà UI Automation corrette semplicemente passando il puntatore del mouse sull'elemento o impostando lo stato attivo della tastiera su di esso.
• Evidenzia visivamente gli elementi nell'applicazione di destinazione.
• Controlli o modelli di test con controlli manuali o automatizzati per la conformità con numerose regole di accessibilità e linee guida.

Per ulteriori informazioni su UI Automation, vedere Panoramica di UI Automation.

Per altre informazioni su Accessibility Insights, vedere Accessibility Insights for Windows (Informazioni dettagliate sull'accessibilità per Windows)

Strumenti Dev per UI di Chromium per Windows

Chromium UI DevTools per Windows è uno strumento di Google che consente di esaminare il sistema dell'interfaccia utente come una pagina Web usando il front-end DevTools Inspector.

Quando usare Chromium UI DevTools per Windows

Usa Chrome UI DevTools se stai sviluppando un progetto Chromium, incluse le progressive web app o le app desktop Electron. Per altre informazioni su Electron, vedere l'estensione DevTools su GitHub.

Come usare Chromium UI DevTools per Windows

La codebase DevTools dell'interfaccia utente chromium per Windows deve essere scaricata da GitHub e compilata con Visual Studio. Per altre informazioni, vedere la Panoramica dell'Interfaccia utente di DevTools.

Funzionalità di Chromium UI DevTools per Windows

Chromium UI DevTools per Windows usa un front-end della pagina Web per visualizzare e attraversare visualizzazioni, finestre e altri elementi dell'interfaccia utente.

Con Chromium UI DevTools per Windows è possibile:

• Usare un albero degli elementi dell'interfaccia utente gerarchico per controllare gli elementi dell'interfaccia utente e le relative proprietà.
• Usare la modalità Inspect, che evidenzia un elemento dell'interfaccia utente quando si passa il puntatore del mouse su di esso e rivela i nodi dell'elemento nell'albero degli elementi dell'interfaccia utente.
• Usare il pannello Elementi per aprire una barra di ricerca e trovare un elemento nell'albero degli elementi dell'interfaccia utente usando le proprietà name, tag e style.
• Usare il pannello Origini per aprire il file di intestazione della classe nella ricerca del codice Chromium e importare il codice dai file locali.

Contenuti correlati