Condividi tramite

Analizzare le proprietà XAML durante il debug

  • Articolo

Gli strumenti Struttura ad albero visuale attiva ed Esplora proprietà attive offrono un punto di vista in tempo reale sul codice XAML. Questi strumenti offrono una visualizzazione albero degli elementi dell'interfaccia utente dell'applicazione XAML in esecuzione e mostrano le proprietà di runtime di qualsiasi elemento dell'interfaccia utente selezionato.

È possibile usare questi strumenti nelle configurazioni seguenti:

Tipo di app Sistema operativo e strumenti
Applicazioni Windows Presentation Foundation (4.0 e versioni successive) Windows 7 e versioni successive
App di Windows universale Windows 10 e versioni successive, con Windows 10 SDK e versioni successive
App per l'interfaccia utente di app multipiattaforma .NET Windows 10 e versioni successive, .NET 8 e versioni successive, Visual Studio 2022 17.9 e versioni successive

Esaminare gli elementi nella struttura ad albero visuale attiva

Per iniziare, verrà analizzata un'applicazione WPF molto semplice con una visualizzazione elenco e un pulsante. Ogni volta che si fa clic sul pulsante, viene aggiunto un altro elemento all'elenco. Gli elementi pari sono di colore grigio e quelli dispari sono gialli.

Creare il progetto

  1. Creare una nuova applicazione WPF C# (File>nuovo>progetto, digitare "C# WPF", scegliere il modello di progetto applicazione WPF, denominare il progetto TestXAML e quindi verificare che venga visualizzata la versione corretta di .NET nell'elenco a discesa Framework di destinazione).

  2. Modificare MainWindow.xaml come segue:

    <Window x:Class="TestXAML.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local="clr-namespace:TestXAML"
   mc:Ignorable="d"
   Title="MainWindow" Height="350" Width="525">
   <Grid>
      <Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
      <ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
   </Grid>
</Window>

  3. Aggiungere il gestore del comando seguente al file MainWindow.xaml.cs:

    int count;

private void button_Click(object sender, RoutedEventArgs e)
{
   ListBoxItem item = new ListBoxItem();
   item.Content = "Item" + ++count;
   if (count % 2 == 0)
   {
      item.Background = Brushes.LightGray;
   }
   else
   {
      item.Background = Brushes.LightYellow;
   }
   listBox.Items.Add(item);
}

  4. Compilare il progetto e avviare il debug. La configurazione della build deve essere Debug, non Release. Per altre informazioni sulle configurazioni di compilazione, vedere Informazioni sulle configurazioni di compilazione.

    Quando viene visualizzata la finestra, viene visualizzata la barra degli strumenti in-app all'interno dell'applicazione in esecuzione.

    Main window of the app

  5. A questo punto, fare clic sul pulsante Aggiungi elemento alcune volte per aggiungere nuovi elementi all'elenco.

