Diagnostics de liaison de données XAML

Les développeurs qui travaillent sur des projets XAML doivent souvent détecter et résoudre des échecs de liaison de données XAML dans leurs applications. Il existe maintenant des outils dans Visual Studio 2019 version 16.8 ou ultérieure et Visual Studio 2022 qui vous aident à trouver ces échecs de liaison de données ennuyeux pendant le débogage de votre application. Voici des exemples d’échecs de liaison courants :

• Liaison à un nom de propriété qui n’existe pas : {Binding Wrong.Name}
• Liaison à une valeur de type incorrect, comme la liaison à une valeur booléenne quand une énumération est demandée : Visibility="{Binding IsVisible}"

Comme ces liaisons sont calculées au moment de l’exécution en utilisant la réflexion, l’éditeur XAML n’est pas toujours en mesure de les intercepter, et votre génération réussit quand même. L’échec se produit uniquement au moment de l’exécution.

La liaison de données XAML est expliquée dans ces articles :

• Pour WPF : Vue d’ensemble de la liaison de données - WPF.NET
• Pour UWP : Vue d’ensemble de la liaison de données - Applications UWP
• Pour Xamarin.Forms : Liaison de données Xamarin.Forms - Xamarin

Les échecs de liaison ont toujours été écrits dans la fenêtre de sortie de débogage dans Visual Studio. Toutefois, vous pouvez facilement les manquer dans la sortie de débogage, car elle contient d’autres informations de débogage qui font glisser les échecs de liaison hors de la vue. Voici un exemple d’échec de liaison WPF dans la fenêtre de sortie de débogage :

L’échec de liaison peut se trouver à des centaines de lignes du haut de la fenêtre, et le texte ne vous indique pas exactement la liaison qui a échoué. Vous devez donc investiguer et effectuer une recherche.

À présent, avec la fenêtre Outil Échecs de liaison XAML, vous pouvez clairement voir les liaisons qui ont échoué, ainsi que des informations pertinentes sur chaque échec, comme l’emplacement du fichier dans XAML. De plus, il existe de nombreuses fonctionnalités utiles d’investigation des échecs qui utilisent la recherche, le tri et même l’ouverture de l’éditeur XAML avec le focus défini sur la liaison ayant échoué.

Quand vous double-cliquez sur ces lignes, le code XAML source de la liaison s’ouvre, comme illustré dans l’image suivante :

Fenêtre Outil Échecs de liaison XAML

La fenêtre Outil Échecs de liaison XAML est disponible pendant le débogage. Pour l’ouvrir, accédez à Déboguer>Windows>Échecs de liaison XAML.

Vous pouvez également sélectionner le bouton Échecs de liaison dans la barre d’outils de l’application. Le nombre à côté de l’icône indique le nombre d’échecs de liaison affichés dans la fenêtre Outil.

Quand il n’y a pas d’échecs de liaison dans la fenêtre Outil, l’icône s’affiche en gris sans numéro. Cela est utile quand vous exécutez votre application. Si vous voyez l’icône devenir rouge avec un nombre, cliquez dessus pour accéder rapidement à la fenêtre Outil et voir les échecs de liaison qui se sont produits. Vous n’avez pas besoin de garder un œil sur les fenêtres Outil de Visual Studio. En cas d’échec d’une liaison, l’icône vous l’indique immédiatement.

Une icône similaire s’affiche également dans la fenêtre Outil Arborescence de visuels dynamique.

Voici une description de tous les composants de la fenêtre Outil Échecs de liaison XAML.

• La barre d’outils en haut contient les boutons suivants :
  • Effacer la liste des échecs : cela est utile si vous êtes sur le point d’afficher une nouvelle page dans votre application et que vous voulez voir s’il y a des échecs de liaison. Quand vous démarrez une nouvelle session de débogage, la liste est automatiquement effacée.
  • Supprimer les lignes sélectionnées : si un échec a été résolu ou n’est pas pertinent, vous pouvez le supprimer de la liste. Les lignes supprimées s’affichent à nouveau si la liaison échoue à nouveau.
  • Effacer tous les filtres : s’il y a des filtres dans la liste, comme une recherche de texte, ce bouton les efface et montre la liste complète.
  • Combiner les doublons : souvent, la même liaison échoue plusieurs fois d’affilée quand elle se trouve dans un modèle d’élément. Quand le bouton Combiner les doublons est sélectionné (avec un cadre autour), tous les échecs en double sont affichés dans une seule ligne. La colonne Nombre indique le nombre de fois où l’échec s’est produit.
