Éditeur de code XAML

L’éditeur de code XAML dans 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 ou .NET MAUI. Cet article décrit à la fois le rôle joué par 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 outils IDE clés que vous utilisez avec l’éditeur de code XAML.

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

• Fenêtre de l’éditeur de code XAML , objet de cet article, où vous créez et modifiez votre code.
• Fenêtre concepteur XAML , où vous concevez votre interface utilisateur.
• Fenêtre ancrable Boîte à outils, où vous ajoutez des contrôles à votre interface utilisateur.
• Bouton Déboguer , où 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.)
• Fenêtre Explorateur de solutions, où vous gérez vos fichiers, projets et solutions.
• Fenêtre Propriétés , où vous modifiez l’apparence de votre interface utilisateur et la façon dont les contrôles d’interface utilisateur fonctionnent.

Pour continuer, nous allons en savoir 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 (interface utilisateur) qui apparaissent également dans notre IDE standard, il 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 de l’interface utilisateur dans l’éditeur de code.

Première ligne

Dans la première ligne située en haut de la fenêtre de code XAML, à gauche, il y a un onglet Création, un bouton Permuter les volets, un onglet XAML et un bouton Dérouler XAML.

Voici comment ils fonctionnent :

• L’onglet Création modifie le focus de l’éditeur de code XAML vers le Concepteur XAML.
• Le bouton Permuter les volets modifie 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 XAML contextuel crée une fenêtre d’éditeur de code XAML distincte qui se trouve en dehors de l’IDE.

En continuant à droite, il existe un bouton Fractionnement vertical , un bouton Fractionnement horizontal et un bouton Réduire les volets .

Voici comment ils fonctionnent :

• Le bouton Fractionnement vertical modifie l’emplacement du Concepteur XAML et l’éditeur de code XAML dans l’IDE d’un alignement horizontal vers un alignement vertical.
• Le bouton Fractionnement horizontal modifie l’emplacement du Concepteur XAML et l’éditeur de code XAML dans l’IDE d’un alignement vertical vers un alignement horizontal.
• Le bouton Réduire le volet vous permet de réduire ce qui se trouve dans le volet inférieur, que ce soit l’éditeur de code ou le 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 rangée en haut de la fenêtre de code XAML, il y a deux listes déroulantes de fenêtre. Toutefois, si vous affichez l’info-bulle pour ces éléments d’interface utilisateur, ils y sont identifiés comme « Élément : Fenêtre » et « Membre : Fenêtre ».

Les listes déroulantes "Fenêtre" ont différentes fonctions, de la manière suivante :

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

  Plus précisément, il vous montre une vue de type plan qui révèle la structure des 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 fenêtre Membre sur la droite vous aide à afficher et à accéder aux attributs ou aux éléments enfants.

  Plus précisément, il vous montre une liste des propriétés dans 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. Elle inclut la plupart des fonctionnalités que vous trouvez dans l’éditeur de code IDE. Nous allons aborder plusieurs fonctionnalités d’IDE universelles qui peuvent vous aider à développer votre code XAML. Nous allons également mettre en évidence les fonctionnalités uniques à XAML de l’IDE.

Actions rapides

Vous pouvez utiliser des actions rapides pour refactoriser, générer ou modifier du code avec une seule action.

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

Voici comment procéder :

1. Pointez sur une instruction using, choisissez l’icône d’ampoule, puis sélectionnez Supprimer les utilisations 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 utilisations.

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

Suivi des modifications

La couleur de la marge gauche vous permet de suivre les modifications que vous avez apportées dans un fichier. Voici comment les couleurs sont liées aux actions que vous effectuez :

• Les modifications que vous avez apportées depuis l’ouverture du fichier, mais non enregistrées, sont indiquées par une barre jaune sur la marge gauche (appelée marge de sélection).

  

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

  

Vous pouvez désactiver et activer cette fonctionnalité dans le voletOptions>. Développez la section Tous les paramètres>Éditeur de texte>Général, puis cochez ou décochez la case à cocher Suivre les modifications.

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

Menu contextuel clic droit

En modifiant votre code dans l'éditeur XAML, vous pouvez accéder à plusieurs fonctionnalités à l'aide du menu contextuel. La plupart de ces fonctionnalités sont disponibles universellement dans l’IDE Visual Studio, tandis que certaines sont spécifiques à l’utilisation d’un éditeur de code avec une fenêtre Création.

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

• Afficher le code : ouvre la fenêtre de code du langage de programmation, qui est généralement tabulée en regard de la vue par défaut qui inclut la fenêtre Création et l’éditeur de code XAML.
• Concepteur de vues : ouvre la vue par défaut qui inclut la fenêtre Création et l’éditeur de code XAML. (Si vous êtes déjà dans la vue par défaut, il ne fait rien.)
• Actions rapides et refactorisations : refactorise, génère ou modifie le code avec une seule action. Lorsque vous pointez sur le code, vous verrez une icône d’ampoule lorsqu’une action rapide ou une refactorisation est disponible.
  Voir aussi : Actions rapides et code refactorisé.
• Renommer... - Renomme uniquement les espaces de noms. Si vous n’avez pas d’espace de noms à renommer, vous recevez un message d’erreur indiquant que 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 ces espaces de noms qui restent.
• Aperçu de la définition : affiche un aperçu de la définition d’un type sans quitter votre emplacement actuel dans l’éditeur.
  Voir aussi : Afficher la définition et Afficher et modifier le code à l’aide d’Afficher la définition.
• Atteindre la définition : accède à la source d’un type ou d’un membre, puis ouvre le résultat dans un nouvel onglet.
  Voir aussi : Accéder à la définition.
