Inspecter les propriétés XAML en phase de débogageInspect XAML properties while debugging

Vous pouvez obtenir une vue en temps réel de votre code XAML en cours d’exécution avec la arborescence d’éléments visuels en direct et Explorateur de propriétés dynamique.You can get a real-time view of your running XAML code with the Live Visual Tree and the Live Property Explorer. 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.These tools give you a tree view of the UI elements of your running XAML application, and show you the runtime properties of any UI element you select.

Vous pouvez utiliser ces outils dans les configurations suivantes :You can use these tools in the following configurations:

Type d'applicationType of App Système d'exploitation et outilsOperating System and Tools
Applications Windows Presentation Foundation (4.0 et versions ultérieures).Windows Presentation Foundation (4.0 and above) applications Windows 7 et versions ultérieuresWindows 7 and above
Applications pour la plateforme Windows universelleUniversal Windows apps Windows 10 et versions ultérieures, avec la Windows 10 SDKWindows 10 and above, with the Windows 10 SDK

Examen des éléments dans l’arborescence d’éléments visuels dynamiqueLooking at Elements in the Live Visual Tree

Commençons par une application WPF très simple qui a un affichage de liste et un bouton.Let's get started with a very simple WPF application that has a list view and a button. Chaque fois que vous cliquez sur le bouton, un autre élément est ajouté à la liste.Every time you click the button, another item is added to the list. Les éléments avec un numéro pair sont en gris, tandis que les éléments avec un numéro impair sont en jaune.Even-numbered items are colored gray, and odd-numbered items are colored yellow.

Créez une application WPF c# (fichier > Nouveau > projet, puis sélectionnez c# et recherchez Application WPF).Create a new C# WPF application (File > New > Project, then select C# and find WPF Application). Nommez-le TestXAML.Name it TestXAML.

Modifiez MainWindow.xaml comme suit :Change MainWindow.xaml to the following:

<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 :Add the following command handler to the MainWindow.xaml.cs file:

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.Build the project and start debugging. (La configuration de build doit être Debug, et non pas Release.(The build configuration must be Debug, not Release. Pour plus d’informations sur les configurations de build, consultez présentation des Configurations de Build.)For more information about build configurations, see Understanding Build Configurations.)

Lorsque la fenêtre s’affiche, cliquez sur le ajouter un élément bouton plusieurs fois.When the window comes up, click the Add Item button a couple of times. Vous devez voir quelque chose de similaire à :You should see something like this:

Fenêtre principale de l’applicationMain window of the app

Ouvrez maintenant le arborescence d’éléments visuels en direct fenêtre (Déboguer > Windows > arborescence d’éléments visuels en direct, ou recherchez-la sur le côté gauche de l’IDE).Now open the Live Visual Tree window (Debug > Windows > Live Visual Tree, or find it along the left side of the IDE). Faites glisser en dehors de sa position d’ancrage afin que nous puissions rechercher dans cette fenêtre et propriétés Live fenêtre côte à côte.Drag it away from its docking position so we can look at this window and the Live Properties window side by side. Dans le arborescence d’éléments visuels en direct fenêtre, développez le ContentPresenter nœud.In the Live Visual Tree window, expand the ContentPresenter node. Il doit contenir des nœuds pour le bouton et la zone de liste.It should contain nodes for the button and the list box. Développez la zone de liste (, puis le ScrollContentPresenter et ItemsPresenter) pour rechercher des éléments de zone de la liste.Expand the list box (and then the ScrollContentPresenter and the ItemsPresenter) to find the list box items. La fenêtre doit ressembler à ceci :The window should look like this:

ListBoxItem dans l’arborescence d’éléments visuels en directListBoxItems in the Live Visual Tree

Revenez à la fenêtre d'application et ajoutez quelques éléments.Go back to the application window and add a few more items. Vous devriez voir plus d’éléments de zone de liste dans le arborescence d’éléments visuels en direct.You should see more list box items appear in the Live Visual Tree.

Maintenant nous allons examiner les propriétés de l’un des éléments de la zone de liste.Now let's look at the properties of one of the list box items. Sélectionnez le premier élément de zone de liste dans le arborescence d’éléments visuels en direct et cliquez sur le afficher les propriétés icône dans la barre d’outils.Select the first list box item in the Live Visual Tree and click the Show Properties icon on the toolbar. Le Explorateur de propriétés dynamique doit apparaître.The Live Property Explorer should appear. Notez que la contenu champ est « Item1 » et le arrière-plan champ est #ffffffe0 (jaune clair).Note that the Content field is "Item1", and the Background field is #FFFFFFE0 (light yellow). Revenez à la arborescence d’éléments visuels en direct et sélectionnez le deuxième élément de zone de liste.Go back to the Live Visual Tree and select the second list box item. Le Explorateur de propriétés dynamique doit montrer que le contenu champ est « Item2 » et le arrière-plan champ est #ffd3d3d3 (gris clair ).The Live Property Explorer should show that the Content field is "Item2", and the Background field is #FFD3D3D3 (light gray).

