Share via

Xamarin.Forms arborescence visuelle dynamique

  • Article

Vous pouvez recevoir une vue en temps réel de votre code XAML en cours d’exécution avec l’arborescence visuelle dynamique. Il affiche une arborescence des éléments d’interface utilisateur de votre application en cours d’exécution Xamarin.Forms .

Spécifications

  • Utilisez Xamarin.Forms la version 5.0 ou ultérieure.
  • Les modifications n’Rechargement à chaud activées que (elle est activée par défaut).

Usage

Une fois la configuration requise remplie, déboguer votre application et la fenêtre Arborescence visuelle dynamique affiche la hiérarchie de l’interface utilisateur d’exécution de votre application.

  • Windows : par défaut, il apparaît à gauche de l’IDE. Si vous ne le voyez pas, utilisez Déboguer l’arborescence > visuelle Windows > Live pour l’afficher.
  • Mac : par défaut, il apparaît à droite de l’IDE. Si vous ne le voyez pas, utilisez Afficher > l’arborescence visuelle Debug Windows > Live pour l’afficher.

Utilisez l’arborescence pour inspecter la hiérarchie de l’interface utilisateur d’exécution de votre application, en développant/réduisant les nœuds pour vous concentrer sur des parties particulières de l’interface utilisateur.

Barre d’outils de l’arborescence visuelle dynamique

La vue des éléments XAML est simplifiée par défaut à l’aide de la fonctionnalité Juste mon XAML . Activez le bouton Afficher uniquement mon XAML , situé le plus à droite dans la barre d’outils Arborescence visuelle dynamique, pour afficher tous les éléments de l’interface utilisateur. Si vous le souhaitez, vous pouvez désactiver ce paramètre dans les options pour toujours afficher tous les éléments XAML.

Notes

Visual Studio pour Mac ne prend pas actuellement en charge la fonctionnalité Juste mon XAML.

La structure du CODE XAML comporte un grand nombre d’éléments qui ne vous intéressent probablement pas directement, et si vous ne connaissez pas bien le code, vous aurez peut-être du mal à naviguer dans l’arborescence pour trouver ce que vous recherchez. Par conséquent, l’arborescence visuelle dynamique a plusieurs approches qui vous permettent d’utiliser l’interface utilisateur de l’application pour vous aider à trouver l’élément que vous souhaitez examiner.

Sélectionnez l’élément dans l’application en cours d’exécution (actuellement pris en charge uniquement pour les applications UWP). Vous pouvez activer ce mode quand vous sélectionnez le bouton le plus à gauche de la barre d’outils de l’arborescence d’éléments visuels en direct. Avec ce mode activé, vous pouvez sélectionner un élément d’interface utilisateur dans l’application, et l’arborescence visuelle dynamique se met automatiquement à jour pour afficher le nœud dans l’arborescence correspondant à cet élément et ses propriétés.

Afficher les ornements de disposition dans l’application en cours d’exécution (actuellement pris en charge uniquement pour les applications UWP). Vous pouvez activer ce mode quand vous sélectionnez le bouton situé immédiatement à droite du bouton Activer la sélection. Quand l’option Afficher les ornements de disposition est activée, la fenêtre d’application affiche des lignes horizontales et verticales le long des limites de l’objet sélectionné pour vous permettre de voir sur quoi il est aligné, ainsi que des rectangles montrant les marges.

Aperçu de la sélection. 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. 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.