Accueil Nos publications Blog XAML Spy, l’outil indispensable pour tout développeur d’applications

XAML Spy, l’outil indispensable pour tout développeur d’applications

XamlSpy_logoLors de la réalisation d’une application Windows Phone ou Windows 8, le design a une importance plus que primordiale et celui-ci peut représenter un pourcentage de temps très important lors de la phase de développement. En plus de Blend, l’outil de Microsoft dédié au design, XAML Spy vous permettra d’augmenter votre productivité lors de la phase de design de votre application. Petit tour d’horizon de ses capacités.

Que permet XAML Spy ?

XAML Spy, connu auparavant sous le nom de Silverlight Spy, est compatible avec les applications WPF, Silverlight, Windows Phone et Windows Store. Une fois installé sur votre machine, XAML Spy est disponible via un logiciel indépendant mais il pourra aussi s’intégrer directement dans votre Visual Studio (2012 & 2013) via une extension. Pour cet article, j’utiliserai XAML Spy dans le cadre d’une application Windows Phone 8.  Voici ce que ce logiciel permet de faire :

  • Visualiser le contenu du xap généré
  • Explorer l’IsolatedStorage
  • Obtenir des indices de performance (mémoire, frame rate)
  • Obtenir des infos sur les sensors (accéléromètre, compas et gyromètre)
  • Visualiser et éditer l’arbre XAML de votre application

Xaml Spy propose un large panel de fonctionnalités mais celle qui nous intéressera particulièrement dans cet article est la fonction permettant de visualiser et d’éditer l’arbre XAML car vous allez pouvoir modifier en direct toute propriété XAML de votre application et visualiser les changements.

Intégration dans votre projet

L’utilisation de XAML Spy au sein de votre solution est très aisée, il suffit d’un simple clic-droit sur le projet puis “Enable XAML Spy”.

xaml_spy1Cela aura pour effet de modifier le fichier csproj de l’application et de rajouter la dll de Xaml Spy à votre projet en configuration classique de Debug. Si vous souhaitez utiliser Xaml Spy avec  une autre configuration, libre à vous d’éditer le fichier csproj à la main. La désactivation de Xaml Spy se fera aussi via clic-droit sur le projet puis “Disable Xaml Spy”.

A partir de maintenant, quand vous lancerez votre application sur un émulateur ou sur le téléphone vous aurez accès à un menu Xaml Spy en overlay de votre application (ici en bleu en haut de l’application). Ce menu vous permettra de sélectionner des blocs de votre application (grid, stackpanel, image etc…) et d’obtenir ainsi tous les détails associés à ce bloc via la fenêtre du logiciel.

xaml_spy2

Dans la fenêtre de XAML Spy, toutes les propriétés XAML de l’élément sélectionné sont affichées et peuvent être éditées, même les DependencyProperty de vos UserControls. Si vous effectuez des modifications, cela impactera directement l’affichage de l’application.  Avec l’arborescence, vous pouvez rapidement cerner quel élément ou UserControl est responsable d’un mauvais alignement par exemple. xaml_spy3

J’ai par exemple ici modifié la couleur du premier bloc, la propriété Grid.ColumSpan du bloc gris et l’alignement horizontal de son texte.

xaml_spy4 Vue de l’onglet RenderTransform[/caption]

Mon retour d’expérience

Dans le cadre de ma mission (application Windows Phone 7.5/8 & Windows 8 bancaire), j’ai pu nettement augmenter ma productivité sur cette partie développement/design notamment lors de la réalisation de graphiques complexes ou d’enchainements d’animations.
Certains styles de base de contrôles possèdent aussi des marges ou des paddings cachés ce qui peut se révéler compliqué à déceler sans XAML Spy, ici en quelques secondes il est possible de visualiser quel élément est le responsable. En plus de la phase de développement, j’ai pu utiliser XAML SPY pour réaliser la recette graphique avec le graphiste et modifier en direct les éléments qu’il souhaitait.