Esaminare le proprietà XAML

  1. Aprire quindi la finestra Struttura ad albero visuale attiva facendo clic sul pulsante sinistro della barra degli strumenti in-app (o passando a Debug > albero visuale Windows > Live). Una volta aperto, trascinarlo lontano dalla posizione di ancoraggio in modo da poter guardare questa finestra e la finestra Proprietà attive affiancata.

  2. Nella finestra Struttura ad albero visuale attiva espandere il nodo ContentPresenter. Tale nodo dovrebbe contenere i nodi per il pulsante e la casella di riepilogo. Espandere la casella di riepilogo, listBox, (e quindi ScrollContentPresenter e ItemsPresenter) per individuare i relativi elementi.

    Se il nodo ContentPresenter non è visualizzato, attivare o disattivare l'icona Mostra JUST MY XAML sulla barra degli strumenti. A partire da Visual Studio 2019 versione 16.4, la visualizzazione degli elementi XAML è semplificata per impostazione predefinita usando la funzionalità Just My XAML. Puoi anche disabilitare questa impostazione nelle opzioni per visualizzare sempre tutti gli elementi XAML.

    La finestra dovrebbe essere simile alla seguente:

    ListBoxItems in the Live Visual Tree

  3. Tornare alla finestra dell'applicazione e aggiungere altri elementi. Nella finestra Albero elementi visivi attivi dovrebbero venire visualizzati altri elementi casella di riepilogo.

  4. Verranno ora esaminate le proprietà di una delle voci della casella di riepilogo.

    Selezionare il primo elemento casella di riepilogo nella finestra Struttura ad albero visuale attiva e fare clic sull'icona Mostra proprietà sulla barra degli strumenti. Dovrebbe venire visualizzata la finestra Esplora proprietà attive. Si noti che il campo Contenuto è "Item1" e il campo Colore di sfondo>è #FFFFFFE0.

  5. Tornare alla finestra Struttura ad albero visuale attiva e selezionare il secondo elemento casella di riepilogo. Esplora proprietà attive deve indicare che il campo Contenuto è "Item2" e il campo Colore sfondo>è #FFD3D3D3 (a seconda del tema).

    Nota

    Un bordo giallo intorno a una proprietà in Esplora proprietà attive indica che il valore della proprietà viene impostato tramite un'associazione, ad esempio Color = {BindingExpression}. Un bordo verde indica che il valore viene impostato usando una risorsa, ad esempio Color = {StaticResource MyBrush}.

    La struttura effettiva del codice XAML include numerosi elementi a cui probabilmente non si è direttamente interessati e se non si conosce bene il codice potrebbe risultare difficile esplorare l'albero per trovare ciò che si sta cercando. Lo strumento Struttura ad albero visuale attiva offre alcuni modi per usare l'interfaccia utente dell'applicazione per individuare l'elemento che si vuole esaminare.

    Selezionare Elemento nell'applicazione in esecuzione. È possibile abilitare questa modalità quando si seleziona questo pulsante sulla barra degli strumenti Struttura ad albero visuale attiva. Quando questa modalità è attivata, è possibile selezionare un elemento dell'interfaccia utente nell'applicazione affinché lo strumento Struttura ad albero visuale attiva (e il visualizzatore delle proprietà attive) si aggiorni automaticamente per mostrare il nodo nell'albero corrispondente a tale elemento e le relative proprietà. A partire da Visual Studio 2019 versione 16.4, è possibile configurare il comportamento della selezione degli elementi.

    Visualizzare gli strumenti decorativi del layout nell'applicazione in esecuzione. È possibile abilitare questa modalità quando si seleziona il pulsante immediatamente a destra del pulsante Seleziona elemento... . 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. Ad esempio, attivare sia Select element che Display layout (Visualizza elemento) e selezionare il blocco di testo Add Item (Aggiungi elemento) nell'applicazione. Dovrebbero venire visualizzati il nodo del blocco di testo in Struttura ad albero visuale attiva e le proprietà del blocco di testo nel visualizzatore delle proprietà attive, nonché le linee orizzontali e verticali lungo i bordi del blocco di testo.

    LivePropertyViewer in DisplayLayout

    Elemento track con stato attivo. È possibile abilitare questa modalità selezionando questo pulsante sulla barra degli strumenti struttura ad albero visuale attiva. Questa modalità mostra il codice XAML in cui è stato dichiarato l'elemento, se si ha accesso al codice sorgente dell'applicazione. Selezionare Select element (Seleziona elemento ) e Track Focused Element (Elemento con stato attivo) e quindi selezionare il pulsante nell'applicazione di test. Il file MainWindow.xaml verrà aperto in Visual Studio e il cursore verrà posizionato sulla riga in cui è definito il pulsante.

Usare gli strumenti XAML con applicazioni in esecuzione

È possibile usare questi strumenti XAML anche quando non si ha il codice sorgente. Quando si esegue l'associazione a un'applicazione XAML in esecuzione, è possibile usare lo strumento Struttura ad albero visuale attiva anche per gli elementi dell'interfaccia utente di tale applicazione. Di seguito è riportato un esempio che usa la stessa applicazione di test WPF usata in precedenza.

  1. Avviare l'applicazione TestXaml nella configurazione di rilascio. Non è possibile eseguire l'associazione a un processo in esecuzione in una configurazione di tipoDebug.

  2. Aprire una seconda istanza di Visual Studio e fare clic su Debug > Connetti a processo. Trovare TestXaml.exe nell'elenco di processi disponibili e fare clic su Associa.

  3. Viene avviata l'esecuzione dell'applicazione.

  4. Nella seconda istanza di Visual Studio aprire la struttura ad albero visuale attiva (debug > della struttura ad albero visuale di Windows > Live). Dovrebbero venire visualizzati gli elementi dell'interfaccia utente di TestXaml e dovrebbe essere possibile modificarli nello stesso modo in cui sono stati modificati direttamente durante il debug dell'applicazione.

Contenuto correlato

Scrivere ed eseguire il debug di codice XAML con Ricaricamento rapido XAML