Outils d'édition XAML

Avec ReSharper, vous recevrez plus d'assistance au niveau de l'édition de fichiers XAML dès que vous travaillez avec Universal Windows Platform (UWP), WPF, Silverlight ou Windows Phone. Cela comprend l'analyse de la qualité du code à la volée , les refactorisations, la génération et le réarrangement du code, ainsi que la navigation rapide dans toute la solution.

Analyse de la qualité du code

Les fonctionnalités d'analyse de qualité du code de ReSharper vous aident à rapidement repérer et corriger les erreurs dans vos fichiers XAML. Voyons comment cela fonctionne avec quelques exemples.

ReSharper met en évidence les problèmes de code dans un fichier XAML

Exemple 1. Erreurs de niveau de langage XAML

Imaginons que vous travailliez sur un projet WPF où seulement le XAML 2006 est autorisé. Si ReSharper rencontre un objet générique de XAML 2009, il le met en évidence comme une erreur de langage. Si vous appuyez sur Alt+Entrée sur la mise en évidence, ReSharper affiche un correctif rapide suggérant de déclarer à la place un type hérité de System.Collections.Generic.List<string>.

Quand vous appliquez le correctif rapide, ReSharper :

  • Crée un nouveau fichier .cs où il déclare un nouveau type wrapper qui hérite de List.
  • Dans le fichier XAML d'origine, il supprime l'attribut TypeArguments, change le type de l'objet en nouveau type wrapper, et insère une nouvelle directive d'espace de nom si nécessaire.
ReSharper met en évidence les problèmes de code dans un fichier XAML

Exemple 2. Ressources non existantes

Si vous utilisez une ressource qui n'est pas encore déclarée, la mise en évidence des erreurs de ReSharper ne vous laisse pas l'oublier.

Quand vous appuyez sur Alt+Entrée, ReSharper suggère plusieurs emplacements possibles pour créer la ressource manquante.

Si le type de ressource générée n'est pas encore déclaré, pas de problème : ReSharper vous proposera la possibilité de créer soit un type CLR, soit un type XAML (par ex. : un UserControl) à partir d'une utilisation. Choisir une des deux options crée un fichier avec l'implémentation par défaut.

Correction rapide d'un commentaire mal placé en XAML

Exemple 3. Commentaires mal placés

Un commentaire placé accidentellement dans un élément sera mis en évidence par ReSharper qui vous proposera alors diverses options pour résoudre l'erreur.

Correction de qualificateur de type redondant en XAML

Exemple 4. Qualificateurs de type redondants

Si un TargetType est défini sur un setter de style, ReSharper détecte les redondances dans les qualificateurs de type et propose un correctif.

La saisie automatique intelligente de ReSharper génère des méthodes de gestion d'événements La saisie automatique intelligente de ReSharper aide à choisir les bonnes couleurs La saisie automatique de symbole d'importation de ReSharper aide à importer les types à partir des espaces de nom pas encore référencés dans votre fichier XAML

IntelliSense XAML étendu

Vous pouvez utiliser la saisie automatique de code de ReSharper dans les balises XAML. La prise en charge des CamelHumps vous aide à ajouter rapidement des attributs : saisissez simplement quelques symboles et appuyez sur Ctrl+Espace pour afficher la liste des suggestions pertinentes que la saisie automatique de symboles de ReSharper fournit.

Si vous appelez la saisie automatique intelligente en appuyant sur Ctrl+Alt+Espace, ReSharper vous propose d'autres options sensibles au contexte en fonction d'où vous êtes dans votre code. Par exemple, invoquer la saisie automatique intelligente dans une déclaration de gestionnaire d'événements proposera de générer une méthode de gestionnaire.

Si vous utilisez la saisie automatique intelligente dans un attribut, vous pouvez rapidement créer une nouvelle ressource (statique ou dynamique), un lien ou une référence à un élément statique.

Un autre avantage intéressant de la saisie automatique de code de ReSharper est la possibilité d'afficher les couleurs pour les brosses attendues dans des attributs comme Background ou OpacityMask.

ReSharper prend également en charge la saisie automatique de symbole d'importation en XAML. Cela signifie que vous pouvez compléter les types à partir d'assemblies référencés dans votre solution, mais sans directive d'importation d'espace de nom correspondant dans le fichier en cours.

Bien entendu, une fois la saisie automatique de code de ReSharper utilisée de cette manière, la directive d'importation de nom d'espace requise est automatiquement insérée.

Si vous avez un type dans un fichier XAML qui n'est pas importé pour une raison ou une autre, ReSharper peut aussi vous proposer l'option de créer rapidement la directive d'espace de nom.

Navigation à partir d'un symbole dans du code XAML Navigation vers des fichiers liés à partir d'un code XAML Structure d'un fichier XAML

Navigation et recherche

Le menu Navigate To de ReSharper fonctionne avec les éléments de code XAML de la même manière qu'avec les fichiers de code C#. Appuyer sur Alt+` sur une déclaration ou utilisation de symbole ouvre un menu contenant plusieurs destinations de navigation possibles.

La navigation via Go To File Member fonctionne dans un fichier XAML de la même manière que dans un fichier C# et permet de retrouver un élément avec un type, une clé ou un nom particulier. Encore une fois, vous n'avez pas besoin de saisir l'intégralité du nom : la prise en charge des CamelHumps minuscules vous permet de trouver WatchList en saisissant simplement wl.

Quand vous appuyez sur Ctrl+Alt+F7 dans un fichier XAML, vous obtenez la liste de tous les fichiers liés : par exemple, le fichier d'arrière plan, toute ressource référencée dans le fichier XAML actuel ou les images utilisées dans vos contrôles.

