Éditeur de code XAML

L’éditeur de code XAML de l’IDE Visual Studio inclut tous les outils dont vous avez besoin pour créer des applications WPF et UWP pour la plateforme Windows et pour Xamarin.Forms. Cet article décrit à la fois le rôle que joue l’éditeur de code lorsque vous développez des applications XAML et les fonctionnalités propres à l’éditeur de code XAML dans Visual Studio 2019.

Pour commencer, examinons l’IDE (environnement de développement intégré) avec un projet WPF ouvert. L’image suivante montre plusieurs des outils IDE clés que vous utiliserez avec l’éditeur de code XAML.

En bas à gauche de l’image dans le sens des aiguilles d’une montre, les outils d’IDE clés sont les suivants :

• La fenêtre de l’éditeur de code XAML, objet de cet article, dans laquelle vous créez et modifiez votre code.
• La fenêtre du Concepteur XAML, dans laquelle vous concevez votre interface utilisateur.
• La fenêtre ancrable Boîte à outils, dans laquelle vous ajoutez des contrôles à votre interface utilisateur.
• Le bouton Déboguer, avec lequel vous exécutez votre code et le déboguez.
  (Vous pouvez également modifier votre code en temps réel pendant que vous déboguez avec le Rechargement à chaud XAML.)
• La fenêtre Explorateur de solutions, dans laquelle vous gérez vos fichiers, projets et solutions.
• La fenêtre Propriétés, dans laquelle vous modifiez l’apparence de votre interface utilisateur et le fonctionnement des contrôles d’interface utilisateur.

Pour continuer, nous allons en apprendre plus sur l’éditeur de code XAML.

Interface utilisateur de l’éditeur de code XAML

Bien que la fenêtre de l’éditeur de code pour les applications XAML partage certains éléments d’interface utilisateur qui apparaissent également dans notre IDE standard, elle inclut également quelques fonctionnalités uniques qui facilitent le développement d’applications XAML.

Voici un aperçu de la fenêtre de l’éditeur de code XAML elle-même.

Examinons ensuite les fonctions de chacun des éléments d’interface utilisateur dans l’éditeur de code.

Première ligne

Dans la première ligne en haut de la fenêtre de code XAML, à gauche, il y a un onglet Conception, un bouton Permuter les volets, un onglet XAML et un bouton XAML contextuel.

Voici comment elles fonctionnent :

• L’onglet Conception fait passer le focus de l’éditeur de code XAML au Concepteur XAML.
• Le bouton Permuter les volets inverse l’emplacement du concepteur XAML et de l’éditeur de code XAML dans l’IDE.
• L’onglet XAML rétablit le focus sur l’éditeur de code XAML.
• Le bouton Rendre flottant le XAML crée une fenêtre d’éditeur de code XAML distincte qui se trouve en dehors de l’IDE.

En continuant à droite, il y a un bouton Fractionnement vertical, un bouton Fractionnement horizontal et un bouton Réduire le volet.

Voici comment elles fonctionnent :

• Le bouton Fractionnement vertical modifie l’emplacement du Concepteur XAML et de l’éditeur de code XAML dans l’IDE d’un alignement horizontal à un alignement vertical.
• Le bouton Fractionner horizontalement modifie l’emplacement du Concepteur XAML et de l’éditeur de code XAML dans l’IDE d’un alignement vertical à un alignement horizontal.
• Le bouton Réduire le volet vous permet de réduire ce qui se trouve dans le volet inférieur, qu’il s’agisse de l’éditeur de code ou du concepteur. (Pour restaurer le volet inférieur, choisissez à nouveau le même bouton, qui est maintenant nommé bouton Développer le volet.)

Deuxième ligne

Dans la deuxième ligne en haut de la fenêtre de code XAML, il existe deux listes déroulantes Fenêtre. Toutefois, si vous affichez l’info-bulle pour ces éléments d’interface utilisateur, elle les identifie en tant que « Élément : Fenêtre » et « Membre : Fenêtre ».