• Entourer avec... - Utilisez des extraits de code d'entourage, qui sont ajoutés autour d’un bloc de code sélectionné.
  Voir aussi : Extraits de code d’extension et extraits d’environnement.
• Insérer un extrait de code : insère un extrait de code à l’emplacement du curseur.
• Couper - Évident
• Copie - Auto-explicatif
• Coller - Explicite
• Plan - Développer et réduire les sections de code.
  Voir aussi : 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 y 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 existe 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 le mode carte

Vous pouvez également modifier l’apparence de la barre de défilement et les autres fonctionnalités qu’elle contient. Par exemple, de nombreuses personnes aiment inclure des annotations dans la barre de défilement, qui fournissent des repères visuels tels que les modifications de code, les points d’arrêt, les signets, les erreurs et la position du curseur.

D’autres apprécient l’utilisation du mode carte, qui affiche des lignes de code en miniature sur la barre de défilement. Les développeurs qui travaillent avec des fichiers de code volumineux peuvent trouver que le mode map 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 il existe des dimensions ajoutées à certaines d’entre elles qui facilitent le codage pour les développeurs XAML.

Extraits de code XAML

Les extraits de code sont de petits blocs de code réutilisables que vous pouvez insérer dans un fichier de code à l’aide de la commande insérer un extrait de code contextuel avec le bouton droit ou une combinaison de raccourcis clavier (Ctrl+K, Ctrl+X). IntelliSense prend désormais en charge l’affichage d’extraits XAML, qui fonctionnent pour les extraits 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 extraits de code et les pages d’extraits de code C#.

Prise en charge de #region dans XAML

Dans Visual Studio, le support de #region est disponible pour les développeurs XAML dans WPF, UWP, Xamarin.Forms et .NET MAUI. Dans Visual Studio 2019, nous continuons d'apporter des améliorations incrémentielles à la prise en charge de #region. Par exemple, dans la version 16.4 et ultérieures, #region options 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 l’expansion et la réduction des sections de code, consultez la page 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 dans l’onglet MainWindow.xaml de la manière suivante :

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

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

  

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

  

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

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

Ampoules XAML

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

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

• Supprimez les espaces de noms inutiles. Dans l’éditeur de code XAML, les espaces de noms inutiles sont soulignés avec une ligne bleue ondulée. Si vous placez votre curseur sur une utilisation 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 celui que vous pouvez supprimer.

  

• Renommez l’espace de noms. Cette fonctionnalité, disponible via le menu contextuel du clic droit après avoir sélectionné un espace de noms, simplifie la modification de plusieurs instances d'un paramètre à la fois. Vous pouvez également accéder à cette fonctionnalité à l’aide de la barre de menus, Édition>Refactorisation>Renommer, ou en appuyant sur Ctrl+R, puis Ctrl+R à nouveau.

  

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

XAML conditionnel pour UWP

Le code 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 dans le balisage en fonction de la présence d’une API sans avoir à utiliser le code-behind.

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

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 facilitent la vue d’où commencent et se terminent les blocs logiques.

Pour plus d’informations, consultez la page Navigate code.

IntelliCode pour XAML

Lorsque vous ajoutez une balise XAML à votre code, vous commencez généralement par un crochet <à angle gauche. Lorsque vous tapez ce chevron, un menu IntelliCode apparaît, répertoriant plusieurs des balises XAML les plus populaires. Choisissez celui que vous souhaitez ajouter rapidement à votre code.

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 les fonctionnalités de la page de l’éditeur de code .

Paramètres facultatifs XAML

Vous pouvez utiliser le volet Options pour modifier les paramètres par défaut de l’éditeur de code XAML. Pour afficher les paramètres, ouvrez le volet Outils>Options et développez la section Tous les paramètres>Langages>XAML.

Note

Vous pouvez également utiliser des raccourcis clavier pour accéder aux sections et paramètres dans le volet Options . Sélectionnez Ctrl+Q pour rechercher dans l’IDE, tapez les options, puis appuyez sur Entrée. Pour rechercher la liste des options, appuyez sur Ctrl+E, tapez des langues, appuyez sur Entrée, tapez xaml, puis appuyez sur Entrée.

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

Options de l’éditeur de texte universel

Les trois premières sections des options XAML fournissent des paramètres universels pour tous les langages de programmation pris en charge par l’IDE Visual Studio. Pour en savoir plus sur ces options et leur utilisation, consultez les informations liées dans le tableau suivant.

Section	Emplacement
General	Volet Options : Tous les paramètres, langues, valeurs par défaut, Général
Barres de défilement	Options, Tous les paramètres, Langues, Valeurs par défaut, Barres de défilement
Tabulations	Options, Tous les paramètres, langues, valeurs par défaut, onglets

Options d’éditeur de texte propres au code XAML

Les sections suivantes des options XAML sont spécifiques au code XAML. Ces paramètres peuvent améliorer votre expérience d’édition lorsque vous développez des applications XAML. Pour en savoir plus sur ces options et leur utilisation, consultez les informations liées dans le tableau suivant.

Section	Emplacement
Formatting	Volet Options : Tous les paramètres, langages, XAML, mise en forme
Miscellaneous	Options, Tous les paramètres, langages, XAML, Divers

Conseil / Astuce

Le paramètre Capitalize sur le nom de la 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 l'activer 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 XAML Hot Reload.

Voir aussi

• Fonctionnalités de l’éditeur Visual Studio Code
• XAML dans les applications UWP
• XAML dans les applications Xamarin.Forms
• Le XAML dans les applications .NET MAUI