La navigation Go to Declaration (F12) et Ctrl-clic fonctionne également de la même manière dans un fichier XAML que dans un fichier de code C# ordinaire. Par exemple, vous pouvez passer le curseur sur le nom d'une classe en particulier en maintenant Ctrl enfoncé. ReSharper va souligner le nom de la classe. Cliquer sur le lien vous enverra directement à la définition de la classe.

Et comme avec les fichiers de code, la fenêtre File Structure affiche la structure du fichier XAML, ce qui vous permet de rapidement trouver l'élément de code que vous cherchez.

Vous pouvez rechercher des utilisations d'un élément XAML particulier en appuyant sur Maj+F12, ce qui invoque la commande Find Usages. ReSharper affichera tous les emplacements où l'élément est utilisé.

Vous pouvez également appuyer sur Maj+Alt+F11, ce qui mettra les utilisations en valeur et vous donnera une vue d'ensemble rapide des emplacements du fichier en cours où un symbole en particulier est utilisé.

Invocation d'un modèle pour la propriété d'une dépendance Invocation d'un modèle pour la propriété d'une dépendance

Génération des propriétés d'une dépendance

La création de propriétés d'une dépendance peut être ridiculement ennuyeuse. Encore un problème que ReSharper peut corriger : son moteur de modèle de code est assez puissant pour vous permettre de créer des extraits précis à déployer dans des propriétés de dépendances en quelques touches. Il vous faut juste saisir le nom du modèle dynamique dans l'éditeur, et vous voilà avec la paire d'une propriété et la propriété de dépendance correspondante déployée, avec une saisie automatique de code intelligente disponible dans tous les espaces réservés que vous devez remplir.

Similairement, vous pouvez demander à ReSharper de déployer des propriétés jointes, qui sont encore plus pénibles que les propriétés de dépendance ordinaires. Lors du déploiement d'un modèle dynamique, vous pouvez passer en revue toutes ses nombreuses variables et utiliser la saisie automatique de code de ReSharper quand elle est disponible.

Bien que les modèles dynamiques pour propriété de dépendance et propriété jointe ne sont actuellement pas inclus de base dans ReSharper, vous pouvez les télécharger et les importer.

Saisie automatique du code de ReSharper dans ASP.NET

Assistants à l'édition XML et XAML

ReSharper prend en charge diverses actions contextuelles qui simplifient le travail avec les syntaxes XML et peuvent être utilisées en XAML. Pour donner quelques exemples d'utilisations, vous pouvez remplacer le nom d'une balise par un nom différent, convertir un attribut en élément imbriqué, ou supprimer une balise et promouvoir son enfant d'un niveau.

Il existe également plus d'une dizaine d'actions contextuelles spécifiques au XAML. Elles vous permettent d'ajouter ou de supprimer des définitions de ligne ou de colonne, de créer des vues et des ressources, de basculer entre différents types de références de ressource, d'extraire des setters de propriété vers des styles, et bien plus encore.

Extraction de style XAML Extraction de style XAML

Refactorisations de code XAML

Dans la mesure où les éléments XAML sont essentiellement des équivalents de membres de classe ordinaires, certaines refactorisations qui fonctionnent en C# fonctionnent également en XAML. Par exemple, vous pouvez renommer ou supprimer en toute sécurité une ressource simplement en ouvrant le menu Refactor This.

Quand vous passez d'une référence à une propriété ou méthode en XAML, la gamme de refactorisations présentée dans le menu Refactor This correspond à ce à quoi vous pourriez vous attendre si vous ouvriez ce menu dans du code C# ou VB.NET.

En plus des refactorisations C# et VB.NET, certaines refactorisations sont spécifiques au XAML :

Une situation courante en XAML consiste à définir des styles inline pour plusieurs contrôles, puis à les déplacer dans une définition de style. ReSharper facilite cette opération avec sa refactorisation Extract Style.

La boîte de dialogue qui apparaît pour cette refactorisation vous aide à décider dans quelle ressource extraire les propriétés (vous pouvez choisir une ressource existante ou en créer une nouvelle), ainsi que les propriétés que vous voulez extraire.

Les refactorisations Extract Resource et Inline Resource vous permettent de déplacer virtuellement n'importe quelle affectation de propriété (y compris celles des extensions de balisage) vers une ressource et inversement, ou de sortir une définition d'une ressource et de la coller dans l'élément.

ReSharper aide à réorganiser le code XAML

Réorganisation du code

Avec les fonctions de réorganisation de code de ReSharper, vous pouvez déplacer les éléments d'un fichier XAML ou même les attributs de ces éléments. Les deux opérations sont effectuées en appuyant sur Ctrl+Alt+Maj et une flèche du pavé directionnel.

Quand vous travaillez avec des attributs, ces combinaisons de touches vous permettent de déplacer les attributs dans la balise. Les touches flèches Gauche et flèche Droite changent la position de l'attribut. Mais si vous appuyez sur les touches Haut ou Bas, vos actions affecteront toute la balise.

Les touches Haut et Bas déplacent toute la balise en fonction des autres balises. Si vous étendez la sélection en utilisant Ctrl+Alt+Droite pour englober la balise avec tout ce qu'elle contient, vous pouvez également utiliser les touches Gauche et Droite dans la même mesure, la seule différence étant que ces combinaisons vont réduire la priorité de la sélection en cours et l'insérer dans toute balise à proximité.

Remarque sur les raccourcis

Tous les raccourcis clavier indiqués sur cette page sont disponibles dans la configuration clavier "Visual Studio" par défaut de ReSharper . Pour en savoir plus sur les deux configurations clavier de ReSharper, consultez la Documentation ReSharper.