Les listes déroulantes Fenêtre ont différentes fonctions, comme suit :

• Élément : Fenêtre à gauche vous permet d’afficher et d’accéder aux éléments frères ou parents.

  Plus précisément, cette liste vous montre une vue de type plan qui révèle la structure de balises de votre code. Lorsque vous sélectionnez dans la liste, votre focus dans l’éditeur de code s’aligne sur la ligne de code qui inclut l’élément que vous avez sélectionné.

  

• La liste Membre : Fenêtre à droite vous permet d’afficher et d’accéder aux éléments attributs ou enfants.

  Plus précisément, elle affiche la liste des propriétés de votre code. Lorsque vous sélectionnez dans la liste, votre focus dans l’éditeur de code s’aligne sur la ligne de code qui inclut la propriété que vous avez sélectionnée.

  

Volet central, éditeur de code

Le volet central est la partie « code » de l’éditeur de code XAML. Il inclut la plupart des fonctionnalités que vous trouverez dans l’éditeur de code IDE. Nous allons aborder plusieurs des fonctionnalités de l’IDE universel qui peuvent vous aider à développer votre code XAML. Nous allons également mettre en évidence les fonctionnalités uniques à XAML dans l’IDE.

Actions rapides

Les actions rapides vous permettent de refactoriser, générer ou modifier le code en une seule action.

Par exemple, une tâche utile que vous pouvez effectuer à l’aide d’actions rapides consiste à Supprimer les instructions using inutiles du code C# sous l’onglet MainWindow.xaml.cs.

Voici comment faire :

1. Pointez sur une instruction using, choisissez l’icône d’ampoule, puis Supprimer les instructions using inutiles dans la liste déroulante.

   

2. Indiquez si vous souhaitez corriger toutes les occurrences dans le Document, le Projet ou la Solution.

3. Affichez la boîte de dialogue Aperçu, puis choisissez Appliquer.

Vous pouvez également accéder à cette fonctionnalité à partir de la barre de menus. Pour ce faire, choisissez Modifier>IntelliSense>Supprimer et trier les instructions using.

Pour plus d’informations sur les paramètres pour les instructions using, consultez la page Trier les instructions Using. Pour plus d’informations sur IntelliSense, consultez la page IntelliSense dans Visual Studio. Pour plus d’informations sur certaines des façons courantes dont les développeurs utilisent les actions rapides, consultez la page Actions rapides courantes.

Suivi des modifications

La couleur de la marge de gauche vous permet de conserver une trace des modifications effectuées dans un fichier. Voici comment les couleurs sont liées aux actions que vous effectuez :

• Les modifications que vous avez effectuées depuis l’ouverture du fichier mais que vous n’avez pas enregistrées sont signalées par une barre jaune dans la marge de gauche (appelée marge de sélection).

  

• Une fois que vous avez enregistré les modifications (mais avant la fermeture du fichier), la barre devient verte.

  

Pour activer et désactiver cette fonctionnalité, modifiez l’option Suivi des modifications dans les paramètres Éditeur de texte (Outils>Options>Éditeur de texte).

Pour plus d’informations sur le suivi des modifications, afin d’inclure les lignes ondulées (également appelées « squiggles ») qui apparaissent sous les chaînes de code, consultez la section Fonctionnalités de l’éditeur de la page Fonctionnalités de l’éditeur de code Visual Studio.

Menu contextuel du bouton droit

Lorsque vous modifiez votre code dans l’éditeur de code XAML, vous pouvez accéder à plusieurs fonctionnalités à l’aide du menu contextuel du clic droit. La plupart de ces fonctionnalités sont disponibles de manière universelle dans l’IDE Visual Studio, tandis que certaines sont spécifiques à l’utilisation d’un éditeur de code avec une fenêtre Conception.

Voici ce que chaque fonctionnalité fait et en quoi elle est utile :