La structure réelle du code XAML a un grand nombre d’éléments qui vous intéressent probablement pas directement, et si vous ne connaissez pas bien le code vous pouvez avoir des difficultés à parcourir l’arborescence pour trouver ce que vous cherchez.The actual structure of the XAML has a lot of elements that you're probably not directly interested in, and if you don't know the code well you might have a hard time navigating the tree to find what you're looking for. Par conséquent, le arborescence d’éléments visuels en direct a quelques méthodes permettant d’utiliser l’interface utilisateur de l’application pour vous aider à trouver l’élément que vous souhaitez examiner.So the Live Visual Tree has a couple of ways that let you use the application's UI to help you find the element you want to examine.

Activer la sélection dans l’application en cours d’exécution.Enable selection in the running application. Vous pouvez activer ce mode lorsque vous sélectionnez le bouton gauche sur la arborescence d’éléments visuels en direct barre d’outils.You can enable this mode when you select the leftmost button on the Live Visual Tree toolbar. Avec ce mode est activé, vous pouvez sélectionner un élément d’interface utilisateur dans l’application et le arborescence d’éléments visuels en direct (et visionneuse de propriétés dynamique) met à jour automatiquement pour afficher le nœud dans l’arborescence correspondant à cet élément, et ses propriétés.With this mode on, you can select a UI element in the application, and the Live Visual Tree (and the Live Property Viewer) automatically updates to show the node in the tree corresponding to that element, and its properties.

Afficher les ornements de disposition dans l’application en cours d’exécution.Display layout adorners in the running application. Vous pouvez activer ce mode quand vous sélectionnez le bouton situé immédiatement à droite du bouton Activer la sélection.You can enable this mode when you select the button that is immediately to the right of the Enable selection button. Lorsque afficher les ornements de disposition est activé, il provoque la fenêtre d’application afficher les lignes horizontales et verticales le long des limites de l’objet sélectionné afin de voir à quoi il est aligné, ainsi que des rectangles montrant les marges.When Display layout adorners is on, it causes the application window to show horizontal and vertical lines along the bounds of the selected object so you can see what it aligns to, as well as rectangles showing the margins. Par exemple, activez les deux options activer la sélection et mise en forme , puis sélectionnez le ajouter un élément bloc de texte dans l’application.For example, turn both Enable selection and Display layout on, and select the Add Item text block in the application. Vous devez voir le nœud de bloc de texte dans le arborescence d’éléments visuels en direct et les propriétés du bloc de texte le visionneuse de propriétés dynamique, ainsi que les lignes horizontales et verticales sur les limites du bloc de texte.You should see the text block node in the Live Visual Tree and the text block properties in the Live Property Viewer, as well as the horizontal and vertical lines on the bounds of the text block.

LivePropertyViewer dans DisplayLayoutLivePropertyViewer in DisplayLayout

Aperçu de la sélection.Preview Selection. Vous pouvez activer ce mode en sélectionnant le troisième bouton en partant de la gauche dans la barre d’outils de l’arborescence d’éléments visuels dynamique.You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. Ce mode affiche le code XAML dans lequel l'élément a été déclaré, si vous avez accès au code source de l'application.This mode shows the XAML where the element was declared, if you have access to the source code of the application. Sélectionnez activer la sélection et aperçu de la sélection, puis sélectionnez le bouton dans l’application de test.Select Enable selection and Preview selection, and then you select the button in our test application. Le fichier MainWindow.xaml s'ouvre dans Visual Studio et le curseur est placé sur la ligne où le bouton est défini.The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.

Utilisation des outils XAML avec les applications en cours d'exécutionUsing XAML tools with running applications

Vous pouvez utiliser ces outils XAML même quand vous n’avez pas le code source.You can use these XAML tools even when you don't have the source code. Lorsque vous attachez à une application XAML en cours d’exécution, vous pouvez utiliser la arborescence d’éléments visuels en direct sur les éléments d’interface utilisateur de l’application trop.When you attach to a running XAML application, you can use the Live Visual Tree on the UI elements of that application too. Voici un exemple, à l’aide de la même application de test WPF que précédemment.Here's an example, using the same WPF test application we used before.

  1. Démarrer le TestXaml application dans la configuration Release.Start the TestXaml application in the Release configuration. Vous ne pouvez pas attacher à un processus qui s’exécute dans un déboguer configuration.You cannot attach to a process that is running in a Debug configuration.

  2. Ouvrez une deuxième instance de Visual Studio et cliquez sur Déboguer > Attacher au processus.Open a second instance of Visual Studio and click Debug > Attach to Process. Rechercher TestXaml.exe dans la liste des processus disponibles, puis cliquez sur attacher.Find TestXaml.exe in the list of available processes, and click Attach.

  3. L'application démarre.The application starts running.

  4. Dans la deuxième instance de Visual Studio, ouvrez le arborescence d’éléments visuels en direct (Déboguer > Windows > arborescence d’éléments visuels en direct).In the second instance of Visual Studio, open the Live Visual Tree (Debug > Windows > Live Visual Tree). Vous devez voir le TestXaml éléments d’interface utilisateur et doit être en mesure de les manipuler comme vous avez fait lors du débogage de l’application directement.You should see the TestXaml UI elements, and you should be able to manipulate them as you did while debugging the application directly.