Inspecter les propriétés XAML en phase de débogage

Article
11/24/2023

Vous pouvez obtenir une vue en temps réel de votre code XAML en cours d’exécution à l’aide de l’arborescence d’éléments visuels en direct et de l’Explorateur de propriétés en direct. Ces outils affichent une arborescence des éléments de l'interface utilisateur de votre application XAML en cours d'exécution et montrent les propriétés d'exécution de tout élément d'interface utilisateur que vous sélectionnez.

Vous pouvez utiliser ces outils dans les configurations suivantes :

Type d’application	Système d'exploitation et outils
Applications Windows Presentation Foundation 4.0 (et versions ultérieures)	Windows 7 et ultérieur
Applications Windows universelles	Windows 10 (et versions ultérieures), avec kit SDK Windows 10 (et versions ultérieures)
Applications de l’interface utilisateur de l’application multiplateforme .NET	Windows 10 et les versions ultérieures, .NET 8 et les versions ultérieures, Visual Studio 2022 17.9 et les versions ultérieures

Examen des éléments dans l’arborescence d’éléments visuels dynamique

Commençons par une application WPF très simple qui présente une vue Liste et un bouton. Chaque fois que vous cliquez sur le bouton, un autre élément est ajouté à la liste. Les éléments avec un numéro pair sont en gris, tandis que les éléments avec un numéro impair sont en jaune.

Créer le projet

Créez une nouvelle application C# WPF (Fichier>Nouveau>Projet, tapez « C# WPF », choisissez le modèle de projet d'application WPF, nommez le projet TestXAML, puis vérifiez que la version .NET correcte apparaît dans la liste déroulante Target Framework).

Modifiez MainWindow.xaml comme suit :

<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>

Dans le fichier MainWindow.xaml.cs, ajoutez le gestionnaire de commandes suivant :

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);
}

Générez le projet et commencez le débogage. (La configuration de build doit être Debug, et non Release. Pour plus d’informations sur les configurations de build, consultez Présentation des configurations de build.)

Lorsque la fenêtre s’affiche, la barre d’outils apparaît dans votre application en cours d’exécution.
À présent, cliquez plusieurs fois sur le bouton Ajouter un élément pour ajouter de nouveaux éléments à la liste.