• Afficher le code : ouvre la fenêtre de code du langage de programmation, qui est généralement mise en onglet à côté de la vue par défaut qui inclut la fenêtre Conception et l’éditeur de code XAML.
• Concepteur de vues : ouvre la vue par défaut qui inclut la fenêtre Conception et l’éditeur de code XAML. (Si vous êtes déjà dans la vue par défaut, cela ne modifie rien.)
• Actions rapides et refactorisations : refactorise, génère ou modifie le code à l’aide d’une seule action. Lorsque vous pointez sur le code, une icône d’ampoule s’affiche lorsqu’une action rapide ou une refactorisation est disponible.
  Voir aussi : Actions rapides et Refactoriser le code.
• Renommer... - Renomme les espaces de noms uniquement. Si vous n’avez pas d’espace de noms à renommer, vous recevez un message d’erreur indiquant « Seuls les préfixes d’espace de noms peuvent être renommés ».
• Supprimer et trier les espaces de noms : supprime les espaces de noms inutilisés, puis trie les espaces de noms qui restent.
• Aperçu de la définition - affiche un aperçu de la définition d’un type sans avoir à quitter votre emplacement actuel dans l’éditeur.
  Voir aussi : Faire un Peek de la Définition et Afficher et modifier le code à l’aide de Faire un Peek de la Définition.
• Atteindre la définition : accède à la source d’un type ou d’un membre, et ouvre le résultat dans un nouvel onglet.
  Voir aussi : Atteindre la définition.
• Entourer de... - Utilisez des extraits de code d’encerclement, qui sont ajoutés autour d’un bloc de code sélectionné.
  Voir aussi : Extraits de code d’extension et extraits de code d’encerclement.
• Insérer un extrait de code : insère un extrait de code à l’emplacement du curseur.
• Couper - Comme son nom l’indique
• Copier - Comme son nom l’indique
• Coller - Comme son nom l’indique
• Mode Plan - Développer et réduire des sections du code.
  Voir aussi : Mode Plan.
• Contrôle de code source : affichez l’historique des contributions de code à un référentiel open source.

Volet central, barre de défilement

La barre de défilement peut faire plus que faire défiler votre code. Vous pouvez également l’utiliser pour ouvrir un autre volet de l’éditeur de code. Vous pouvez également utiliser la barre de défilement pour vous aider à coder plus efficacement en lui ajoutant des annotations ou en utilisant différents modes d’affichage.

Fractionner la fenêtre de code

Dans la barre de défilement de l’éditeur de code, il y a un bouton Fractionner en haut à droite. Lorsque vous le choisissez, vous pouvez ouvrir un autre volet de l’éditeur de code. Cela est utile, car ils fonctionnent indépendamment les uns des autres, de sorte que vous pouvez les utiliser pour travailler sur du code dans différents emplacements.

Pour plus d’informations sur le fractionnement d’une fenêtre d’éditeur, consultez la page Gérer les fenêtres de l’éditeur.

Utiliser des annotations ou un mode carte

Vous pouvez également modifier l’apparence de la barre de défilement et les fonctionnalités supplémentaires qu’elle contient. Par exemple, de nombreuses personnes aiment inclure des annotations dans la barre de défilement, qui fournissent des signaux visuels comme les modifications de code, les points d’arrêt, les signets, les erreurs et la position du signe d’insertion.

D’autres apprécient l’utilisation du mode carte, qui affiche des lignes de code en miniature dans la barre de défilement. Les développeurs qui ont beaucoup de code dans un fichier peuvent trouver que le mode carte effectue le suivi des lignes de code plus efficacement que la barre de défilement par défaut.

Pour plus d’informations sur la modification des paramètres par défaut de la barre de défilement, consultez la page Personnaliser la barre de défilement.

Fonctionnalités propres à XAML

La plupart des fonctionnalités suivantes sont universellement disponibles dans l’IDE Visual Studio, mais certaines d’entre elles ont été ajoutées pour faciliter le codage pour les développeurs XAML.