• La zone Rechercher des échecs de liaison en haut vous permet de filtrer les échecs uniquement sur ceux qui contiennent du texte spécifique.
• Les colonnes de table, dans l’ordre, indiquent :
  • Icône qui indique si la ligne désigne une erreur ou un avertissement.
  • Icône qui montre des crochets <> si l’accès à la {Binding} ayant échoué dans XAML est pris en charge. Consultez la section Plateformes prises en charge.
  • Contexte de données : il s’agit du nom du type de l’objet source de la liaison
    • Consultez Binding.Source
  • Chemin de liaison : il s’agit du chemin de propriété de la liaison
    • Consultez Binding.Path
  • Cible : il s’agit du type et du nom de propriété où la valeur de la liaison est définie.
    • Consultez BindingExpressionBase.Target et BindingExpressionBase.TargetProperty
  • Type cible : il s’agit du type attendu de la propriété cible de la liaison.
    • Consultez BindingExpressionBase.TargetProperty
  • Description : cette colonne contient plus d’informations sur ce qui a échoué précisément pour la liaison.
  • Fichier, Ligne et Projet : s’ils sont connus, il s’agit de l’emplacement dans le code XAML où la liaison est définie.
• En cliquant avec le bouton droit sur une ligne ou plusieurs lignes sélectionnées, vous voyez un menu contextuel avec des options standard pour afficher/masquer les colonnes ou les regrouper. Les options sont les suivantes :
  • Copier tout le texte d’une ligne ou d’une seule colonne dans le Presse-papiers.
  • « Copier l’erreur d’origine » copie le texte qui s’est affiché dans la fenêtre de sortie de débogage.
  • « Voir la source » accède à la source de liaison dans le code XAML pour une ligne sélectionnée.
  • « Réinitialiser les colonnes » annule tous les changements effectués sur la visibilité et le tri des colonnes, ce qui vous permet de revenir rapidement à l’affichage d’origine.

Pour trier la liste, cliquez sur n'importe quel en-tête de colonne. Pour ajouter une colonne dans le tri, maintenez la touche Maj enfoncée et cliquez sur un autre en-tête de colonne. Pour sélectionner les colonnes qui doivent être affichées et celles qui doivent être masquées, choisissez Afficher les colonnes dans le menu contextuel. Pour modifier l'ordre dans lequel les colonnes sont affichées, faites glisser les en-têtes de votre choix vers la droite ou la gauche.

Quand vous double-cliquez sur une ligne ou que vous appuyez sur Entrée pour accéder à la source, vous pouvez appuyer sur F8 ou Maj+F8 pour descendre ou monter dans la liste des échecs de liaison. C’est comme pour les autres volets de Visual Studio qui affichent une liste.

Plateformes prises en charge

La plupart des plateformes XAML sont prises en charge si des échecs de liaison sont écrits dans la sortie de débogage. Certaines plateformes fournissent des informations sources supplémentaires au débogueur pour lui permettre d’accéder à la source.

Plateforme	Pris en charge	Accès à la source pris en charge
WPF .NET Framework	Oui	Non
WPF .NET 5.0 RC2+	Oui	Oui
UWP	Oui	Non
Bureau WinUI3	Oui	Non
MAUI (interface utilisateur d’application multiplateforme)	Oui	Non
Xamarin 4.5.0.266-pre3+	Oui	Oui
Xamarin antérieur à 4.5.0.266-pre3	Non	Non

L’option Rechargement à chaud XAML doit être activée dans Visual Studio pour que l’accès à la source fonctionne. Cette option se trouve dans la boîte de dialogue Outils>Options>Débogage :

L’accès à la source fonctionne uniquement pour les liaisons définies dans des fichiers sources XAML, et pas si elles sont créées avec du code. Vous pouvez voir clairement les lignes qui prennent en charge l’accès à la source. S’il n’y a pas d’icône de crochet dans la deuxième colonne, l’accès à la source n’est pas pris en charge, comme pour la ligne mise en surbrillance dans la capture d’écran suivante :

Pour WPF dans .NET Framework, les échecs de liaison de données doivent être écrits dans la sortie de débogage pour que le volet Échecs de liaison XAML les détecte et les affiche. Cette option se trouve dans la boîte de dialogue Outils>Options>Débogage>Fenêtre Sortie>Paramètres de trace WPF. Si le paramètre est Désactivé ou Critique, les erreurs de liaison de données ne sont pas écrites dans la sortie de débogage et ne peuvent pas être détectées. Avec WPF dans .NET 5, .NET 6 et versions ultérieures, le paramètre de sortie des liaisons de données n’affecte pas la liste des échecs.

Contenu connexe

• Recharge à chaud XAML