Condividi tramite

Xamarin.Forms struttura ad albero visuale in tempo reale

  • Articolo

Puoi ricevere una visualizzazione in tempo reale del codice XAML in esecuzione con la struttura ad albero visuale attiva. Mostra una visualizzazione albero degli elementi dell'interfaccia utente dell'applicazione in esecuzione Xamarin.Forms .

Requisiti

  • Usare Xamarin.Forms la versione 5.0 o successiva.
  • Sono abilitate solo le modifiche Ricaricamento rapido (è abilitata per impostazione predefinita).

Utilizzo

Con i requisiti soddisfatti, il debug dell'app e la finestra Albero visuale live mostreranno la gerarchia dell'interfaccia utente di runtime dell'app.

  • Windows: per impostazione predefinita, viene visualizzato a sinistra dell'IDE. Se non viene visualizzato, usare Debug > albero visuale Windows > Live per visualizzarlo.
  • Mac: per impostazione predefinita, viene visualizzato a destra dell'IDE. Se non viene visualizzato, usare Visualizza > albero visuale Windows > Live debug per visualizzarlo.

Usare la visualizzazione albero per controllare la gerarchia dell'interfaccia utente di runtime per l'app, espandendo/comprimendo i nodi per concentrarsi su parti specifiche dell'interfaccia utente.

Barra degli strumenti della struttura ad albero visuale attiva

La visualizzazione degli elementi XAML è semplificata per impostazione predefinita usando la funzionalità Just My XAML . Per visualizzare tutti gli elementi dell'interfaccia utente, attivare o disattivare il pulsante Show Just My XAML (Mostra XAML just-my XAML ) nella barra degli strumenti Della struttura ad albero visuale attiva. Se vuoi disabilitare questa impostazione nelle opzioni per visualizzare sempre tutti gli elementi XAML.

Nota

Visual Studio per Mac attualmente non supporta È sufficiente la funzionalità XAML personale.

La struttura del codice XAML ha molti elementi che probabilmente non ti interessano direttamente e, se non conosci bene il codice, potresti avere difficoltà a spostarti nell'albero per trovare ciò che stai cercando. Di conseguenza, l'albero visuale attivo ha più approcci che consentono di usare l'interfaccia utente dell'applicazione per trovare l'elemento da esaminare.

Selezionare l'elemento nell'applicazione in esecuzione (attualmente supportato solo per le app UWP). È possibile abilitare questa modalità quando si seleziona il pulsante all'estrema sinistra sulla barra degli strumenti nella finestra Struttura ad albero visuale attiva. Con questa modalità attivata, è possibile selezionare un elemento dell'interfaccia utente nell'applicazione e la struttura ad albero visuale attiva viene aggiornata automaticamente per visualizzare il nodo nell'albero corrispondente a tale elemento e le relative proprietà.

Visualizza gli strumenti decorativi del layout nell'applicazione in esecuzione (attualmente supportato solo per le app UWP). È possibile abilitare questa modalità quando si seleziona il pulsante immediatamente a destra del pulsante di abilitazione della selezione. Quando l'opzione Visualizza gli Adorner layout è attivata, la finestra dell'applicazione mostra le linee orizzontali e verticali lungo i bordi dell'oggetto selezionato, per consentire di vederne l'allineamento, nonché rettangoli che mostrano i margini.

Anteprima selezione. È possibile abilitare questa modalità selezionando il terzo pulsante da sinistra sulla barra degli strumenti nella finestra Albero elementi visivi attivi. Questa modalità mostra il codice XAML in cui è stato dichiarato l'elemento, se si ha accesso al codice sorgente dell'applicazione.