Extraits de code XAML

Les extraits de code sont de petits blocs de code réutilisable que vous pouvez insérer dans un fichier de code à l’aide de la commande de menu contextuel Insérer un extrait de code ou d’une combinaison de raccourcis clavier (Ctrl+K, Ctrl+X). Nous avons amélioré IntelliSense afin qu’il prenne en charge l’affichage des extraits de code XAML, qui fonctionnent à la fois pour les extraits de code intégrés et les extraits de code personnalisés que vous ajoutez manuellement. Certains extraits de code XAML prêts à l’emploi incluent #region, Column definition, Row definition, Setter et Tag.

Pour plus d’informations, consultez les pages Extraits de code et Extraits de code C#.

Prise en charge de #region XAML

Dans Visual Studio, la prise en charge de la directive #region est disponible pour les développeurs XAML dans WPF, UWP et Xamarin.Forms. Dans Visual Studio 2019, nous continuons d’apporter des améliorations incrémentielles à la prise en charge de #region. Par exemple, dans les versions 16.4 et ultérieures, les options de #region s’affichent lorsque vous commencez à taper <!.

Vous pouvez utiliser des régions lorsque vous souhaitez regrouper des sections de votre code que vous souhaitez également développer ou réduire.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Pour plus d’informations sur les régions, consultez la page #region (référence C#). Pour plus d’informations sur le développement et la réduction des sections de code, consultez la page Mode Plan.

Commentaires XAML

Les développeurs préfèrent souvent documenter leur code à l’aide de commentaires. Vous pouvez ajouter des commentaires au code XAML qui se trouve sous l’onglet MainWindow.xaml des manières suivantes :

• Entrez <!-- avant un commentaire, puis ajoutez --> après.

• Entrez <!, puis choisissez !-- dans la liste des options.

  

• Sélectionnez le code que vous souhaitez entourer d’un commentaire, puis choisissez le bouton Commenter dans la barre d’outils de l’IDE. Pour inverser l’action, choisissez le bouton Supprimer les marques de commentaire.

  

• Sélectionnez le code que vous souhaitez entourer d’un commentaire, puis appuyez sur Ctrl+K, Ctrl+C. Pour supprimer les marques de commentaire du code sélectionné, appuyez sur Ctrl+K, Ctrl+U.

Pour plus d’informations sur l’utilisation des commentaires dans le code C# qui se trouve sous l’onglet MainWindow.xaml.cs, consultez la page Commentaires de documentation.

Ampoules XAML

Les icônes d’ampoule qui s’affichent dans votre code XAML font partie des Actions rapides que vous pouvez utiliser pour refactoriser, générer ou modifier le code.

Voici quelques exemples de la façon dont ils peuvent bénéficier de votre expérience de codage XAML :

• Supprimer les espaces de noms inutiles. Dans l’éditeur de code XAML, les espaces de noms inutiles s’affichent dans du texte grisé. Si vous placez le curseur sur une instruction using inutile, une ampoule s’affiche. Lorsque vous choisissez l’option Supprimer les espaces de noms inutiles dans la liste déroulante, vous voyez un aperçu de ce que vous pouvez supprimer.

  

• Renommer l’espace de noms. Cette fonctionnalité, disponible dans le menu contextuel du clic droit après avoir mis en surbrillance un espace de noms, permet de modifier facilement plusieurs instances d’un paramètre à la fois. Vous pouvez également accéder à cette fonctionnalité à l’aide de la barre de menus, dans Modifier>Refactoriser>Renommer, ou en appuyant sur Ctrl+R, puis Ctrl+R à nouveau.

  

  Pour plus d’informations, consultez la page Renommer une refactorisation d’un symbole de code.

XAML conditionnel pour UWP

Le XAML conditionnel permet d'utiliser la méthode ApiInformation.IsApiContractPresent dans le balisage XAML. Cela vous permet de définir des propriétés et d’instancier des objets sur la base de la présence d’une API sans avoir à utiliser le code-behind.

Pour plus d’informations, consultez la page XAML conditionnel et la page Héberger des contrôles UWP XAML dans des applications de bureau (Îles XAML).

Visualiseur de structure XAML

La fonctionnalité Visualiseur de structure dans l’éditeur de code affiche des lignes de repère de structure, qui sont des lignes en pointillés verticaux qui indiquent des éléments de balise ouverts et fermés correspondants dans votre code. Ces lignes verticales permettent de voir plus facilement où commencent et où se terminent les blocs logiques.

Pour plus d’informations, consultez la page Naviguer dans le code.

IntelliCode pour XAML

Lorsque vous ajoutez une balise XAML à votre code, vous commencez généralement par un crochet gauche <. Lorsque vous tapez ce crochet, un menu IntelliCode qui répertorie plusieurs des balises XAML les plus populaires s’affiche. Choisissez celle que vous souhaitez ajouter rapidement à votre code.

Vous pouvez reconnaître les sélections IntelliCode, car elles s’affichent en haut de la liste et sont étoilées.

Pour plus d’informations, consultez la page Vue d’ensemble d’IntelliCode.

Paramètres

Pour plus d’informations sur tous les paramètres de l’IDE Visual Studio, consultez la page Fonctionnalités de l’éditeur de code.

Paramètres facultatifs XAML

Vous pouvez utiliser la boîte de dialogue Options pour modifier les paramètres par défaut de l’éditeur de code XAML. Pour afficher les paramètres, choisissez Outils>Options>Éditeur de texte>XAML.

Note

Vous pouvez également utiliser des raccourcis clavier pour accéder à la boîte de dialogue Options. Voici comment procéder : appuyez sur Ctrl+Q pour effectuer une recherche dans l’IDE, tapez Options, puis appuyez sur Entrée. Ensuite, appuyez sur Ctrl+E pour rechercher dans la boîte de dialogue Options, tapez Éditeur de texte, appuyez sur Entrée, tapez XAML, puis appuyez sur Entrée.

Pour plus d’informations sur les raccourcis clavier, consultez la page Conseils de raccourci pour Visual Studio.

Options de l’éditeur de texte universel

Dans la boîte de dialogue Options pour XAML, les trois premiers éléments suivants sont universels pour tous les langages de programmation pris en charge par l’IDE Visual Studio. Consultez les informations liées du tableau suivant pour en savoir plus sur ces options et leur utilisation.

Nom	En savoir plus
Général	Boîte de dialogue Options : Éditeur de texte > Tous les langages
Barres de défilement	Options, Éditeur de texte, Tous les langages, Barres de défilement
Tabulations	Options, Éditeur de texte, Tous les langages, Tabulations

Options de l’éditeur de texte propres à XAML

Le tableau suivant répertorie les paramètres de la boîte de dialogue Options qui peuvent améliorer votre expérience d’édition lorsque vous développez des applications XAML. Visitez les informations liées pour en savoir plus sur ces options et comment les utiliser.

Nom	En savoir plus
Mise en forme	Options, Éditeur de texte, XAML, Mise en forme
Divers	Options, Éditeur de texte, XAML, Divers

Conseil

Le paramètre Mettre en majuscules le nom de méthode du gestionnaire d’événements dans la section Divers est particulièrement utile pour les développeurs XAML. Ce paramètre est désactivé par défaut, car il est nouveau, mais nous vous suggérons de le définir sur activé pour prendre en charge la casse appropriée dans votre code.

Étapes suivantes

Pour en savoir plus sur la modification de votre code en temps réel pendant que vous exécutez votre application en mode débogage, consultez la page Rechargement à chaud XAML.

Voir aussi

• Fonctionnalités de l’éditeur de code Visual Studio
• XAML dans les applications UWP
• XAML dans les applications Xamarin.Forms